<template>
	<view class="navTab">
		<u-form v-if="wxUserInfo" :model="infornobj"  ref="infornobj" label-position='left' label-width='130'  border-bottom='false' >
			<u-form-item  label="头像：" prop="avatar"  border-bottom='false' required='true' >
				<u-upload ref="upload" width='100px' height='100px'
					:action="action"
					:header="headers"
					:auto-upload="true"
					:show-progress="false"
					 max-count="1"
					:deletable="true"
					:file-list="infornobj.avatar"
					@on-success="(data,index,lists) => {fielUploadSuc(data,index,lists) }"
					@on-remove="(index, lists, name)=>{deleteUpfile(index)}"
					@on-error="(data,index, lists)=>{errorUpfile(data,index, lists)}"
				>
					<view slot="addBtn" class="slot-btn" >
						<img v-if="infornobj.avatar" :src="infornobj.avatar"  mode="aspectFill" style="width: 100px;height: 100px;">
						<div  v-else class="upliacla">
						  <p style="font-size: 18px;">+</p>
						  <p>选择图片</p>
						<!-- <u-icon name="arrow-upward" color="#606266" size="38"></u-icon> -->
						</div>
					</view>
				</u-upload>
			</u-form-item>
			<u-form-item  label="昵称：" prop="nickName"  border-bottom='false' required='true'>
				<view class="sinput">
					<u-input style="width:100%;" :disabled='istest' v-model="infornobj.nickName"  placeholder='输入昵称'/>
				</view>
			</u-form-item>
			<u-form-item  label="性别：" prop="sex"  border-bottom='false' required='true'>
				<view class="sinput">
					<u-input style="width:100%;" v-model="infornobj.sex" type="select"  @click="sexshow = true"  placeholder='请选择' />
					<u-select v-model="sexshow" :list="sexList"  @confirm="sexchange"></u-select>
				</view>
			</u-form-item>
			<u-form-item  label="邮箱：" prop="email"  border-bottom='false' required='true'>
				<view class="sinput">
					<!-- <input type="text" style="width:100%;" v-model="infornobj.email"/> @input='xgemial'-->
					<u-input style="width:100%;" :disabled='istest' v-model="infornobj.email"   placeholder='输入邮箱'/>
				</view>
			</u-form-item>
			<u-form-item  label="手机号：" prop="phonenumber"  border-bottom='false' required='true'>
				<view class="sinput">
					<u-input style="width:100%;" disabled v-model="infornobj.phonenumber"  placeholder='输入手机号'/>
				</view>
			</u-form-item>
		</u-form>
		<view class="button-g"  @click="resource">保存</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexshow:false,
				wxUserInfo:null,
				isPopupShow:false,
				istest:false,
				infornobj:{avatar:'',nickName:'',phonenumber:'',email:'',sex:''},
				sexList:[{value:'0',label:'男'},{value:'1',label:'女'},],
				// action: 'https://www.keyitest.cn/prod-api/upload',
				action: this.http.baseUrl + '/upload',
				headers:{
				// 	'TENANT-ID': 3, 'accept': '*/*',
				// 	'Connection': 'keep-alive','Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryDX4wOxgD9mzUzAIF',
				// 	'Origin': 'https://www.keyitest.cn', 'Accept-Encoding': 'gzip, deflate, br',
				// 	'Accept-Language': 'zh,zh-CN;q=0.9', 'Host': 'https://www.keyitest.cn',
				// 	'Referer':'https://www.keyitest.cn',
					Authorization:'Bearer '+uni.getStorageSync('accessToken'),
					
				},
				Rules: {
					nickName: [{ required: true, message: '请输入姓名', trigger: 'change',}],
					email: [{ required: true, message: '请输入邮箱', trigger: 'change',},
					{
					  pattern:
					     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
					  message: "邮箱格式不对",
					  trigger: "blur",
					},],
					// 
					sex: [{ required: true, message: '请选择性别', trigger: 'change',}],
				},
			}
		},
		onReady(){
			this.$refs.infornobj.setRules(this.Rules);
		},
		onShow() {
			
		},
		mounted() {
			this.infornobj.avatar=this.wxUserInfo.avatar
		},
		onLoad() {
			 this.wxUserInfo=uni.getStorageSync('wxUserInfo');
			 let avatar=uni.getStorageSync('avatar');
			 let email=uni.getStorageSync('email');
			 let nickName=uni.getStorageSync('nickName');
			 let sex=uni.getStorageSync('sex');
			 console.log('wxUserInfo',this.wxUserInfo,)
			 let {phonenumber}=this.wxUserInfo;
			 let setavatar='',sexdata='';
			 if(avatar){
				// if(avatar.indexOf('http')==0){
				// 	setavatar = avatar
				// }else{
				// 	setavatar=this.http.baseUrl+avatar
				// } 
					setavatar = this.http.baseUrl + avatar
			 }else{
				 setavatar=''
			 }
			 if(sex){
				sexdata=this.sexList.filter(item=>item.value==sex)[0].label;
			 }
			 console.log('sex--',this.infornobj.sex)
			 console.log('头像',setavatar,this.wxUserInfo)
			 this.$nextTick(()=>{
				 let setphone=phonenumber.slice(0,3)+'****'+phonenumber.slice(7,11)
				 this.infornobj={nickName,sex:sexdata,phonenumber:setphone,avatar:setavatar,email:email?email:''}
				console.log('avatar',this.wxUserInfo,this.infornobj)
			 })
		},
		methods: {
			sexchange(e){
				this.infornobj.sex=e[0].label
			},
			//文件上传成功回调
			fielUploadSuc(data,index,lists) {
				console.log('-',data,'*',index,lists)
				if (data.code === 200) {
					this.infornobj.avatar=data.filePath
					// console.log('头像',this.infornobj.avatar)
				}
			},
			//移除
			deleteUpfile(index,lists){
				console.log('del头像',this.infornobj.avatar)
				this.infornobj.avatar=''
				// if(this.credentialImgList.length>0){				
				// 	let id=this.credentialImgList[0].id;
				// 	this.http.quickDelete(`/equestrianinfo/file/${id}`).then(()=>{})
				// }
			},
			errorUpfile(data,index){
				// console.log('上传失败-',data,'*',index)
				// this.$refs.uToast.show({
				// 	title: '上传失败，请您重新上传',
				// 	type: 'error',
				// })
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.isPopupShow = false
			},
			editinform(){
				this.isPopupShow = true
			},
			xgemial(e){
				console.log('xgemial===',e,'===xgemial',this.infornobj.avatar);
				this.infornobj.avatar=this.infornobj.avatar.slice(0,1)
			},
			resource(){
				console.log('this.infornobj---',this.infornobj)
				this.$refs.infornobj.validate(valid => {
					if (valid) { 
						if(!this.infornobj.avatar){
							this.$refs.uToast.show({
								title: '请上传头像',
								type: 'warning',
							})
							return;
						}
						let avatar='',avtimg=this.infornobj.avatar;
						if(avtimg&&avtimg.indexOf('h')==0){
							avatar=avtimg
						}else{
							avatar=this.http.baseUrl+avtimg
						}
						let sexindex=this.sexList.filter(item=>item.label==this.infornobj.sex)[0].value;
						
						let data={
							userId:this.wxUserInfo.userId,
							nickName:this.infornobj.nickName,
							email:this.infornobj.email,
							sex:sexindex,
							avatar,
						}
						console.log('data---',data)
						// return;
						this.http.quickPut(`/system/user/profile`,data,true).then(res=>{
							if(res.data.code==200){
								uni.setStorageSync('avatar', data.avatar)
								uni.setStorageSync('email', data.email)
								uni.setStorageSync('nickName', data.nickName)
								uni.setStorageSync('sex', data.sex)
								this.$refs.uToast.show({
									title: '信息修改成功',
									type: 'success',
									isTab:true,
									url:'pages/personal/personal'
								})
							} else {
								this.$refs.uToast.show({
									title: res.data.msg,
									type: 'eroor',
								})
							}
							// console.log('res---',res)
						})
					}else{
						console.log('验证失败',this.infornobj)
					}
				})
			}
		}
	}
</script>

<style>
	.navTab{
		background-color: #ffffff;
		/* height: 96vh; */
		width: 96vw;
		margin: 2vh auto;
		padding: 10px 15px 30px 25px;
		border-radius: 5px;
	}
	.sinput{
		display: flex;
		align-items: center;
		/* height: 50px; */
	}
	.u-form-left__content__label{
		color:#808080!important;
	}
	.sinput .u-input{
		height:35px;
		border-bottom: 1px solid #EBEBEB!important;
	}
	.slot-btn{
		width:200rpx;
		height:0rpx;
		zIndex:99;
		/* display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx; */
	}
		
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
	.infoencls{
		display: flex;
		justify-content: space-between;
		font-size: 15px;	
		border-bottom: 1px solid #EBEBEB;
		height:43px;
		align-items: center;
	}
	.peodi{
		margin:-5px auto 15px;
		width: 260px;
		text-align: center;
		color: #1A1A1A;
		font-size:36rpx;
		font-weight: bold;
	}
	.button-g{
		/* width:90vw; */
		background:#1578ED;
		border: 1px solid  #1578ED;
		color: #FFFFFF;
		height: 80rpx;
		border-radius:15rpx;
		text-align: center;
		line-height:80rpx;
		font-size: 35rpx;
		margin-top: 30px;
		/* position: fixed; */
		/* bottom:25px; */
	}
	.picput{
		margin:50px auto;
		width:65vw;
		text-align: center;
	}
	.u-list-item{
		margin: 0 !important;
		background: transparent!important;
		color:transparent!important;
	}
	
	.upliacla{
		width: 100px;
		height: 100px;
		/* line-height:100px; */
		border-radius: 4px;
		background: #f4f5f6;
		color:#606266;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
</style>
