/** * 我的 */
<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>
		
		<u-popup
		  customStyle="poppo"
		  :show="show"
		  :round="10"
		  mode="center"
			:closeOnClickOverlay="false"
		  @close="show = false"
		>
		  <u--input
		    v-model="inputValue"
		    placeholder="填写手机号码"
		    border="surround"
		  ></u--input>
		  <button @click="confirmPhone">确认</button>
		</u-popup>
  </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";
export default {
  components: {
    TabBar,
  },
  data() {
    return {
      img: '', //头像
			id: '', //用户id
			list: [
				{
					id: 'number',
					name: '员工号',
					value: ''
				},
				{
					id: 'name',
					name: '员工姓名',
					value: ''
				},
				{
					id: 'type',
					name: '员工类型',
					value: ''
				},
				{
					id: 'phone',
					name: '手机号',
					value: ''
				},
			],
			show: false,
			inputValue: "",
		}
  },
	mounted() {
		const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		this.img = userInfo.avatar;
		this.id = userInfo.id;
		this.list[0].value = userInfo.account;
		this.list[1].value = userInfo.name;
		this.list[2].value = userInfo.salt;  //物业人员0，安保人员1，正式员工2
		this.list[3].value = userInfo.phone;
	},
  onShow() {
    let pages = getCurrentPages()
    const curPage = pages[pages.length - 1]
    this.currentPagePath = curPage.route
    uni.setStorageSync('currentPagePath', this.currentPagePath);
		
		this.phone = uni.getStorageSync("registerPhone");
		console.log('----------', typeof this.phone);
		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();
		},
		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.show = true;
			}
		}
  },
}
</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>