<template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#262B37'
			title-size='36' height='36' id="navbar" :custom-back="btnfh">
		</u-navbar>
	  <image src="https://api.ccttiot.com/smartmeter/img/static/uum6lsXMCEt4MU0WMW01" class="bj" mode=""></image>
      <view class="sfxx" v-if="isReal == false">
      	<view class="tit">
      		请输入您的有效身份信息
      	</view>
		<view class="name">
			证件类型
			<view class="type-select">
				<view class="type-btn" :class="{active: docType === 'idcard'}" @click="docType='idcard'">身份证</view>
				<view class="type-btn" :class="{active: docType === 'passport'}" @click="docType='passport'">护照</view>
			</view>
		</view>
		<view class="name" v-if="docType === 'idcard'">
			姓名 <input type="text" v-model="name" placeholder="请填写姓名" />
		</view>
		<view class="name" v-if="docType === 'idcard'">
			证件号 <input type="text" v-model="zfzh" placeholder="请填写身份证号" />
		</view>
		<view class="upload" v-if="docType === 'passport'">
			<view class="upload-label">护照照片</view>
			<view class="upload-box" @click="choosePassportImage" v-if="!passportImage">
				<text class="upload-plus">＋</text>
				<text class="upload-tip">点击上传护照页照片</text>
			</view>
			<view class="upload-preview" v-else>
				<image :src="passportImage" mode="aspectFill" @click="choosePassportImage" class="upload-img"></image>
				<!-- <view class="upload-remove" @click.stop="removePassportImage">删除</view> -->
			</view>
		</view>
		<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #ccc;">
			您当前还未完成实名认证
		</view>
      </view>
	  <view class="sfxx" v-else>
	  	<view class="tit">
	  		请输入您的有效身份信息
	  	</view>
	  		<view class="name">
	  			姓名 <input type="text" v-model="name" :disabled="true" placeholder="请填写姓名" />
	  		</view>
	  		<view class="name">
	  			身份证号 <input type="text" v-model="zfzh" :disabled="true" placeholder="请填写身份证号" />
	  		</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #ccc;">
				您当前已完成实名认证
			</view>
	  </view>
	   <view class="anniu" @click="btnshiming" v-if="isReal == false">
	   	   <!-- <text>进入人脸识别</text> -->
		    <text>提交</text>
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				name:'',
				zfzh:'',
				isReal:false,
				backData: null,
				smflag:true,
				docType: 'idcard', // 新增：证件类型
				passportImage: '' ,// 新增：护照照片路径
				token:''
			}
		},
		onLoad(option) {
            if(option.user){
				console.log(option);
				
			}
			this.getQiniuToken()
		},
		onShow() {
			this.getareaList()
			 // if (this.backData == true) {
			 //    console.log('接收数据:', this.backData);
			 //    this.getshuaxin();
			 //    this.backData = null; // 重置
			 //  }
		},
		methods: {
			// 获取上传七牛云token
			getQiniuToken() {
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},
			// 上传头像
			choosePassportImage() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 1,
					type: 'all',
					success(res) {
						const tempFilePaths = res.tempFiles
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								console.log(res, 'resres');
								let str = JSON.parse(res.data)
								console.log(str.key)
								_this.passportImage = 'https://api.ccttiot.com/' + str.key
								console.log(_this.passportImage);
							}
						})
					}
				})
			},
			getareaList() {
				this.$u.get("/getInfo").then(res =>{
					if(res.code == 200){
						res.user.authTypes.filter(item =>{
							if(item == 1){
								this.isReal = true
							}
						})
						this.name = res.user.realName
						this.zfzh = res.user.realIdCard
					}
				})
			},
			// 刷新人脸识别是否成功
			getshuaxin(){
				this.$u.get('/app/realName/refreshRealName').then(res => {
					if(res.code == 200){
						if(res.data.pass == true){
							let realNameType = res.data.realNameType
							let infoId = res.data.infoId
							uni.showModal({
								title: '温馨提示',
								content: `人脸认证成功`,
								showCancel: false,
								success: function(res) {
									uni.navigateBack()
								}
							})
						}else{
							uni.showModal({
								title: '温馨提示',
								content: `人脸认证失败`,
								showCancel: false,
								success: function(res) {
									uni.navigateBack()
								}
							})
						}
					}else{
						uni.showModal({
							title: '温馨提示',
							content: `人脸认证失败`,
							showCancel: false,
							success: function(res) {
								uni.navigateBack()
							}
						})
					}
				})
			},
			// 自定义返回
			btnfh(){
				uni.navigateBack()
			},
			// 点击进行实名认证
			btnshiming(){
				// 护照分支：仅校验并提示
				if(this.docType === 'passport'){
					if(!this.passportImage){
						uni.showToast({ title:'请先上传护照照片', icon:'none' })
						return
					}
					let data = {
						url:this.passportImage
					}
					this.$u.put(`/app/realName/passportRealName`,data).then(res =>{
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								this.smflag = true
								uni.navigateBack()
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							this.smflag = true
						}
					})
					return
				}
				if(this.smflag == true){
					this.smflag = false
					let data = {
						userName:this.name,
						idCard:this.zfzh,
					}
					this.$u.put(`/app/realName/twoElementRealName`,data).then(res =>{ //二要素
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								this.smflag = true
								uni.navigateBack()
							},1500)
						}else if(res.code == 500 && res.msg == null){
							uni.showToast({
								title: '已提交，请等待系统反馈',
								icon: 'none',
								duration: 2000
							})
							this.smflag = true
						} else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							this.smflag = true
						}
					})
				}
				
				// this.$u.put(`/app/realName/realName`,data).then(res =>{ //人脸
				// 	if(res.code == 200){
				// 		let https = encodeURIComponent(res.data.jumpUrl)
				// 		this.backData = true
				// 		uni.navigateTo({
				// 			url:'/page_fenbao/renlian?https=' + https
				// 		})
				// 	}else{
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	}
				// })
			},
			
		}
	}
</script>

<style lang="scss">
	.anniu{
		width: 750rpx;
		height: 174rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		line-height: 174rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		text{
			display: inline-block;
			width: 682rpx;
			height: 84rpx;
			background: #4297F3;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			text-align: center;
			line-height: 84rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
	.sfxx{
		width: 676rpx;
		max-height: 980rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 310rpx;
		border-radius: 30rpx;
		.name{
			width: 624rpx;
			height: 92rpx;
			margin: auto;
			background: #EFEFEF;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			margin-top: 46rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #3D3D3D;
			padding-left: 40rpx;
			box-sizing: border-box;
			justify-content: space-between;
			input{
				width: 430rpx;
				padding-right: 20rpx;
				box-sizing: border-box;
			}
			.type-select{ display: flex; align-items: center; padding-right: 20rpx; }
			.type-btn{
				min-width: 160rpx;
				height: 64rpx;
				padding: 0 24rpx;
				border-radius: 32rpx;
				background: #FFFFFF;
				color: #3D3D3D;
				font-size: 28rpx;
				line-height: 64rpx;
				text-align: center;
				border: 2rpx solid #CCCCCC;
			}
			.type-btn + .type-btn{ margin-left: 20rpx; }
			.type-btn.active{ background: #4297F3; color: #FFFFFF; border-color: #4297F3; }
		}
		.tit{
			width: 676rpx;
			height: 118rpx;
			background: #EFEFEF;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 118rpx;
			padding-left: 38rpx;
			box-sizing: border-box;
			border-radius: 30rpx 30rpx 0 0;
		}
		.upload{
			width: 624rpx;
			margin: 20rpx auto 0 auto;
			.upload-label{ font-size: 28rpx; color: #3D3D3D; margin-bottom: 16rpx; }
			.upload-box{
				width: 100%;
				height: 220rpx;
				background: #F7F7F7;
				border: 2rpx dashed #CCCCCC;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.upload-plus{ font-size: 60rpx; color: #999; line-height: 1; }
				.upload-tip{ margin-top: 8rpx; font-size: 24rpx; color: #999; }
			}
			.upload-preview{
				position: relative;
				width: 100%;
				height: 420rpx;
				.upload-img{ width: 100%; height: 100%; border-radius: 16rpx; }
				.upload-remove{
					position: absolute;
					right: 12rpx;
					top: 12rpx;
					background: rgba(0,0,0,0.5);
					color: #fff;
					padding: 8rpx 16rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.bj{
		width: 750rpx;
		height: 696rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

</style>