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

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>修改记录</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="recordId" :value="ctx.record.id"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">记录名</td>
					<td>
						<TInputGroup>
							<TInputText name="name" autofocus v-model="ctx.record.name" style="width: 16em"/>
							<TInputGroupAddon>
								<span>.{{ ctx.domain.name }}</span>
							</TInputGroupAddon>
						</TInputGroup>
					</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" v-model="ctx.record.value" class="w-full"/>
					</td>
				</tr>

				<!-- MX -->
				<tr v-show="ctx.type == 'MX'">
					<td class="color-border">MX优先级</td>
					<td>
						<TInputText name="mxPriority" value="10" v-model="ctx.record.mxPriority" 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" v-model="ctx.record.srvPort"/>
					</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" v-model="ctx.record.srvPriority"/>
					</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" v-model="ctx.record.srvWeight"/>
					</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" v-model="ctx.record.caaFlag"/>
						<p class="comment">取值在0到128之间。</p>
					</td>
				</tr>
				<tr v-show="ctx.type == 'CAA'">
					<td class="color-border">CAA标签</td>
					<td>
						<TSelect name="caaTag" v-model="ctx.record.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.record.ttl"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
					</td>
				</tr>
				<tr>
					<td>线路</td>
					<td>
						<NSRoutesSelector :v-routes="ctx.record.routes"></NSRoutesSelector>
					</td>
				</tr>
				<tr>
					<td>权重</td>
					<td>
						<TInputText name="weight" style="width: 6em" maxlength="6" v-model="ctx.record.weight"/>
						<p class="comment">不大于0的权重将当做10处理。</p>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.moreOptionsVisible">
				<tr>
					<td>备注</td>
					<td>
						<TTextarea rows="2" name="description" v-model="ctx.record.description" class="w-full"></TTextarea>
					</td>
				</tr>
				<tr>
					<td>启用当前记录</td>
					<td>
						<TCheckboxBinary name="isOn" v-model="ctx.record.isOn"></TCheckboxBinary>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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