<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 "./addServerNamePopup.js"
import {ref} from "vue";
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

<template>
	<PopupLayout>

		<header v-if="!ctx.isUpdating">添加域名绑定</header>
		<header v-if="ctx.isUpdating">修改域名绑定</header>
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="mode" :value="ctx.mode"/>
			<DefinitionTable>
				<tbody>
				<tr v-if="ctx.mode == 'single'">
					<td class="title">单个域名 *</td>
					<td>
						<TInputText name="serverName" ref="serverName" autofocus maxlength="100" v-model="ctx.serverName.name" class="w-full"/>
						<p class="comment">请输入单个域名，比如
							<CodeLabel>example.com</CodeLabel>
							、
							<CodeLabel>www.example.com</CodeLabel>
							，<strong>不要</strong>包含
							<CodeLabel>http://</CodeLabel>
							或
							<CodeLabel>https://</CodeLabel>
							或端口号；也可以使用泛域名，比如
							<CodeLabel>*.example.com</CodeLabel>
							。
						</p>
					</td>
				</tr>
				<tr v-if="ctx.mode == 'multiple'">
					<td class="title">多个域名 *</td>
					<td>
						<TTextarea name="serverNames" ref="serverNames" v-model="ctx.multipleServerNames" class="w-full" rows="5"></TTextarea>
						<p class="comment">每行一个域名，比如
							<CodeLabel>example.com</CodeLabel>
							、
							<CodeLabel>www.example.com</CodeLabel>
							，<strong>不要</strong>包含
							<CodeLabel>http://</CodeLabel>
							或
							<CodeLabel>https://</CodeLabel>
							或端口号；也可以使用泛域名，比如
							<CodeLabel>*.example.com</CodeLabel>
							。
						</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton> &nbsp;
			<a href="" class="link" v-if="ctx.mode == 'single'" @click.prevent="ctx.switchMode('multiple')">批量添加</a><a href="" v-if="ctx.mode == 'multiple'" @click.prevent="ctx.switchMode('single')" class="link">单个添加</a>
		</PostForm>
	</PopupLayout>
</template>

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