<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 "./enterprise.js"
import "./enterprise.css"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import TMessage from "@/components/ui/TMessage.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TBreadcrumb from "@/components/ui/TBreadcrumb.vue";

const ctx = ctxRef(new Context())

</script>

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

	<PostForm action=".uploadEnterprise" 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: 20em" 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: 20em" v-model="ctx.number"/>
					</div>
					<div v-else>
						{{ ctx.identity.number }}
					</div>
				</td>
			</tr>
			<tr>
				<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 secondary="" v-if="ctx.canEdit" @click.prevent="ctx.selectFile('front-file')">
							<i class="icon plus"></i></TButton>
					</div>
					<p class="comment">请上传高清营业执照正、副本照片以便于系统识别。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div v-if="!ctx.isSubmitting">
			<div>
				<!-- 未上传 -->
				<SubmitButton v-if="ctx.identity == null">保存</SubmitButton>
			</div>

			<div v-if="ctx.identity != null">
				<!-- 待提交 -->
				<div v-if="ctx.identity.status == 'none'">
					<TMessage warning="">已上传，请提交审核。</TMessage>
					<div class="mt-4">
						<TButton type="submit">保存修改</TButton> &nbsp; &nbsp;
						<a href="" @click.prevent="ctx.submit" class="link">提交审核</a>
					</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 secondary="" type="submit">保存修改</TButton> &nbsp; &nbsp;
						<a href="" class="link" @click.prevent="ctx.submit">重新提交审核</a>
					</div>
				</div>

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


		</div>
		<div v-if="ctx.isSubmitting">
			正在提交，请稍候...
		</div>
	</PostForm>
</template>

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