<template>
	<view v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="个人中心" :marginBottom="0"></status-nav>
		<view class="ucenter-bg border-box" :style="{'min-height':windoHeight - statusHeight - 50+'px'}">
			<view class="ucenter">
				<view class="item item-first flex">
					<view class="title">头像</view>
					<view class="img">
						<image :src="headImgUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex">
					<view class="title">昵称</view>
					<view class="msg">{{nickName}}</view>
				</view>
				<view class="item flex" @tap="openEdit('real_name')">
					<view class="title">真实姓名</view>
					<input class="msg" type="text" v-model="realName" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex" style="position: relative;">
					<view class="title">联系电话</view>
					<input class="msg" type="number" v-model="mobile" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
					<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></button>
				</view>
				<picker mode="region" @change="change">
					<view class="item flex">
						<view class="title">联系地址</view>
						<input class="msg" type="text" v-model="area" disabled="true">
						<view class="more">
							<image src="/static/icon/icon-join.png" mode="widthFix"></image>
						</view>
					</view>
				</picker>
				<view class="item flex" @tap="openEdit('address')">
					<view class="title">详细地址</view>
					<input class="msg" type="text" v-model="address" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 修改信息 -->
		<view class="pull-bg" style="background-color: rgba(0,0,0,.3);"  v-show="isOpen" @tap="closeEdit"></view>
		<view class="pull-box-bg border-box" v-if="isOpen">
			<view class="pull-box radius20 background-white font30">
				<view class="title font32">{{title}}</view>
				<view class="pull-list">
					<view class="pull-item mar-s20">
						<view class="tips color-8c">{{subtitle}}</view>
						<input class="input" type="text" v-model="msg" :placeholder="placeholder" placeholder-style="color:#000000">
					</view>
				</view>
				<view class="submit-btn font32 background-blue radius30 color-ff mar-s50 flex" @tap="submitEdit">提交修改</view>
				<view class="close-btn" @tap="closeEdit">
					<image src="/static/close-btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windoHeight:uni.getSystemInfoSync().windowHeight,
				statusHeight:uni.getSystemInfoSync().statusBarHeight,
				headImgUrl:'', //头像链接
				nickName:'', //昵称
				businessCode:'', //会员码
				realName:'',//真实姓名
				mobile:'',//电话
				area:'',//联系地址
				address:'',//详细地址
				isOpen:false, //是否显示
				title:'', //标题
				subtitle:'', //副标题
				msg:'', //修改内容
				field:'', //修改位置
				placeholder:'', //默认信息
				headImg:'', //缓存头像链接
				province:'', //省
				city:'', //市
				county:'', //区
				isLoading:false,
			}
		},
		onLoad(op) {
			this.getUserData();
		},
		onShow() {
			
		},
		methods: {
			// 获取用户信息
			getUserData(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/user/info').then(res=>{
					console.log(res,'用户信息')
					if(res.code==0) {
						this.headImgUrl = res.data.headimgurl;
						this.nickName = res.data.nickname;
						this.businessCode = res.data.business_code;
						this.realName= res.data.real_name;
						this.mobile= res.data.mobile;
						this.area= res.data.province+res.data.city+res.data.county;
						this.address= res.data.address;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 选择修改信息
			openEdit(type){
				if(type == 'real_name'){
					this.title = '真实姓名';
					this.subtitle = '真实姓名';
					this.placeholder = '请输入真实姓名';
					this.msg = this.realName==''?'':this.realName;
					this.isOpen = true;
					this.field = 'real_name';
				}
				if(type == 'address'){
					this.title = '详细地址';
					this.subtitle = '详细地址';
					this.placeholder = '请输入详细地址';
					this.msg = this.address==''?'':this.address;
					this.isOpen = true;
					this.field = 'address';
				}
			},
			// 选择省市区
			change(e){
				this.area = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.county = e.detail.value[2];
				this.field = 'area'
				setTimeout(()=>{
					this.submitEdit()
				},200)
			},
			// 提交修改
			submitEdit(){
				if(this.field == 'real_name'){
					var params = {
						real_name:this.msg
					}
					console.log(params,123)
				}
				if(this.field == 'address'){
					var params = {
						address:this.msg
					}
				}
				if(this.field == 'area'){
					var params = {
						province:this.province,
						city:this.city,
						county:this.county
					}
				}
				
				uni.showLoading({
					title:'修改中'
				});
				if(params){
					this.$requst.post('/api/user/edit-info',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('修改成功');
							// 关闭弹窗
							this.closeEdit();
							// 刷新用户信息
							this.getUserData();
						}
					})
				}else{
					this.$toolAll.tools.showToast('您没有更改信息');
					// 关闭弹窗
					this.closeEdit();
				}
				uni.hideLoading();
			},
			
			// 关闭弹窗
			closeEdit(){
				this.title = '';
				this.subtitle = '';
				this.msg='';
				this.isOpen = false;
				this.type=''
			},
			
			// 获取授权信息
			onGetPhoneNumber(e){  
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权  
					this.$toolAll.tools.showToast('您已拒绝授权');
				}else{ //允许授权  
					let params={
						iv:e.detail.iv,
						encryptedData:e.detail.encryptedData
					}
					this.$requst.post('/api/user/bind-phone',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('绑定成功');
							// 刷新用户信息
							this.getUserData();
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
					})
					
				}  
			},
		}
	}
</script>

<style scoped>
	.ucenter-bg{
		width: 100%;
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}
	.ucenter{
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.ucenter .item{
		flex-wrap: nowrap;
		align-items: center;
		height: 100rpx;
		position: relative;
	}
	.ucenter .item .title{
		width: 170rpx;
		font-size: 30rpx;
		color: #000000;
	}
	.ucenter .item .more{
		margin-left: 20rpx;
	}
	.ucenter .item .more image{
		width: 14rpx;
		height: 26rpx;
	}
	.ucenter .item .msg{
		width: calc(100% - 204rpx);
		height: 60rpx;
		font-size: 24rpx;
		color: #8c8c9b;
		text-align: right;
	}
	
	
	.ucenter .item-first{
		justify-content: space-between;
		height: 146rpx;
		padding: 5rpx 0;
	}
	.ucenter .item .img{
		width: 136rpx;
		height: 136rpx;
		border-radius: 100%;
		margin-right: 34rpx;
		overflow: hidden;
	}
	.ucenter .item .img image{
		width: 136rpx;
		min-height: 136rpx;
	}
	.ucenter .get-phone-btn{
		display: block;
		width: 100%;
		height: 100rpx;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
	}
	/* 弹窗 */
	.pull-bg{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.47);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.pull-box-bg{
		padding: 34rpx 60rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		top: 50%;
		z-index: 999;
		transform: translateY(-50%);
	}
	.pull-box{
		padding: 40rpx 60rpx;
		line-height: 1.5;
		position: relative;
	}
	.pull-box .title{
		text-align: center;
		font-weight: bold;
	}
	.pull-box .input{
		height: 80rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.pull-box .close-btn{
		width: 76rpx;
		height: 76rpx;
		position: absolute;
		top: -34rpx;
		right: -30rpx;
	}
	.pull-box .close-btn>image{
		width: 100%;
	}
	.pull-box .submit-btn{
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	.pull-box .submit-btn>image{
		width: 56rpx;
		margin-right: 30rpx;
	}
	.pull-box .addr-input{
		width: 100%;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.pull-box .addr-input .input-box{
		justify-content: space-between;
		align-items: center;
		width: calc(33% - 20rpx);
		border-bottom: 2rpx solid #e6e6e6;
	}
	.pull-box .addr-input .input-box .input-flex{
		width: calc(100% - 35rpx);
		height: 80rpx;
	}
	.pull-box .addr-input .input-box>image{
		width: 15rpx;
		height: 28rpx;
	}
	.pull-box .shear-btn{
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
</style>