<template>
	<view class="container">
		<u-loading-page :loading="loading"></u-loading-page>
		
		
		<view class="forms" v-if="!loading">
						 	<u--form :rules="rules"
								labelPosition="left"
								:model="pInfo" labelWidth="120"
								ref="uForm">
							<u-form-item
									label="微信头像"
									prop="avatar"
									borderBottom
									ref="item1">
								<view style="text-align: left;display: inline-block;display: grid;grid-template-columns: 50px calc(100% - 50px);">
									<button v-if="!userInfo.avatar" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
									<image class="avatarInfo" v-else  mode="widthFix" :src="userInfo.avatar"></image>
								</view>
							</u-form-item>
								
							<u-form-item
									label="个人姓名"
									prop="name"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.name"
										placeholder="个人姓名"
										border="none"
								></u--input>
							</u-form-item>
							
							<u-form-item
									label="公民身份号码"
									prop="sfzh"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.sfzh"
										placeholder="请输入公民身份号码"
										border="none"
								></u--input>
							</u-form-item>
							
						
							
							<u-form-item
									label="联系电话"
									prop="phone"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.phone"
										placeholder="请输入联系电话"
										border="none"
								></u--input>
							</u-form-item>
							
							
						
							
							<u-form-item
									label="现居住地"
									prop="deptId"
									borderBottom
									ref="item1">
								<uni-data-picker  placeholder="请选择现居住地" popup-title="请选择现居住地所属区域" :localdata="dataTreepcs" v-model="pInfo.deptId"
									@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
								</uni-data-picker>
							</u-form-item>
							
							
							<u-form-item
									label="详细地址"
									prop="dz"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.dz"
										placeholder="请输入详细地址"
										border="none"
								></u--input>
							</u-form-item>
						</u--form>
						
						<view @click="dengji" class="djbutton">保存信息</view>
		</view>
	</view>
</template>

<script>
	import { updateinfos } from "@/api/user.js"
	import { putfiles,getQx} from "@/api/my.js"
	import { baseurl } from "../../common/setting"
	export default {
		  data(){
			  return{
				  loading:true,
				  avatarUrl:'',
				  dataTree:[],
				  dataTreepcs:[],
				  show: true,
				  fileList1: [],
				  avatarInfo:'',
				  deaultIcon:"",
				  pInfo:{name:''},
				  rules:{
				  	'name': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写姓名',
				  		trigger: ['blur', 'change']
				  	},
				  	'sfzh': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写公民身份证号码',
				  		trigger: ['blur', 'change']
				  	},
				  	'phone': [
						{
							required: true,
							message: '请填写手机号码',
							trigger: ['blur', 'change']
						},
					],
					'deptId': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写所属区县',
				  		trigger: ['blur', 'change']
				  	},
					'dz': {
						type: 'string',
						required: true,
						message: '请填写信息详细地址',
						trigger: ['blur', 'change']
					}
				  }
			  }
		  },
		  onLoad() {
			this.pInfo = {
				name:this.userInfo.detail.name,
				sfzh:this.userInfo.detail.sfzh,
				phone:this.userInfo.detail.phone,
				deptId:this.userInfo.dept_id,
				dz:this.userInfo.detail.dz
			}
		  	getQx(null).then(res=>{
				this.dataTreepcs = res.data
				this.loading = false
			})
		  },
	
		  methods:{
			  onChooseAvatar(e) {
			  	const { avatarUrl } = e.detail 
			  	this.avatarInfo=avatarUrl 
				//对临时图片链接进行base64编码
				//var avatarUrl_base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(this.avatarInfo, 'base64')
				 uni.compressImage({
					src: avatarUrl,
					quality: 80,
					success: res => {
					  this.uploadFile(res.tempFilePath);
					}
				  })
			  },
			  
			  /* 上传头像 */
			 uploadFile(fileUrl){
			    uni.uploadFile({
			      url:  baseurl+'/blade-resource/oss/endpoint/put-file' ,
			      filePath: fileUrl,
			      name: 'file',
			      success: (res) => {
					  let datalink = JSON.parse(res.data)
					  if(datalink.code == 200) {
					  this.$set(this.pInfo,'avatar',datalink.data.link)
					  this.$u.vuex('userInfo.avatar', datalink.data.link)
					this.$u.func.showToast({title:'头像上传成功'})
					   
					  }
			      },
			      fail: e => {
			        uni.showToast({
			          title: '上传失败',
			          duration: 2000,
			          icon: "fail"
			        });
			      }
			    });
			  },
			  
				
			  dengji(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				if (!this.pInfo.phone) {      //判断如果手机号（this.tele）为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				        return
				}
				
				if (!reg.test(this.pInfo.phone)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				let reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
				
				if (!this.pInfo.sfzh) {      //判断如果身份证号（this.card)num）为空，提示用户输入身份证号
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return
				}
				
				if (!reg1.test(this.pInfo.sfzh)) {      //判断身份证号格式时候正确
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
				        })
				return
				}
				  
			  	this.$refs.uForm.validate().then(res => {
			  		uni.showLoading({
			  			title: '加载中'
			  		});
			  		this.$u.api.updateinfos(this.pInfo).then(res=>{
			  			uni.showToast({
			  				title:'保存成功',
							icon:'success'
			  			})
						uni.hideLoading()
			  		   this.$u.func.updateInfos(this.pInfo, this.redirect)
			  		}).finally(()=>{
			  			uni.hideLoading()
			  		})
			  	}).catch(errors => {
			  		
			  	})
			  
			  },
			  onnodeclick(e){
				  console.log(e);
				
			  },
			  onpopupopened(e) {
			  	console.log('popupopened');
			  },
			  onpopupclosed(e) {
			  	console.log('popupclosed');
			  },
			  onchange(e) {
				  this.pInfo.sqmc = e.text
			  	console.log('onchange:', e);
			  },
		  }
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper{
		background: url('data:image/png;base64, ') no-repeat center;
		border: 0px !important;
		outline: none;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-size: 100%;
		position: relative;
		top: -3px;
		&:after {
				display: none;
			}
	}
	/deep/ .input-value{
		padding-left: 0 !important;
	}
	.container{
		height: 100vh;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		background: #F8F8F8;
		
		.avatarInfo{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.forms{
			width: 100%;
			margin: auto;
			background: #FFF;
			border-radius: 15px;
			padding:24rpx;
			box-sizing: border-box;
			height: calc(100vh - 72rpx);
		}
		.djbutton{
			height: 88rpx;
			background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
			border-radius: 44rpx;
			opacity: 0.5;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin-top: 48rpx;
		}
		/deep/ .input-value-border{
		 border: 0 !important;
	}
</style>