<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 TMessage from "@/components/ui/TMessage.vue";
import TInputText from "@/components/ui/TInputText.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TButton from "@/components/ui/TButton.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

<template>
	<PostForm action="$" @before="ctx.beforeSend" @done="ctx.doneSend" @success="ctx.success" v-show="!ctx.isSent">
		<TMessage v-if="!ctx.canVerify">系统暂未开通绑定手机号码功能。</TMessage>
		<TMessage error="" v-if="ctx.canVerify && ctx.forceVerify && ctx.verifiedMobile.length == 0">你尚未绑定手机号码，必须绑定手机号码后才能继续操作。</TMessage>

		<div v-show="ctx.canVerify">
			<div class="margin"></div>
			<DefinitionTable>
				<tbody>
				<tr v-if="ctx.verifiedMobile.length > 0">
					<td class="title">已绑定手机号码</td>
					<td>
						<span>{{ ctx.verifiedMobile }}</span>
					</td>
				</tr>
				<tr v-show="ctx.isModifying">
					<td class="title"><span v-if="ctx.verifiedMobile.length > 0">新</span>绑定手机号码 *</td>
					<td>
						<TInputText name="mobile" maxlength="11" autofocus style="width: 11em" v-model="ctx.newMobile" @input="ctx.changeMobile"/>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<div v-show="ctx.isModifying && !ctx.isSending">
				<SubmitButton v-show="ctx.mobileIsValid">发送短信验证</SubmitButton>
				<TButton secondary="" disabled type="button" v-show="!ctx.mobileIsValid">发送短信验证</TButton>
				&nbsp; <a href="/settings/profile" v-if="ctx.verifiedMobile.length > 0" class="link">不修改</a>
			</div>
			<div v-show="ctx.isSending">
				<TButton disabled type="button">短信发送中...</TButton>
			</div>
		</div>
	</PostForm>

	<PostForm action=".verify" @success="ctx.verifySuccess" v-show="ctx.isSent">
		<input type="hidden" name="mobile" :value="ctx.newMobile"/>
		<div class="margin"></div>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title"><span v-if="ctx.verifiedMobile.length > 0">新</span>绑定手机号码 *</td>
				<td>{{ ctx.newMobile }} &nbsp; <a href="/settings/mobile-verify"><span class="small">[修改]</span></a>
				</td>
			</tr>
			<tr>
				<td>短信验证码</td>
				<td>
					<TInputText name="code" v-model="ctx.code" :maxlength="ctx.smsCodeLength" :style="{'width':ctx.smsCodeLength + 'em'}" ref="smsCodeRef" @input="ctx.changeCode"/>
					<p class="comment">请输入短信中{{ ctx.smsCodeLength }}位数字验证码。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<SubmitButton v-show="ctx.codeIsValid">提交验证</SubmitButton>
		<TButton secondary="" disabled type="button" v-show="!ctx.codeIsValid">提交验证</TButton>
	</PostForm>
</template>

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