/** * 我的 */
<template>
  <view class="mine">
    <!-- <TabBar></TabBar> -->
		<view class="image-area">
			<u-avatar :src="img" size='80'></u-avatar>
		</view>
		
		<view class="title">我的账号</view>
		
		<view class="content" v-for="item in list" :key="item.id">
			<text class="title">{{item.name}}</text>
			<text class="value">{{item.value}}</text>
		</view>
		
		<view class="title">账号设置</view>
		<button class="changeImg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">修改图片</button>
		<view class="title">客服电话</view>
		<view class="content" style="justify-content: flex-end;" @click="call">{{ServiceTel}}</view>
		
		<!-- 获取手机号popup组件 -->
		<GetPhonePopup :popShow="popShow" @closePop="closePop"/>
  </view>
</template>

<script>
	import TabBar from '@/components/tabBar/tabBar.vue';
	import { updateImg } from '@/api/mine.js';
	import { verifyPhone } from "@/api/index.js";
	import { getLogin, getUserProfile } from "@/utils/auth.js";
	import GetPhonePopup from "@/components/base/getphonePopup.vue"
	import { getUserInfo } from "@/api/index.js";
export default {
  components: {
    TabBar, GetPhonePopup
  },
  data() {
    return {
      img: '', //头像
			id: '', //用户id
			list: [
				{
					id: 'number',
					name: '员工号',
					value: ''
				},
				{
					id: 'name',
					name: '员工姓名',
					value: ''
				},
				{
					id: 'documentTypeName',
					name: '证件类型',
					value: ''
				},
				{
					id: 'phone',
					name: '手机号',
					value: ''
				},
			],
			popShow: false, //控制授权手机号弹出框
			ServiceTel: '987183691'
		}
  },
	mounted() {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage"]
		});
		this.solveData();
	},
	//分享好友
	onShareAppMessage() {
		return {
			title: '环市东院区安防小程序',
			imageUrl: '../../static/share.jpg',
		};
	},
  onShow() {
    let pages = getCurrentPages()
    const curPage = pages[pages.length - 1]
    this.currentPagePath = curPage.route
    uni.setStorageSync('currentPagePath', this.currentPagePath);
		
		this.phone = uni.getStorageSync("registerPhone");
		this.checkphone();
  },
  methods: {
    onChooseAvatar(e) {
			this.img = e.detail.avatarUrl;
			updateImg(this.img, this.id);
		},
		confirmPhone() {
		  this.phone = this.inputValue;
			this.show = false;
		  this.checkphone();
		},
		//点击客服电话
		call() {
			wx.makePhoneCall({
				phoneNumber: this.ServiceTel,
			})
		},
		//检查手机号
		async checkphone() {
			//有电话就去验证
			if(this.phone) {
				const res = await verifyPhone(this.phone);
				if (res === "用户未注册") {
					wx.reLaunch({
						url: "/pages/register/register",
					});
				} else {
					uni.setStorageSync("registerPhone", this.phone);
					getUserProfile();
				}
			} else { //没有电话就弹出授权
				this.popShow = true;
			}
		},
		//关闭提示框
		closePop() {
			this.popShow = false;
			// getUserProfile();
			this.solveData()
		},
		//处理数据
		async solveData() {
			if(!uni.getStorageSync('userInfo')) {
				await getUserProfile();
			} 
			const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.img = userInfo.avatar;
			console.log('头像url', this.img)
			this.id = userInfo.id;
			//证件类型：1工作证 、 2出入证
			this.$set(this.list, 0,  {
					id: 'number',
					name: '员工号',
					value: userInfo.account
			});
			this.$set(this.list, 1,  {
					id: 'name',
					name: '员工姓名',
					value: userInfo.name
			});
			this.$set(this.list, 2,  {
					id: 'documentTypeName',
					name: '证件类型',
					value: userInfo.documentType
			});
			this.$set(this.list, 3,  {
					id: 'phone',
					name: '手机号',
					value: userInfo.phone
			});
		}
  },
}
</script>

<style scoped lang="scss">
	.mine {
		padding: 52rpx;
		.image-area {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 100rpx;
		}
		.title {
			font-size: 38rpx;
			font-weight: 600;
			margin: 30rpx 0;
		}
		.changeImg {
			background-color: #fff;
			border-color: #fff;
			color: #c5000a;
			// margin-top: 120rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 34rpx;
			font-weight: 400;
			.title {
				font-size: 34rpx;
				font-weight: 400;
			}
		}
	}
</style>
<style lang="scss">
	.mine {
		.button {
		  justify-content: center !important;
		  background-color: #fff !important;
		  border-color: #fff !important;
		  color: #c5000a !important;
		  // margin-top: 120rpx;
		  font-weight: 600;
		}
		.u-popup__content {
		  padding: 20rpx 40rpx;
		}
	}
</style>