<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 "./index.js"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TMessage from "@/components/ui/TMessage.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";

const ctx = ctxRef(new Context())

</script>

<template>

	<WarningMessage v-if="!ctx.user.isVerified">请耐心等待管理员审核。</WarningMessage>
	<TMessage class="mb-4" error=""  v-if="ctx.user.isVerified && ctx.user.isRejected">注册信息被拒绝<span v-if="ctx.user.rejectReason.length > 0">原因：{{ ctx.user.rejectReason }}</span>。
	</TMessage>

	<PostForm action="$" @success="ctx.success">
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">联系手机号 *</td>
				<td>
					<TInputText name="mobile" maxlength="11" placeholder="手机号" v-model="ctx.user.mobile" class="w-full"/>
				</td>
			</tr>
			<tr>
				<td>已绑定手机号码</td>
				<td>
					<span v-if="ctx.user.verifiedMobile.length > 0">{{ ctx.user.verifiedMobile }} &nbsp; <a href="/settings/mobile-verify" v-if="ctx.mobileRequireVerification" class="text-sm link">[修改]</a></span>
					<span class="disabled" v-else>没有设置 &nbsp;  &nbsp; <a href="/settings/mobile-verify" v-if="ctx.mobileRequireVerification" class="text-sm link">[设置]</a></span>
					<p class="comment">用于登录系统、找回密码等。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">常用电子邮箱</td>
				<td>
					<TInputText name="email" maxlength="100" placeholder="常用电子邮箱" v-model="ctx.user.email" class="w-full"/>
					<p class="comment">用于接收系统通知、账单提醒等。</p>
				</td>
			</tr>
			<tr v-if="ctx.user.verifiedEmail.length > 0 || ctx.latestEmailVerification == null">
				<td>已绑定电子邮箱</td>
				<td>
					<span v-if="ctx.user.verifiedEmail.length > 0">{{ ctx.user.verifiedEmail }} &nbsp; <a href="/settings/email-verify" v-if="ctx.emailRequireVerification" class="text-sm link">[修改]</a></span>
					<span class="disabled" v-else>没有设置 &nbsp;  &nbsp; <a href="/settings/email-verify" v-if="ctx.emailRequireVerification" class="text-sm link">[设置]</a></span>
					<p class="comment">用于登录系统、找回密码等。</p>
				</td>
			</tr>
			<tr v-if="ctx.latestEmailVerification != null">
				<td>等待绑定邮箱</td>
				<td>
					<span>{{ ctx.latestEmailVerification.email }} &nbsp; <a href="/settings/email-verify" v-if="ctx.emailRequireVerification" class="text-sm link">[修改]</a></span>
					<p class="comment" v-if="!ctx.latestEmailVerification.isSent">系统正在发送绑定链接到此邮箱中，请耐心等待。</p>
					<p class="comment" v-if="ctx.latestEmailVerification.isSent">
						<span class="red">请在{{ ctx.latestEmailVerification.expiresTime }}前点击邮件中的激活链接进行绑定。</span>
					</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">用户姓名或者公司名称 *</td>
				<td>
					<TInputText name="fullname" maxlength="50" autofocus v-model="ctx.user.fullname" placeholder="用户姓名或者公司名称" class="w-full"/>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<DefinitionTable>
			<tbody>
			<tr>
				<td>接收即时消息</td>
				<td>
					<TCheckboxBinary name="enableInstantMessage" v-model="ctx.user.enableInstantMessage"></TCheckboxBinary>
					<p class="comment">选中后，表示接收系统内相关即时消息通知（如WAF事件等）。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<SubmitButton></SubmitButton>
	</PostForm>
</template>

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