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

import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./verifyPopup.js"
import PostForm from "@/components/form/PostForm.vue";
import TLabel from "@/components/ui/TLabel.vue";
import CopyToClipboard from "@/components/common/CopyToClipboard.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>验证域名</header>
		<p class="comment">当前域名验证后，其下的域名解析才会生效。</p>

		<PostForm action="$" @before="ctx.before" @success="ctx.submitSuccess" @done="ctx.done">
			<input type="hidden" name="domainId" :value="ctx.domain.id"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">域名</td>
					<td>{{ ctx.domain.name }}</td>
				</tr>
				<tr>
					<td>DNS主机地址</td>
					<td>
						<div v-if="ctx.hosts.length > 0" class="label-group">
							<TLabel outlined="" v-for="host in ctx.hosts">{{ host }}</TLabel>
						</div>
						<span v-if="ctx.hosts.length == 0" class="red">管理员没有设置可用的DNS主机域名，请联系客服。</span>
						<p class="comment" v-if="ctx.hosts.length > 0">请修改域名的DNS主机地址为以上地址。</p>
					</td>
				</tr>
				<tr v-if="ctx.requireTXT && ctx.txt.length > 0">
					<td>TXT记录</td>
					<td>
						<span v-if="ctx.txt.length > 0" id="txt-text">{{ ctx.txt }}</span>&nbsp;
						<CopyToClipboard :text="ctx.txt"></CopyToClipboard>
						<p class="comment">由于当前域名已被别的用户添加并验证，所以需要重新验证所有权。请在域名中加入以上TXT记录，子域名为
							<CodeLabel>yanzheng</CodeLabel>
							，需要在{{ ctx.txtExpiresTime }}之前完成验证。
						</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton v-if="ctx.domain.status == 'none' && ctx.hosts.length > 0 && (!ctx.requireTXT || ctx.txt.length > 0)">验证</SubmitButton>
			<div class="margin"></div>
			<div>
				<span v-if="ctx.isVerifying" class="red">验证中，请稍候...</span>
				<span class="red" v-if="!ctx.isOk && ctx.errorMessage.length > 0">验证失败：{{ ctx.errorMessage }} <span v-if="ctx.rawErrorMessage.length > 0">({{ ctx.rawErrorMessage }})</span></span>
			</div>
		</PostForm>
	</PopupLayout>
</template>

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