<script setup>
	/**
	 * 实名认证
	 */
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'

	// #ifdef APP
	const liveModule = uni.requireNativePlugin("Hisign-Face")
	// #endif

	// 
	const store = useStore()
	// 表单
	const form = reactive({
		// 真实姓名
		name: '',
		// 用户id
		userId: '',
		// 设备imei
		// userImei: '',
		// 用户身份证号
		idCard: '',
		// 验签
		signData: '',
	})
	// 人脸图片
	const faceImage = ref('')
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 格式化
	const format_idCard = computed(() => {
		let result = userinfo.value.userIdCard || ''
		if (result) result = result.slice(0, 1) + '*'.repeat(userinfo.value.userIdCard.length - 2) + result.slice(-
			1)
		return result
	})

	// 活体检测
	function startLive() {
		const data = {
			...form
		}

		// 验证
		if (!data.name) {
			util.alert('真实姓名不能为空')
			return
		}
		if (!data.idCard) {
			util.alert('用户身份证号不能为空')
			return
		}

		api.mine.isCertification({
			query: {
				userIdCard: data.idCard,
			}
		}).then(rs => {
			if (rs.code === 200) {
				// 调用异步方法
				liveModule.startLive({
						openSound: true,
						signKey: 'HISP1YFG44LQ29W0',
					},
					result => {
						console.log('startLive', result)
						if (result.errorCode == 0) {
							faceImage.value = result.liveImage
							// 实名认证
							handleSubmit()
							// 
						} else if (result.errorCode == 1 && result.errorMessage == '活体检测未通过') {
							util.alert({
								title: '系统提示',
								content: '检测失败请重试',
								showCancel: false
							})
						}
						// this.resultText = result.errorMessage;
					})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 实名认证
	function handleSubmit() {
		const data = {
			...form
		}

		// 验证
		if (!data.name) {
			util.alert('真实姓名不能为空')
			return
		}
		if (!data.idCard) {
			util.alert('用户身份证号不能为空')
			return
		}
		if (!faceImage.value) {
			util.alert('请先进行人脸识别')
			return
		}
		// 用户id
		data.userId = userinfo.value.userId
		data.signData = faceImage.value

		// // 信息
		// const info = uni.getSystemInfoSync()
		// // 
		// data.userImei = info.deviceId

		api.mine.certification({
			data,
		}).then(rs => {
			console.log('certification', rs)
			if (rs.code == 200) {
				util.getUserinfo()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<!-- 已实名展示实名信息 -->
	<view class="ver" v-if="userinfo.isRealName">
		<image class="authImg" src="/static/mineAuth.png" mode="aspectFill" />

		<view class="mt30 tac c666 f30">
			<view class="">{{userinfo.userRealName}}</view>
			<view class="mt50">{{format_idCard}}</view>
		</view>
	</view>

	<!-- 未实名展示表单 -->
	<view class="container" v-else>
		<view class="line df aic">
			<view class="key">真实姓名</view>
			<view class="value">
				<input class="input" type="text" v-model="form.name" placeholder="请输入姓名" />
			</view>
		</view>

		<view class="line df aic">
			<view class="key">身份证号</view>
			<view class="value">
				<input class="input" type="text" v-model="form.idCard" placeholder="请输入身份证号" />
			</view>
		</view>

		<view class="line df aic">
			<view class="key">人脸识别</view>
			<view class="value">
				<view class="recognize" @click="startLive">
					<text v-if="faceImage">重新识别</text>
					<text v-else>开始识别</text>
				</view>
			</view>
		</view>

		<view class="btn bar lg black mtb60 mlr60" @click="handleSubmit">提交</view>
	</view>
</template>

<style scoped lang="scss">
	// 认证图片
	.authImg {
		width: 346rpx;
		height: 346rpx;
		margin-top: 140rpx;
	}

	// 容器
	.container {
		padding: 50rpx 30rpx;
		color: #333333;
		font-size: 34rpx;

		// 
		.line+.line {
			border-top: 2rpx solid #ddd;
		}

		.line {
			padding: 35rpx 10rpx;
		}

		.key {
			width: 200rpx;
		}

		.value {
			flex: 1;
			font-size: 28rpx;
		}

		// 开始识别
		.recognize {
			padding: 10rpx 0;
			text-align: center;
			color: #0476FF;
			width: 314rpx;
			border-radius: 41rpx;
			border: 2rpx solid;
		}
	}
</style>