<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 "./createPopup.js"
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TInputText from "@/components/ui/TInputText.vue";
import PostForm from "@/components/form/PostForm.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import NSRoutesSelector from "@/components/ns/NSRoutesSelector.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import {ref} from "vue";
import TMessage from "@/components/ui/TMessage.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

<template>
	<PopupLayout>
		<header>创建记录</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="domainId" :value="ctx.domain.id"/>
			<input type="hidden" name="addingType" :value="ctx.addingType"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">记录名</td>
					<td>
						<!-- 单个添加 -->
						<div v-if="ctx.addingType == 'one'">
							<TInputGroup>
								<TInputText name="name" ref="nameInput" style="width: 16em" autofocus/>
								<TInputGroupAddon>
									<span>.{{ ctx.domain.name }}</span>
								</TInputGroupAddon>
							</TInputGroup>
							<p class="comment"><a href="" @click.prevent="ctx.setAddingType('batch')">[批量添加]</a></p>
						</div>

						<!-- 批量添加 -->
						<div v-if="ctx.addingType == 'batch'">
							<TTextarea name="names" rows="10" placeholder="每行一个，不需要加顶级域名" ref="namesInput" class="w-full"></TTextarea>
							<p class="comment"><a href="" @click.prevent="ctx.setAddingType('one')">[单个添加]</a></p>
						</div>
					</td>
				</tr>
				<tr>
					<td>记录类型</td>
					<td>
						<TSelect name="type" v-model="ctx.type" @change="ctx.changeType">
							<TOption v-for="t in ctx.types" :value="t.type">{{ t.type }}</TOption>
						</TSelect>
						<p class="comment">{{ ctx.typeDescription }}</p>
					</td>
				</tr>
				<tr>
					<td>记录值 *</td>
					<td>
						<TInputText name="value" maxlength="512" class="w-full"/>
					</td>
				</tr>

				<!-- MX -->
				<tr v-show="ctx.type == 'MX'">
					<td class="color-border">MX优先级</td>
					<td>
						<TInputText name="mxPriority" value="10" maxlength="5" size="5" style="width: 6em"/>
						<p class="comment">数字越小越优先，最高为0。</p>
					</td>
				</tr>

				<!-- SRV -->
				<tr v-show="ctx.type == 'SRV'">
					<td class="color-border">SRV端口 *</td>
					<td>
						<TInputText name="srvPort" value="" maxlength="5" size="5" style="width: 6em"/>
					</td>
				</tr>
				<tr v-show="ctx.type == 'SRV'">
					<td class="color-border">SRV优先级</td>
					<td>
						<TInputText name="srvPriority" value="10" maxlength="5" size="5" style="width: 6em"/>
					</td>
				</tr>
				<tr v-show="ctx.type == 'SRV'">
					<td class="color-border">SRV权重</td>
					<td>
						<TInputText name="srvWeight" value="10" maxlength="5" size="5" style="width: 6em"/>
					</td>
				</tr>

				<!-- CAA -->
				<tr v-show="ctx.type == 'CAA'">
					<td class="color-border">CAA等级</td>
					<td>
						<TInputText name="caaFlag" value="0" maxlength="3" size="5" style="width: 4em"/>
						<p class="comment">取值在0到128之间。</p>
					</td>
				</tr>
				<tr v-show="ctx.type == 'CAA'">
					<td class="color-border">CAA标签</td>
					<td>
						<TSelect name="caaTag">
							<TOption value="issue">issue</TOption>
							<TOption value="issuewild">issuewild</TOption>
							<TOption value="iodef">iodef</TOption>
						</TSelect>
					</td>
				</tr>

				<tr>
					<td>TTL</td>
					<td>
						<TInputGroup>
							<TInputText name="ttl" maxlength="10" style="width: 6em" v-model="ctx.defaultTTL"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr>
					<td>线路</td>
					<td>
						<NSRoutesSelector></NSRoutesSelector>
					</td>
				</tr>
				<tr>
					<td>权重</td>
					<td>
						<TInputText name="weight" style="width: 6em" maxlength="6" value="0"/>
						<p class="comment">不大于0的权重将当做10处理。</p>
					</td>
				</tr>
				<tr>
					<td>备注</td>
					<td>
						<TTextarea rows="2" name="description" class="w-full" maxlength="100"></TTextarea>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton v-show="ctx.quotaCanCreate"></SubmitButton>
			<TMessage error="" v-if="!ctx.quotaCanCreate">当前域名记录数已超出限额（每个域名最多{{ ctx.quotaMaxRecords }}个记录数）， 请升级套餐后重试。</TMessage>
		</PostForm>
	</PopupLayout>
</template>

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