<template>
	<view class="myPage">
		<view class="bg">
			<!-- <headers :showBack="false" :themeType="'white'">
				<view class="headerName">
					我的
				</view>
			</headers> -->
			<view class="header_bg">
				<view class="userBox">
					<!-- <image class="userImg" :src="url_config + 'image/' + userInfo.avatar" v-if="userInfo.avatar"></image>
					<image class="userImg" src="@/static/userImg.png" v-else></image> -->
					<!-- :src="url_config + 'image/' + userInfo.avatar" -->
					<u-image :src="defaultImg" @click="changeImg" 
						style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 20rpx;" shape="circle"
						mode="scaleToFill">
						<template v-slot:error>
							<image  style="width: 100rpx;height: 100rpx;border-radius: 50%;"
								src="@/static/userImg.png"></image>
						</template>
						
					</u-image>
					<view>
						<text v-if="uid">{{userInfo.realName}}</text>
						<text v-else>{{userInfo.account}}</text>
						<text>
							<!-- 欢迎来到智慧工地系统 -->
							岗位(工种)：{{userInfo.postWorkTypeName}}
						</text>
					</view>
				</view>
			</view>
			<!-- <view class="usercontonin">
				<view class="userBox">
					<u-image :src="url_config + 'image/' + userInfo.avatar"
						style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 20rpx;" shape="circle"
						mode="scaleToFill">
						<image slot="error" style="width: 100rpx;height: 100rpx;border-radius: 50%;"
							src="@/static/userImg.png"></image>
					</u-image>
					<text v-if="uid">{{userInfo.realName}}</text>
					<text v-else>{{userInfo.account}}</text>
				</view>
				<view class="userbtn" @click="goUserInfo()">
					<uni-icons2 class="compose" type="compose" size="20"></uni-icons2>
					<text>个人中心</text>
				</view>
			</view> -->
		</view>
		<!-- v-if="COMPANY != 'nanchang'" -->
		<view class="operateBar">
			<view class="left">
				账号名称
			</view>
			<view>{{uid ? userInfo.realName : userInfo.account}}</view>
		</view>
		<view class="operateBar">
			<view class="left">
				电话号码
			</view>
			<view>{{userInfo.userTel ? userInfo.userTel : ''}}</view>
		</view>
		<view class="operateBar">
			<view class="left">
				电子邮箱
			</view>
			<view>{{userInfo.personMail ? userInfo.personMail : '暂无邮箱,请修改个人信息'}}</view>
		</view>
		<view class="operateBar" @click="goChangePassword()">
			<view class="left">
				修改密码
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view>
		<view class="operateBar" @click="goChangeInfo()">
			<view class="left">
				修改个人信息
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view>
<!-- 		<view class="operateBar" @click="goUserInfo" v-if="isUserCofing || [5,10].includes(userInfo.accountType)">
			<view class="left">
				<image class="operateIcon" src="@/static/file.png" mode="widthFix"></image>
				个人中心
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view>
		<view class="operateBar" @click="viewFileFn" v-if="isShowProjectDocument">
			<view class="left">
				
				项目资料
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view>
		<view class="operateBar" v-if="toMessageFlag" @click="toMessageCenter">
			<view class="left">
				
				我的消息
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view> -->
		<view class="operateBar" @click="goBackEndFn" v-if="![5,6,10].includes(userInfo.accountType)">
			<view class="left">
				<image class="operateIcon" src="@/static/file.png" mode="widthFix"></image>
				项目后台
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view>
		<!-- <view class="operateBar" @click="viewVersionInfo" v-if="COMPANY != 'longguang' && COMPANY != 'nanchang'">
			<view class="left">
				<image class="operateIcon" src="/static/download.png" mode="widthFix"></image>
				检测新版本 {{version}}
			</view>
			<uni-icons2 class="arrowright" type="arrowright" size="20"></uni-icons2>
		</view> -->
		<view v-if="!uid" class="operateBar logoutBar" @click="logout">
			退出登录
		</view>
		<footers v-if="flag" :activeTab="'my'"></footers>
		<footers2 v-else></footers2>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import {
		exitApp
	} from "@/utils/tool.js"
	import footers from "@/components/footers/footers.vue"
	import footers2 from "@/components/footers/footers2.vue"
	import headers from "@/components/headers/headers.vue"
	export default {
		components: {
			footers,
			headers,
			footers2,
			levitatedsphere
		},
		data() {
			return {
				isShowProjectDocument: false,
				userInfo: {
					accountType: 0
				},
				systemInfo: {},
				version: '',
				flag: true,
				uid: '',
				haveModuleList: [],
				toMessageFlag: false,
				menuList: [],
				defaultImg: "",
			};
		},
		onLoad(val) {
			this.uid = uni.getStorageSync('UID');
			this.systemInfo = uni.getStorageSync('systemInfo')
			if (typeof plus !== "undefined") {
				this.version = plus.runtime.version
			}
			if (val.type == 1) {
				this.flag = false
			}
			this.isShowProjectDocument = JSON.parse(uni.getStorageSync('userInfo')).systemLogoConfig.showFileCenter;
			this.menuList = JSON.parse(uni.getStorageSync("userInfo")).menuAuthority.menuList
		},
		onShow() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getInfoFn();
		},
		created() {
			this.getModuleList();
		},
		computed: {
			isUserCofing() {
				const myModuleList = this.menuList.filter(item => item
					.moduleType == 2);
				console.log(this.menuList)
				const rowItem = this.searchMenuList(myModuleList, 'userCenter/userConfig');
				console.log(6666666, rowItem)
				return rowItem ? true : false;
			}
		},
		methods: {
			// 修改个人信息
			updateInfoFn() {
				let that = this;
				this.sendRequest({
					url: "xmgl/systemUser/edit",
					data: {
						...this.userInfo
					},
					method: "POST",
					success(res) {
						uni.showToast({
							title: "修改成功"
						})
						let originUserInfo = JSON.parse(uni.getStorageSync("userInfo"))
						uni.setStorageSync("userInfo", JSON.stringify({
							...originUserInfo,
							...that.userInfo
						}))
					}
				})
			},
			// 获取个人信息
			getInfoFn() {
				let that = this;
				this.sendRequest({
					url: "xmgl/systemUser/queryById",
					data: {
						id: this.userInfo.userId
					},
					method: "POST",
					success(res) {
						console.log(res)
						that.userInfo = {
							...res.result
						};
						if (that.userInfo.avatar) {
							that.defaultImg = that.url_config + 'image/' + res.result.avatar
						} else {
							that.defaultImg = "../../../static/userImg.png"
						}
					}
				})
			},
			changeImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.userInfo.avatar = data.url;
								that.defaultImg = that.url_config + 'image/' + data.url
								that.updateInfoFn();
								console.log("上传图片的信息：", that.defaultImg)
							}
						});
					}
				})
			},
			searchMenuList(dataList, path) {
				return dataList.find(item => {
					if ( Array.isArray(item.menuList) && item.menuList.length > 0) {
						return this.searchMenuList(item.menuList, path);
					} else if (item.path.includes(path)) {
						return item;
					}
					return undefined;
				});
			},
			getModuleList() {
				var that = this
				this.sendRequest({
					url: "xmgl/baseModule/getModuleAndMenuList",
					data: {
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
						moduleType: 7,
						userId: JSON.parse(uni.getStorageSync('userInfo')).userId,
						isApp: 1
					},
					method: "post",
					success(result) {
						if (result.success) {
							that.haveModuleList = result.result.moduleList
							if (that.userInfo.accountType == 5 || that.userInfo.accountType == 6 || that
								.userInfo
								.accountType == 10) {
								let findInfo = that.haveModuleList.find(item => item.modulePath ==
									"/infoCenter/allInfo")
								if (findInfo) {
									that.toMessageFlag = true
								}
							}
						}
					}
				})
			},
			viewVersionInfo() {

				var that = this
				// console.log('viewVersionInfo',that.url_config)
				// uni.navigateTo({
				// 	url:'versionInfo'
				// })

				if (this.systemInfo.platform.indexOf('android') != -1 && typeof plus !== "undefined") {
					//获取最新版本
					that.sendRequest({
						url: "xmgl/appVersion/getAppVersion",
						data: {},
						method: "POST",
						success(res2) {
							console.log('最新版本', res2)
							//获取当前应用版本
							console.log('plus.runtime.version', plus.runtime.version)
							if (res2.result && (res2.result.versionNo != plus.runtime.version)) {
								uni.showModal({
									title: '版本更新',
									content: '更新内容：' + res2.result.versionDescribe,
									confirmText: '更新',
									success(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											// var url = that.url_config + 'image/' + JSON.parse(res2.result.downloadUrl)[0].url
											var url = JSON.parse(res2.result.downloadUrl)[0].url
											console.log('apk地址11', url)
											console.log('apk地址22', url)
											uni.showModal({
												title: '提示',
												content: '正在后台下载更新资源，请耐心等待...',
												showCancel: false
											})
											uni.downloadFile({
												url: url,
												success: (res) => {
													// uni.hideLoading()
													console.log('res', res)
													if (res.statusCode === 200) {
														console.log('下载成功33');
														var fileSaveUrl = plus.io
															.convertLocalFileSystemURL(res
																.tempFilePath);
														plus.runtime.openFile(res
															.tempFilePath); //选择软件打开文件
													}
												}
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							} else {
								uni.showToast({
									title: '您已经是最新版本啦！',
									icon: 'none'
								})
							}
						}
					})
				}
			},
			goBackEndFn() {
				uni.navigateTo({
					url: '../areaTree/areaTree?type=backend'
				})
			},
			viewFileFn() {
				uni.navigateTo({
					url: '../fileList/fileList'
				})
			},
			goUserInfo() {
				uni.navigateTo({
					url: '../my/userInfo/userInfo'
				})
			},
			toMessageCenter() {
				uni.navigateTo({
					url: '../messageCenter/messageCenter'
				})
			},
			goChangeInfo() {
				uni.navigateTo({
					url: '/pages/my/changeInfo/changeInfo',
				})
			},
			goChangePassword() {
				console.log(11);
				uni.navigateTo({
					url: '/pages/my/changePassword/changePassword',
				})
			},
			logout() {
				this.sendRequest({
					url: "xmgl/base/logout",
					data: {
						id: this.userInfo.userId
					},
					method: "POST",
					success() {
						exitApp()
					},
					fail() {
						exitApp()
					}
				})


			}
		}
	}
</script>

<style lang="scss">
	.header_bg {
		width: 100vw;
		height: 304rpx;
		background-image: url(@/static/bthgIcon/homePage_bg5.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// background: linear-gradient(180deg, #2B8DF3 0%, #F4F5FD 100%);
		// position: absolute;
		// top: 0;
		position: relative;

		.userBox {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			padding: 0 62rpx;
			display: flex;

			>view:last-child {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				color: white;
				font-size: 30rpx;
				margin-left: 24rpx;

				>text:last-child {
					font-size: 24rpx;
				}
			}
		}
	}

	.usercontonin {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 40rpx;
	}

	.userbtn {
		padding: 12rpx 40rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}

	.compose {
		color: white !important;
	}

	.myPage {
		height: 100%;
		padding-bottom: 118rpx;
		background-color: #F3F5F7;
		position: relative;

		:deep(.headerBox ){
			border-bottom: none;
		}
	}

	.bg {
		// background-color: #2b8df3;
		;
		color: #FFFFFF;

		.title {
			text-align: center;
			// padding: 20rpx 0 0;
		}
	}

	// .userBox {
	// 	display: flex;
	// 	align-items: center;
	// 	padding: 80rpx 40rpx;
	// 	font-size: 40rpx;
	// }

	.userImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.operateBar {
		background-color: #FFFFFF;
		font-size: 28rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 0 30rpx 36rpx;
		padding: 0 30rpx;
		justify-content: space-between;
		border-radius: 8rpx;
		color: #444444;

		.left {
			display: flex;
			align-items: center;
		}

		.operateIcon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.arrowright {
			opacity: 0.5;
			color: #444444 !important;
		}
	}

	.logoutBar {
		justify-content: center;
		background-color: #2D8EF3;
		color: white;
		font-size: 36rpx;
		width: 620rpx;
		height: 92rpx;
		position: fixed;
		left: 50%;
		bottom: 236rpx;
		transform: translateX(-50%);
		margin: 0;
	}
</style>