<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'修改资料'" :whereCome="whereCome" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<!-- 列表 -->
		<view :style="{paddingTop: statusHNH+'px'}" class="fon28 pad-x20">
			<view v-for="(itemd,indexd) in dataList" :key="indexd"
			class="disjbac borbot mar-zy40" :class="(indexd!=1 && indexd!=5 && indexd!=6) ? 'pad-sx40':''">
				<!-- 标题 -->
				<view class="col9 flexs" style="width: 17.8%;">
					<view v-if="indexd!=2 && indexd!=3 && indexd!=7">{{itemd.title}}:</view>
					<!-- 恒美ID -->
					<view v-if="indexd==2" class="disjb">
						<view class="disjb width100">
							<view>{{itemd.title.charAt(0)}}</view>
							<view>{{itemd.title.charAt(1)}}</view>
							<view>{{itemd.title.charAt(2)}}{{itemd.title.charAt(3)}}</view>
						</view>
						<view>:</view>
					</view>
					<!-- 性别、地址 -->
					<view v-if="indexd==3 || indexd==7" class="disjb">
						<view class="disjb width100">
							<view>{{itemd.title.charAt(0)}}</view>
							<view>{{itemd.title.charAt(1)}}</view>
						</view>
						<view>:</view>
					</view>
				</view>
				<view class="disac fe width100 tright">
					<!-- 内容 -->
					<view v-if="itemd.content!='' && (indexd!=1 && indexd!=5 && indexd!=6)" :class="indexd==1?'nic':'col3'" class="mar-y20 width100" :style="{marginRight:indexd==2?'39rpx':''}">{{itemd.content}}</view>
					<!-- 性别下拉弹框 -->
					<picker v-if="indexd==3" class="col3 mar-y20 width100" @change="changePicker" :value="current" :range="pickerData">
						<view>{{pickerData[current]}}</view>
					</picker>
					<!-- 出生日期下拉框 -->
					<picker v-if="indexd==4" mode="date" class="col3 mar-y20 width100" @change="changeTime" :value="currentt" :range="pickerTime">
						<view>{{pickerTime[currentt]}}</view>
					</picker>
					<!-- 地址下拉框 -->
					<!-- <picker v-if="indexd==7" mode="multiSelector" class="col3 mar-y20 width100" @change="changeAddress" :value="currenta" :range="pickerAddress">
						<view>{{pickerAddress[0]}}{{pickerAddress[1]}}{{pickerAddress[2]}}</view>
					</picker> -->
					<!-- <view v-if="indexd==7" @tap="openPicker" class="width100 mar-y20">{{region}}</view> -->
					<view v-if="indexd==7" @tap="openAddres2" class="width100 mar-y20">{{pickerText}}</view>
					<!-- 用户昵称、真实姓名、联系电话输入框 -->
					<input @focus="inputFo(indexd)" @blur="inputB(indexd)" v-if="indexd==1 || indexd==5 || indexd==6" :type="(indexd==1 || indexd==5)?'text':'number'" :maxlength="indexd==6?11:10" v-model="itemd.content" class="mar-y20 tright pad-sx40 width100" style="border: none;" :placeholder="itemd.fcon"/>
					<!-- 用户头像 -->
					<image v-if="indexd==0" :src="itemd.imgSrc || moHead" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image>
					<!-- <image @tap="chooseHead" v-if="itemd.imgSrc!=''" :src="itemd.imgSrc" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image> -->
					<!-- 前进键 -->
					<image v-if="indexd!=0 && indexd!=2" src="/static/public/nexth.png" class="head_next flexs"></image>
				</view>
			</view>
		</view>
		<view class="" @tap="updataInfo" style="height: 90rpx;line-height: 90rpx;margin: 80rpx 100rpx 120rpx 100rpx;" class="radius20 fon40 bold colf tc" :style="{background:publicColor}">{{btnCon}}</view>
		<!-- 底部弹框 -->
		<!-- <city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city> -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		<!-- 底部客服 -->
		<public-customer :nbottom="100"></public-customer>
	</view>
</template>

<script>
	import city from '@/components/city/city.vue';
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		components:{
			// city,
			simpleAddress
		},
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				moHead:'/static/public/logo.png',
				dataList:[
					{title:'用户头像',content:'',imgSrc:'',fcon:''},
					{title:'用户昵称',content:'',imgSrc:'',fcon:'请输入用户昵称'},
					{title:'恒美ID',content:'',imgSrc:'',fcon:''},
					{title:'性别',content:'',imgSrc:'',fcon:''},
					{title:'出生日期',content:'',imgSrc:'',fcon:''},
					{title:'真实姓名',content:'',imgSrc:'',fcon:'请输入真实姓名'},
					{title:'联系电话',content:'',imgSrc:'',fcon:'请输入联系电话'},
					{title:'地址',content:'',imgSrc:'',fcon:''},
				],
				isKuang:true,
				current:0,
				pickerData:['未知','男','女'],
				currentt:0,
				pickerTime:['1997-01-01'],
				currenta:0,
				// pickerAddress:['四川省 ','成都市 ','青羊区'],
				// lotusAddressData:{
				//     visible:false,
				//     provinceName:'',
				//     cityName:'',
				//     townName:'',
				// },
				// region:'四川省成都市成华区',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '四川省成都市成华区',
				btnCon:'保存',
				uinfo:{},
				addressInfo:[],
				newProvice:'',//当前省份
				newCity:'',//当前城市
				newDistrict:'',//当前区县
				whereCome:0,
			}
		},
		onShow() {
			this.$toolAll.tools.isLogin()
		},
		onUnload() {
			uni.removeStorageSync('firstInfo')
		},
		onLoad(options) {
			if(options.whereNum==2){
				this.whereCome = options.whereNum
			}
			let chuo = new Date().getTime()// 获取当前时间戳
			let time = this.$toolAll.tools.timestampToTime(chuo)// 转换日期格式为XXXX-XX-XX
			// 获取当前位置的经纬度
			wx.getLocation({
				success:(res)=> {
					// 逆解析经纬度
					this.getDistrict(res.latitude, res.longitude)
				},
			})
			let firstObj = uni.getStorageSync('firstInfo')
			if(firstObj==''){
				let obj = uni.getStorageSync('uinfo')
				if(obj!='') this.uinfo = obj
				this.dataList[0].imgSrc = obj.headimgurl//用户头像
				this.dataList[1].content = obj.nickname//用户昵称
				this.dataList[2].content = obj.coding//恒美ID
				this.current = obj.gender//性别1男，2女,0未知
				obj.birthday!='' ? this.pickerTime = [obj.birthday.slice(0,10)] : this.pickerTime = [time.slice(0,10)]//出生日期
				obj.real_name!=null && obj.real_name !=''  ? this.dataList[5].content = obj.real_name : this.dataList[5].fcon = '未知'//真实姓名
				obj.mobile!='' ? this.dataList[6].content = obj.mobile : this.dataList[6].fcon = '未知'//电话
				if(obj.county!='') this.pickerText = obj.province + obj.city + obj.county//省市区县
			} else {
				this.dataList[0].imgSrc = firstObj.headimgurl//用户头像
				this.dataList[1].content = firstObj.nickname//用户昵称
				this.dataList[2].content = firstObj.coding//恒美ID
				this.current = firstObj.gender//性别1男，2女,0未知
			}
		},
		methods: {
			cancleEv(){
				uni.setStorageSync('bindPhone',false)
			},
			updataInfo(){//修改资料事件
				let params = {
					real_name:this.dataList[5].content,//姓名
					nickname:this.dataList[1].content,//昵称
					mobile:this.dataList[6].content,//手机号
					gender:this.current,//性别，0未知，1男，2女
					province:this.addressInfo[0],//省份
					city:this.addressInfo[1],//市
					county:this.addressInfo[2],//区县
					birthday:this.pickerTime[0]//生日（出生年月），日期格式：2021-08-10
				}
				this.$requst.post('user/edit-info',params).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('资料修改成功')
						setTimeout(()=>{
							if(this.whereCome==2){
								uni.navigateTo({
									url:'/pages/tabbar/my/my'
								})
							} else {
								uni.navigateBack({delta:1})
							}
						},1000)
					}
				},error=>{})
			},
			getDistrict(latitude, longitude) {//获取当前位置的省市区县
				let ya = this
			    wx.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
					header: {
						'Content-Type':'application/json'
					},
					success:function(res) {
						// console.log('地址数据：',res)
						ya.newProvice = res.data.result.address_component.province
						ya.newCity = res.data.result.address_component.city
						ya.newDistrict = res.data.result.address_component.district
						if(ya.pickerText=='') ya.pickerText = ya.newProvice + ya.newCity + ya.newDistrict
					}
			    })
			},
			openAddres2() {//地址弹框事件
				// 根据 label 获取
				var index = this.$refs.simpleAddress.queryIndex([this.newProvice, this.newCity, this.newDistrict], 'label');
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {//地址确认事件
				this.pickerText = e.labelArr[0]+e.labelArr[1]+e.labelArr[2];
				this.addressInfo = [e.labelArr[0],e.labelArr[1],e.labelArr[2]]
			},
			chooseHead(){//选择头像事件
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.dataList[0].imgSrc = res.tempFilePaths[0]
					}
				})
			},
			changePicker(e){//性别选择
				this.current = e.detail.value
			},
			changeTime(e){//出生日期选择
				this.pickerTime = [e.detail.value]
			},
			changeAddress(e){
				
			},
			inputFo(index){//输入框获取焦点
				if(this.dataList[index].content!=''){
					this.dataList[index].fcon = this.dataList[index].content//将当前输入框的实际值赋值给当前输入框的placeholder属性
					this.dataList[index].content = ''//清空当前输入框的实际值
				}
			},
			inputB(index){//输入框失去焦点
				if(index==1){
					if(this.dataList[1].content==''){
						this.dataList[1].content = this.uinfo.nickname
					}
				}
				if(index==5){
					if(this.dataList[5].content==''){
						this.dataList[5].content = this.uinfo.real_name
					}
				}
				if(index==6){
					if(this.dataList[6].content==''){
						this.dataList[6].content = this.uinfo.mobile
					}
				}
			}
			//打开picker
			// openPicker() {
			//     this.lotusAddressData.visible = true;
			//     this.lotusAddressData.provinceName = this.newProvice;
			//     this.lotusAddressData.cityName = this.newCity;
			//     this.lotusAddressData.townName = this.newDistrict;
			// },
			//回传已选的省市区的值
			// choseValue(res){
			//     //res数据源包括已选省市区与省市区code
			//     // console.log(res);
			//     this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			//     //res.isChose = 1省市区已选 res.isChose = 0;未选
			//     if(res.isChose){
			//         this.lotusAddressData.provinceName = res.province;//省
			//         this.lotusAddressData.cityName = res.city;//市
			//         this.lotusAddressData.townName = res.town;//区
			//         this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
			// 		this.regionObj = {
			// 			province:res.province,
			// 			provinceCode:res.provinceCode,
			// 			city:res.city,
			// 			cityCode:res.cityCode,
			// 			town:res.town,
			// 			townCode:res.townCode
			// 		}
			//     }
			// },
		}
	}
</script>

<style>
page{background-color: #FFFFFF;}
</style>