<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 "./update.js"
import DomainMenu from "@/views/ns/domains/@menu_domain.vue";
import PostForm from "@/components/form/PostForm.vue";
import NSDomainGroupSelector from "@/components/ns/NSDomainGroupSelector.vue";
import TLabel from "@/components/ui/TLabel.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

<template>
	<DomainMenu :ctx="ctx" activeTab="update"></DomainMenu>

	<PostForm action="$" @success="ctx.success">
		<input type="hidden" name="domainId" :value="ctx.domain.id"/>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">域名 *</td>
				<td>
					{{ ctx.domain.name }}
				</td>
			</tr>
			<tr v-show="ctx.dnsHosts != null && ctx.dnsHosts.length > 0">
				<td>DNS服务器</td>
				<td>
					<div class="label-group">
						<TLabel outlined="" v-for="host in ctx.dnsHosts">{{ host }}</TLabel>
					</div>
				</td>
			</tr>
			<tr v-if="ctx.hasGroups">
				<td>所属分组</td>
				<td>
					<NSDomainGroupSelector :v-domain-group-id="ctx.domain.groupId" ref="groupSelector"></NSDomainGroupSelector>
				</td>
			</tr>
			<tr>
				<td>启用当前域名</td>
				<td>
					<TCheckboxBinary name="isOn" value="1" v-model="ctx.domain.isOn"></TCheckboxBinary>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<SubmitButton></SubmitButton>
	</PostForm>
</template>

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