<template>
	<view class="my-box">
		<view class="title-box">
			<view class="title-imgbg">
				<image v-if="userInfo.imgPath" :src="userInfo.imgPath" mode=""></image>
				<text v-else class="title-imgbg-txt">{{userInfo.name.slice(-2)}}</text>
			</view>
			<view class="title-info-box">
				<view class="title-info-name">
					{{userInfo.name}}
				</view>
				<view class="title-info-company">
					{{userInfo.company}}
				</view>
			</view>
		</view>
		
		<view class="my-list">
			<!-- <view class="my-item" @click="goItem('none')">
				<view class="my-item-left">
					<view class="my-item-icon color-blue">
						<view class="iconfont icon-gongsi"></view>
					</view>
					<view class="my-item-name">
						公司列表
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view> -->
			<view class="my-item" @click="goItem('/pages/my/reset-password')">
				<view class="my-item-left">
					<view class="my-item-icon color-blue">
						<view class="iconfont icon-mima"></view>
					</view>
					<view class="my-item-name">
						修改密码
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
			<!-- <view class="my-item" @click="goItem('none')">
				<view class="my-item-left">
					<view class="my-item-icon color-blue">
						<view class="iconfont icon-mobile"></view>
					</view>
					<view class="my-item-name">
						换绑手机
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-version">
						{{userInfo.phone}}
					</view>
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view> -->
			<view class="my-item">
				<view class="my-item-left">
					<view class="my-item-icon color-yellow">
						<view class="iconfont icon-banbenlishi"></view>
					</view>
					<view class="my-item-name">
						版本号
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-version">
						{{version}}
					</view>
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="my-item" @click="checkUpdate">
				<view class="my-item-left">
					<view class="my-item-icon color-yellow">
						<view class="iconfont icon-rocket"></view>
					</view>
					<view class="my-item-name">
						版本更新
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-version">
						检查更新
					</view>
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="my-item" @click="goItem('none')">
				<view class="my-item-left">
					<view class="my-item-icon color-green">
						<view class="iconfont icon-setting"></view>
					</view>
					<view class="my-item-name">
						设置
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
			<view class="my-item" @click="goItem('logout')">
				<view class="my-item-left">
					<view class="my-item-icon .color-blue">
						<view class="iconfont icon-tuichu"></view>
					</view>
					<view class="my-item-name">
						退出登录
					</view>
				</view>
				<view class="my-item-right">
					<view class="my-item-icon">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {phoneHide} from '@/common/js/util/desensitization.js';
	// #ifdef APP-PLUS
	import update from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
	// #endif
	export default{
		data(){
			return{
				userInfo:{
					name:"张三",
					company:'海创微联',
					imgPath:'',
					phone:''
				},
				version:'1.0.0'
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			const accountInfo = wx.getAccountInfoSync();
			console.log("accountInfo",accountInfo)
			if(accountInfo.miniProgram.envVersion=='release'&&accountInfo.miniProgram.version!=''){
			    this.version = accountInfo.miniProgram.version;
			}
			// #endif
			
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			console.log("userInfo",userInfo)
			if(userInfo){
				this.userInfo = {
					name:userInfo.name,
					company:userInfo.realName || '物联网平台',
					imgPath:userInfo.avatar,
					// phone:phoneHide(userInfo.telephone)
				}
			}
		},
		methods:{
			checkUpdate(){
				// #ifdef APP-PLUS
				// code	message
				// 		0	当前版本已经是最新的，不需要更新
				// 		101	wgt更新
				// 		102	整包更新
				// 		-101	暂无更新或检查appid是否填写正确
				// 		-102	请检查传参是否填写正确
				update().then((res)=>{
					console.log("升级校验成功",res)
					if(res?.code == 0){
						this.$refs.uToast.show({
							title: res.message,
							type: 'success',
						})
					}else if(res?.code== 101 || res?.code== 102){
					}else if(res?.code!=undefined){
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}else{
						this.$refs.uToast.show({
							title: res,
							type: 'error',
						})
					}
				}).catch((err)=>{
					console.log("升级校验失败",err)
					this.$refs.uToast.show({
						title: "版本校验失败"+err,
						type: 'error',
					})
				})
				// #endif
			},
			goItem(type){
				if(type=='none'){
					uni.$u.toast('功能开发中');
				}else if(type=='logout'){
					this.logout();
				}else{
					console.log("跳转页面",type)
					uni.navigateTo({
						url:type
					})
				}
			},
			logout(){
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗？',
					success: (res)=>{
						if (res.confirm) {
							console.log('用户点击确定');
							// this.$store.commit('logout');
							this.$api.userLogout({}).then(res => {
								if(res.status == 200){
									this.$store.commit('setTokenKey', '');
									uni.$u.toast('退出登录成功');
									uni.removeStorageSync('token')
									uni.removeStorageSync('expire')
									setTimeout(()=>{
										uni.reLaunch({
											url:"../tabbar/login"
										})
										return;
									},200)
								}
							}, error => {
								this.$store.commit('setTokenKey', '');
								uni.$u.toast('退出登录成功');
								uni.removeStorageSync('token')
								uni.removeStorageSync('expire')
								setTimeout(()=>{
									uni.reLaunch({
										url:"../tabbar/login"
									})
									return;
								},200)
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-box{
		.title-box{
			padding: 60rpx 30rpx;
			display: flex;
			border-bottom: 1px solid #fbfbfb;
			.title-imgbg{
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #0087fc;
				margin-right: 30rpx;
				color: #fff;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title-info-box{
				.title-info-name{
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.title-info-company{
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		
		.my-list{
			.my-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 30rpx;
				border-bottom: 1px solid #fbfbfb;
				.my-item-left{
					display: flex;
					align-items: center;
					.my-item-icon{
						margin-right: 20rpx;
						.iconfont{
							font-size: 40rpx;
							background-image: -webkit-linear-gradient(-90deg, #0869D8, #57AFFF);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
				.my-item-right{
					display: flex;
					align-items: center;
					.my-item-icon{
						margin-left: 20rpx;
						color: $uni-text-color-disable;
						.iconfont{
							font-size: 40rpx;
						}
					}
					.my-item-version{
						color: $textColor;
					}
				}
			}
		}
	}
	.color-blue{
		color: $uni-color-primary;
	}
	.color-green{
		color: $uni-color-success;
	}
	.color-yellow{
		color: $uni-color-warning;
	}
</style>