<template>
	<view class="realName">
		<view class="title">
			实名认证
		</view>
		<view class="contail">
			<view class="bar">
				<view class="beforename">
					姓名：
				</view>
				<input type="text" v-model="name" placeholder="请输入">
			</view>
			<view class="bar">
				<view class="beforename">
					身份证号：
				</view>
				<input type="text" v-model="number" maxlength="18" placeholder="请输入">
			</view>
			<view class="imgbar">
				<view class="mytitle">身份证照片  </view>
				<image class="image_s" @click="upload(1)" :src="imageZ || '/static/img_card_b.png'" mode=""></image>
				<view class="tip">
					点击相机拍摄头像面
				</view>
				<image class="image_b" @click="upload(1)" v-if="!imageZ" src="/static/icon_square_cream.png" mode=""></image>
			</view>
			<view class="imgbar">
				<image class="image_s"  @click="upload(2)" :src="imageF || '/static/img_card_a.png'" mode=""></image>
				<view class="tip">
					点击相机拍摄国徽面
				</view>
				<image class="image_b"  @click="upload(2)"  v-if="!imageF" src="/static/icon_square_cream.png" mode=""></image>
			</view>
		</view>
		<view class="btn">
			<view class="paybtn" >
				<input type="text" placeholder="请输入" v-model="name">
			</view>
			<view class="imgbar" @click="chooseImgs(1)">
				<view class="mytitle">身份证照片</view>
				<image class="image_s" :src="imageZ || '/static/img_card_b.png'" mode=""></image>
				<!-- <image class="image_s" src="/static/img_card_b.png" mode="" v-else></image> -->
				<view class="tip">
					点击相机拍摄头像面
				</view>
				<image class="image_b" v-if="!imageZ" src="/static/icon_square_cream.png" mode="" ></image>
			</view>
			<view class="imgbar" @click="chooseImgs(2)">
				<image class="image_s" :src="imageZ || '/static/img_card_a.png'" mode="" ></image>
				<view class="tip">
					点击相机拍摄国徽面
				</view>
				<image class="image_b" v-if="!imageZ"></image>
				<image class="image_b" src="/static/icon_square_cream.png" mode="" ></image>
			</view>
		</view>
		<view class="btn">
			<view class="paybtn" @click="realAuthentication">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	var that 
	import { realAuthentication } from '@/api/send.js'
	import { toa } from '@/utils/toast.js'
	import {
		uploadFile
	} from '@/utils/upload.js'
	export default {
		data() {
			return {
				key: '',
				name:'',
				number:'',
				imageZ:'',
				imageF:'',
				imgFrontShort:'',
				imgBackShort:''
			}
		},
		onLoad() {
			that = this
		},
		methods: {
				async realAuthentication(){
				  try {
					  let regCardnum = (
					  	/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					  )
				 if (!regCardnum.test(this.number))  return toa.toast('请输入正确的身份证号码')
				  if(!this.name) return toa.toast('请输入姓名')
				  if(!this.number) return toa.toast('请输入身份证')
				  if(!this.imgFrontShort) return toa.toast('请上传身份证正面')
				  if(!this.imgBackShort) return toa.toast('请上传身份证反面')
				   //身份证
				 
				    const res = await realAuthentication(this.name,this.number,this.imgFrontShort,this.imgBackShort)
					var pages = getCurrentPages();
					var page = pages[pages.length - 2];
					page.$vm.lastInfo.is_cert = 1
					page.$vm.show = false
					setTimeout(()=>{
						toa.success('实名认证成功')
					},200)
					uni.navigateBack({})
					
				    console.log('realAuthentication', res)
				    // 保存数据
				  } catch (err) {
				 	uni.showToast({ title:err,icon:'none' })
				    console.log('realAuthentication', err)
				  }
				},
				upload(type){
					 uni.chooseImage({
					 	count:1, //默认9
					 	sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有 , 'original','compressed'
					 	sourceType: ['album'], //从相册选择
					 	success: async function(res) {
					 		console.log(JSON.stringify(res.tempFilePaths));
					 		const tempFilePaths = res.tempFilePaths;
					 		for (let i = 0; i < tempFilePaths.length; i++) {
					 			const result = await uploadFile(tempFilePaths[i])
								if(type==1){
									// console.log(result);
									that.imageZ=result.fullurl
									that.imgFrontShort=result.url
								}else {
									that.imageF=result.fullurl
									that.imgBackShort=result.url
								}
					 		}
					 	}
					 }); 
			 }
		},
}
</script>

<style lang="scss">
	.realName {
		padding: 0 32rpx;
		box-sizing: border-box;

		.title {
			margin-top: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 52rpx;
			font-weight: 500;
			font-family: "PingFang SC";
		}

		.contail {
			margin-top: 32rpx;
			padding-bottom: 160rpx;

			.bar {
				border-bottom: 1px solid #f0f0f0;
				padding: 32rpx;
				display: flex;
				justify-content: space-between;

				input {
					text-align: right;
				}
			}

			.imgbar {
				text-align: center;
				position: relative;

				.mytitle {
					margin-top: 32rpx;
					text-align: left;
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 400;
					font-family: "PingFang SC";
				}

				.image_s {
					margin-top: 32rpx;
					width: 524rpx;
					height: 330rpx;
				}

				.image_b {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 128rpx;
					height: 128rpx;
				}

				.tip {
					margin-top: 25rpx;
					color: rgba(0, 0, 0, 0.4);
					font-size: 28rpx;
					font-weight: 400;
					font-family: "PingFang SC";
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 128rpx;
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			opacity: 1;
			background: rgba(255, 255, 255, 1);

			.paybtn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 28rpx;
				opacity: 1;
				color: rgba(0, 0, 0, 0.9);
				font-size: 32rpx;
				font-weight: 600;
				font-family: "PingFang SC";
				background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
			}
		}
	}
</style>