<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./individual.js"
import "./individual.css"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TMessage from "@/components/ui/TMessage.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import TBreadcrumb from "@/components/ui/TBreadcrumb.vue";
import TDivider from "@/components/ui/TDivider.vue";
import PrimaryButton from "@/components/common/PrimaryButton.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import {ref} from "vue";

const facePrimaryButtonRef = ref()
const ctx = ctxRef(new Context(), {
	refs: {
		facePrimaryButtonRef
	}
})

</script>

<template>
	<div>
		<TBreadcrumb class="!pt-0" :items="[{label: '实名认证', url: '/settings/identity'}, {label: '个人实名认证'}]"></TBreadcrumb>
		<TDivider class="!mt-0"></TDivider>
	</div>

	<PostForm action=".uploadIndividual" timeout="600" @before="ctx.beforeSubmit" @done="ctx.doneSubmit" @success="ctx.success">
		<input type="hidden" name="identityId" :value="ctx.identity.id" v-if="ctx.identity != null"/>

		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">真实姓名 *</td>
				<td>
					<div v-if="ctx.canEdit">
						<TInputText name="realName" placeholder="真实姓名" maxlength="100" style="width: 10em" autofocus v-model="ctx.realName"/>
					</div>
					<div v-else>
						{{ ctx.identity.realName }}
					</div>
				</td>
			</tr>
			<tr>
				<td>身份证号 *</td>
				<td>
					<div v-if="ctx.canEdit">
						<TInputText name="number" placeholder="身份证号" maxlength="18" style="width: 13em" v-model="ctx.number"/>
					</div>
					<div v-else>
						{{ ctx.identity.number }}
					</div>
				</td>
			</tr>
			<tr v-show="!ctx.isFaceVerification">
				<td>身份证 - 照片面 *<em>不超过8MiB</em></td>
				<td>
					<input type="file" name="backFile" id="back-file" accept="image/jpeg, image/png" @change="ctx.changeBackFile"/>
					<div class="idcard-bg">
						<img :src="'/files/file?fileId=' + ctx.identity.backFileId" v-if="ctx.identity != null && ctx.identity.backFileId > 0 && ctx.backPreviewURL.length == 0" alt=""/>
						<img :src="ctx.backPreviewURL" alt="" v-if="ctx.backPreviewURL.length > 0"/>
						<TButton type="button" secondary="" v-if="ctx.canEdit" @click.prevent="ctx.selectFile('back-file')">
							<i class="icon plus"></i></TButton>
					</div>
				</td>
			</tr>
			<tr v-show="!ctx.isFaceVerification">
				<td>身份证 - 国徽面 *<em>不超过8MiB</em></td>
				<td>
					<input type="file" name="frontFile" id="front-file" accept="image/jpeg, image/png" @change="ctx.changeFrontFile"/>
					<div class="idcard-bg">
						<img :src="'/files/file?fileId=' + ctx.identity.frontFileId" v-if="ctx.identity != null && ctx.identity.frontFileId > 0 && ctx.frontPreviewURL.length == 0" alt=""/>
						<img :src="ctx.frontPreviewURL" alt="" v-if="ctx.frontPreviewURL.length > 0"/>
						<TButton type="button" secondary="" v-if="ctx.canEdit" @click.prevent="ctx.selectFile('front-file')">
							<i class="icon plus"></i></TButton>
					</div>
				</td>
			</tr>
			<tr>
				<td>已绑定手机号</td>
				<td>
					<span v-if="ctx.verifiedMobile.length > 0">{{ ctx.verifiedMobile }}</span>
					<span v-else>
						<span class="red" v-if="ctx.canVerifyStrongly">你需要绑定手机号之后才能提交审核，<a href="/settings/mobile-verify">去绑定 &raquo;</a></span>
						<span class="comment" v-else>尚未绑定手机号，<a href="/settings/mobile-verify">去绑定 &raquo;</a></span>
					</span>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div v-if="!ctx.isSubmitting">
			<div>
				<!-- 未上传 -->
				<SubmitButton v-if="ctx.identity == null">保存</SubmitButton>
			</div>

			<div v-if="ctx.identity != null">
				<!-- face verification -->
				<div v-if="ctx.isFaceVerification">
					<!-- 待提交 -->
					<div v-if="ctx.identity.status == 'none' || ctx.identity.status == 'rejected'">
						<TMessage warning="">已保存，等待人脸验证。如果信息有更改，请保存修改后再进行人脸验证。</TMessage>
						<div v-if="ctx.faceQrcode.length > 0">
							<CardView cols="1" class="mt-4">
								<template #header>人脸验证</template>
								<CardRow>
									<div class="-mt-4">
										<img alt="" :src="'data:image/jpeg;charset=utf-8;base64,' + ctx.faceQrcode" style="width: 18em;height:18em" class="bg-white">
										<p class="mt-4">请<span v-if="ctx.verificationMethod == 'alipay'">使用支付宝App</span>扫描上面的二维码完成人脸验证。
										</p>
									</div>
								</CardRow>
							</CardView>
							<div class="mt-4 flex gap-8">
								<TButton @click.prevent="ctx.verifyFace" ref="facePrimaryButtonRef">我已完成人脸验证</TButton>
								<TButton outlined @click.prevent="ctx.cancelFace">取消此次人脸验证</TButton>
							</div>
						</div>
						<div class="mt-4" v-if="ctx.faceQrcode.length == 0">
							<TButton type="submit" outlined>保存修改</TButton> &nbsp; &nbsp;
							<PrimaryButton v-if="ctx.verificationMethod == 'alipay' && !ctx.generatingQrcode" @click.prevent="ctx.generateFaceQrcode">使用支付宝App人脸验证</PrimaryButton>
							<TButton secondary="" v-if="ctx.verificationMethod == 'alipay' && ctx.generatingQrcode">二维码生成中，请稍候...</TButton>
						</div>
					</div>

					<div v-if="ctx.identity.status == 'verified'">
						<TMessage success="">实名认证审核通过。</TMessage>
					</div>
				</div>

				<!-- normal verification -->
				<div v-if="!ctx.isFaceVerification">
					<!-- 待提交 -->
					<div v-if="ctx.identity.status == 'none'">
						<TMessage warning="">已上传，请提交审核。</TMessage>
						<div class="mt-4">
							<TButton type="submit" outlined>保存修改</TButton> &nbsp; &nbsp;
							<PrimaryButton @click.prevent="ctx.submit" v-if="!ctx.canVerifyStrongly || ctx.verifiedMobile.length > 0">提交审核</PrimaryButton>
						</div>
					</div>

					<!-- 已提交 -->
					<div v-if="ctx.identity.status == 'submitted'">
						<TMessage warning="">管理员审核中，请耐心等待。</TMessage>
						<div class="mt-4">
							<a href="" class="link" @click.prevent="ctx.cancel">取消审核</a>
						</div>
					</div>

					<!-- 已拒绝 -->
					<div v-if="ctx.identity.status == 'rejected'">
						<TMessage error="">审核不通过，原因：{{ ctx.identity.rejectReason }}。</TMessage>
						<div class="mt-4">
							<TButton type="submit" outlined>保存修改</TButton> &nbsp; &nbsp;
							<PrimaryButton @click.prevent="ctx.submit" v-if="!ctx.canVerifyStrongly || ctx.verifiedMobile.length > 0">重新提交审核</PrimaryButton>
						</div>
					</div>

					<!-- 已通过 -->
					<div v-if="ctx.identity.status == 'verified'">
						<TMessage success="">实名认证审核通过。</TMessage>
					</div>
				</div>
			</div>
		</div>
		<div v-if="ctx.isSubmitting">
			正在提交，请稍候...
		</div>
	</PostForm>
</template>

<style lang="postcss" scoped>
</style>