<template>
	<view style="">
		<view class="navTab">
			<view class="sintitle">
				<img src="/static/index/grxx.png" alt="">
				<p>认证信息</p>
			</view>
			<u-form :model="certobj"  ref="certobj" label-position='left' label-width='150'  border-bottom='false' >
				<u-form-item  label="姓名：" prop="name"  border-bottom='false' required='true'>
					<view class="sinput">
						<u-input style="width:100%;" :disabled='istest' v-model="certobj.name"  placeholder='输入姓名'/>
					</view>
				</u-form-item>
				<u-form-item  label="身份证号：" prop="idNumber"  border-bottom='false' required='true'>
					<view class="sinput">
						<u-input style="width:100%;" :disabled='istest' v-model="certobj.idNumber" placeholder='输入身份证号' />
					</view>
				</u-form-item>
				<u-form-item  label="所在城市：" prop="city"  border-bottom='false' required='true'>
					<view v-if="!istest" class="sinput">
						<u-input style="width:100%;"  :disabled='istest' v-model="certobj.city" placeholder='输入所在城市' /> 
					</view>
					<view v-else class="sinput">
						<u-input style="width:100%;"  v-model="certobj.city" type="select"  @click="cityshow = true" placeholder='输入所在城市' />
						<u-select v-model="cityshow"  :list="cityList"  @confirm="citychange" mode="mutil-column-auto" ></u-select>
					</view>
					
						<!-- -->
				</u-form-item>
				
				<u-form-item  label="个人技能：" prop="testSkills"  border-bottom='false' required='true'>
					<view class="sinput">
						<u-input style="width:100%;" :disabled='istest' v-model="certobj.testSkills" placeholder='输入个人技能'/>
					</view>
				</u-form-item>
				<view class="sintitle" style="margin-top:15px;margin-left: -20px;">
					<img src="/static/index/jnzs.png" alt="">
					<p style="color:#fa3534;margin-right:3px">* </p>
					<p>技能证书</p>
				</view>
				<u-form-item  prop="certificateUrl"  border-bottom='false' >
					<u-upload width='100px' height='100px'
						:action="action"
						:disabled='istest'
						:header="headers"
						:auto-upload="true"
						:show-progress="false"
						 max-count="1"
						 :deletable="true"
						:file-list="certobj.certificateUrl"
						@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="certobj.certificateUrl" :src="certobj.certificateUrl"  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>
					<div v-if="certobj.certificateUrl&&istest">
						
						<img v-if="certobj.certificateUrl.length>35" :src="certobj.certificateUrl" style="width: 100px;height: 100px;">
						<p class="wuploa" v-else>未上传证书</p>
					</div>
				</u-form-item>
				<view class="sintitle" style="margin-top:15px;margin-left: -20px;">
					<img src="/static/index/gzjl.png" alt="">
					<p>工作经历
						<span style="font-size: 13px;color:#B3B3B3;margin-left: 5px;"> (非必填）</span>
					</p>
				</view>
				<u-form-item   prop="workExperience"  border-bottom='false' >
					<!-- <p style="margin-right:10px;">工作经历：</p> -->
					<view class="sinputrt">
						<u-input  style="width:100%;" :disabled='istest' v-model="certobj.workExperience"  placeholder='输入内容...' type="textarea"   auto-height="true"/>
					</view>
				</u-form-item>
			</u-form>
			<view v-if="testerStatus==3" >
				
				<span >注：</span>
				<span style="color:#fa3534">{{testerdata.auditOpinion?testerdata.auditOpinion:'无'}}，</span>
				<span>审核未能通过，请完善后再提交</span>
			</view>
		</view>
		<view class="bottbtn" v-if="testerStatus==0"  @click="resource">确定</view>
		<view class="bottbtn" v-if="testerStatus==1" style="background: linear-gradient(90deg, #e8a034,#ff9900)">审核中</view>
		<view class="bottbtn" v-if="testerStatus==2" style="background: #909399">已认证</view>
		<view class="bottbtn" v-if="testerStatus==3"  @click="resource">修改</view>
		<view style="height:10px"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityshow:false,
				certobj:{applyId:'',name:'',idNumber:'',city:'',certificateUrl:'',testSkills:'',workExperience:''},
				wxUserInfo:null,
				action: 'https://www.keyitest.cn/prod-api/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'),
					
				},
				testerStatus:'',
				istest:false,
				testerdata:null,
				
				certRules: {
					name: [{required: true, message: '请输入姓名', trigger: 'change',},
					{max: 4, message: '最多输入4个中文', trigger: 'change' },
					{
					  pattern:
					     /^(?:[\u4e00-\u9fa5·]{2,16})$/,
					  message: "请输入中文",
					  trigger: "blur",
					},],
					idNumber: [{ required: true, message: '请输入身份证号', trigger: 'change'},
					  {
					    pattern:
					      /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
					    message: "请输入正确的身份证号码",
					    trigger: "blur",
					  },
					  {max:18, message: '身份证长度为18', trigger: 'change' },
					  {min:18, message: '身份证长度为18', trigger: 'change' },
					],
					city: [{ required: true, message: '请输入所在城市', trigger: 'change',}],
					testSkills: [{ required: true, message: '请输入个人技能', trigger: 'change',}],
				},
				cityList:[],	
			}
		},
		onShow() {
			
			this.http.quickGet(`/common/city`,).then(res=>{
				// console.log('城市数组---',res)
				this.cityList=res.data
			})
		},
		onReady(){
			this.$refs.certobj.setRules(this.certRules);
		},
		onLoad() {
			// /tester/cert/apply/{userId}
			this.wxUserInfo = uni.getStorageSync('wxUserInfo');
			let userId=this.wxUserInfo.userId
			this.http.quickGet(`/tester/cert/apply/${userId}`,true).then(res=>{
				console.log('实名认证信息---',res)
				this.testerdata=res.data.data;
				if(this.testerdata){
					let {applyId,name,idNumber,city,certificateUrl,testSkills,workExperience}=this.testerdata;
					// let setavater=[]
					// setavater[0]={url:certificateUrl}
					
					this.certobj={applyId,name,idNumber,city,certificateUrl,testSkills,workExperience}
				}
				console.log('this.certobj---',this.certobj)
				if(this.testerdata){
					if(this.testerdata.status==0){
						this.testerStatus=1
						this.istest=true
						this.cityshow=false
					}else if(this.testerdata.status==1){
						this.testerStatus=2
						this.istest=true
						this.cityshow=false
					}else if(this.testerdata.status==2){
						this.testerStatus=3
					}else{
						this.testerStatus=0
					}
				}
				
			})
			// this.testerStatus=uni.getStorageSync('testerStatus');
			// if(this.testerStatus==0){
			// }else if(this.testerStatus==1){
			// 	this.istest=true
			// }else if(this.testerStatus==2){
			// 	this.istest=true
			// }else if(this.testerStatus==3){
			// }
		},
		computed: {
		    // headers() {
		    //   return { Authorization: "Bearer " + this.token };
		    // },
		  },
		methods: {
			citychange(e){
				console.log('城市回显',e,this.cityshow)
				this.certobj.city=e[0].label+'-'+e[1].label
			},
			idnchange(e){
				console.log('身份证号',e,)
				if(!this.certobj.name){
					uni.showToast({ title:'请输入姓名', icon: 'none', duration: 2000 });
					return;
				}
				
			},
			//文件上传成功回调
			fielUploadSuc(data,index) {
				console.log('-',data,'*',index)
				
				if (data.code === 200) {
					this.certobj.certificateUrl=data.filePath
					console.log('技能认证',this.certobj.certificateUrl)
				}
			},
			//移除
			deleteUpfile(index,lists){
				console.log('del技能认证',this.certobj.certificateUrl)
				this.certobj.certificateUrl=''
				// 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',
				// })
			},
			resource(){
				console.log('certobj',this.certobj)
				this.$refs.certobj.validate(valid => {
					if (valid) { 
						// if(!this.certobj.certificateUrl){
						// 	this.$refs.uToast.show({
						// 		title: '请上传技能证书',
						// 		type: 'warning',
						// 	})
						// 	return;
						// }
						let certificateUrl='';
						if(this.certobj.certificateUrl.indexOf('https')==0){
							certificateUrl=this.certobj.certificateUrl
						}else{
							certificateUrl='https://www.keyitest.cn/prod-api'+this.certobj.certificateUrl
						}
						let iddata={
							userId:this.wxUserInfo.userId,
							name:this.certobj.name,
							idNumber:this.certobj.idNumber,
						}
						this.http.quickPost(`/tester/cert/apply`,iddata,true).then(res=>{
							console.log('姓名与身份证验证成功',res)
							// if (res.code == 200) {
							// 	console.log('姓名与身份证验证成功',res)
							// }else{
							// 	uni.showToast({ title:'实名认证失败', icon: 'none', duration: 2000 });
							// }
						})
						let data={
							applyId:this.certobj.applyId,
							userId:this.wxUserInfo.userId,
							name:this.certobj.name,
							idNumber:this.certobj.idNumber,
							city:this.certobj.city,
							certificateUrl,
							testSkills:this.certobj.testSkills,
							workExperience:this.certobj.workExperience,
						}
						
						console.log('认证信息',data)
						// return;
						if(this.testerStatus==0){
							// return;/tester/cert/update
							this.http.quickPost(`/tester/cert/apply`,data,true).then(res=>{
								if(res.data.code==200){
									this.$refs.uToast.show({
										title: '认证成功',
										type: 'success',
										isTab:true,
										url:'pages/personal/personal'
									})
									uni.setStorageSync('testerStatus', 1)
								}
							})
						}else{
							this.http.quickPost(`/tester/cert/update`,data,true).then(res=>{
								if(res.data.code==200){
									this.$refs.uToast.show({
										title: '认证修改成功',
										type: 'success',
										isTab:true,
										url:'pages/personal/personal'
									})
									uni.setStorageSync('testerStatus', 1)
								}
							})
						}
					}else{
						console.log('验证失败',this.certobj)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF!important;
	}
	.navTab{
		padding:13px 20px 13px 20px;
		
	}
	.sinput{
		display: flex;
		align-items: center;
		/* height: 50px; */
	}
	.u-form-left__content__label{
		color:#808080!important;
	}
	.sintitle{
		display: flex;
		align-items: center;
		/* height: 50px; */
		background: #F2F4F7;
		/* background:#20529c; */
		border-radius: 4rpx;
		padding:7px 15px; 
	}
	.sintitle img{
		width:20px;
		height:18px;
		margin-right:5px;
	}
	.sintitle p{
		font-size: 15px;
		color:#000000;
		font-weight: bold;
	}
	.sinput .u-input{
		
		height:35px;
		border-bottom: 1px solid #EBEBEB!important;
		
		
	}
	.sinput p{
		color: #808080;
	}
	.bottbtn{
		width:94vw;
		margin:30px 3vw 15px 3vw;
		height:75rpx;	
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius:43rpx;
		text-align: center;
		line-height:75rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		/* margin-left:13px; */
	}
	.sinputrt{
		display: flex;
		/* align-items: center; */
		/* height: 50px; */
		padding: 10px 0px;
	}
	.sinputrt .u-input{
		/* width:75vw; */
		height:100px;
		border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding-left: 10px!important;
	}
	.u-list-item{
		margin:0!important;
		zIndex:0!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);
		}
		.u-form-item{
			margin-bottom:-5px;
			color: #808080!important;
		}
		.u-form{
			margin-left: 20px;
		}
		.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;
			
		}
		.wuploa{
			/* width: 100px;
			height: 100px;
			line-height: 100px;
			font-size: 12px;
			border: 1px solid #E6E6E6;
			text-align: center;
			border-radius: 4px; */
		}
</style>
