<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";
import Tab from "primevue/tab";
import Tabs from "primevue/tabs";
import TabList from "primevue/tablist";
import TabPanels from "primevue/tabpanels";
import TabPanel from "primevue/tabpanel";


const serverName = ref()
const serverNames = ref()
const ctx = ctxRef(new Context(), {
	refs: { serverName, serverNames }
})
const handleTagChange = (mode) => {
	ctx.switchMode(mode)
}
</script>

<template>
	<PopupLayout>

		<header v-if="!ctx.isUpdating">添加域名绑定</header>
		<header v-if="ctx.isUpdating">修改域名绑定</header>
		<div class="add-popup-container">
			<Tabs value="single">
				<TabList >
					<Tab value="single" @click="handleTagChange('single')">单个域名<span class="text-red-500">*</span></Tab>
					<Tab value="multiple" @click="handleTagChange('multiple')">多个域名<span class="text-red-500">*</span></Tab>
				</TabList>
				<TabPanels>
					<TabPanel value="single">
						<PostForm action="$" @success="ctx.success">
							<div class="form-container">
								<TInputText name="serverName" ref="serverName" autofocus maxlength="100"
									v-model="ctx.serverName.name" class="w-full" />
								<p class="comment"
									style="margin-top: 12px; margin-bottom: 0; line-height: 30px; letter-spacing: 0.4pt;">
									每行一个域名，比如
									<CodeLabel>example.com</CodeLabel>
									、
									<CodeLabel>www.example.com</CodeLabel>
									，不要包含
									<CodeLabel>http://</CodeLabel>
									或
									<CodeLabel>https://</CodeLabel>
									或端口号；也可以使用泛域名，比如
									<CodeLabel>*.example.com</CodeLabel>
								</p>
							</div>
							<div class="flex justify-end mt-[20px]">
								<SubmitButton></SubmitButton>
							</div>
						</PostForm>
					</TabPanel>
					<TabPanel value="multiple">
						<PostForm action="$" @success="ctx.success">
							<div class="form-container">
								<TTextarea name="serverNames" ref="serverNames" v-model="ctx.multipleServerNames"
									class="w-full" rows="5"></TTextarea>
								<p class="comment"
									style="margin-top: 12px; margin-bottom: 0; line-height: 30px; letter-spacing: 0.4pt;">
									每行一个域名，比如
									<CodeLabel>example.com</CodeLabel>
									、
									<CodeLabel>www.example.com</CodeLabel>
									，不要包含
									<CodeLabel>http://</CodeLabel>
									或
									<CodeLabel>https://</CodeLabel>
									或端口号；也可以使用泛域名，比如
									<CodeLabel>*.example.com</CodeLabel>
								</p>
							</div>
							<div class="flex justify-end mt-[20px]">
								<SubmitButton></SubmitButton>
							</div>
						</PostForm>
					</TabPanel>
				</TabPanels>
			</Tabs>

		</div>
		<!-- <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>
:deep(.p-tab) {
	font-weight: normal;
	border: 1px solid #E5E8F2;
	border-bottom: none;
	border-left: none;
}

:deep(.p-tab:first-child) {
	border-left: 1px solid #E5E8F2;
}

:deep(.p-tab-active) {
	color: inherit;
	font-weight: normal;
	background-color: #EEF2FA;
}

:deep(.p-tablist-active-bar) {
	background: none;
}

:deep(.p-tablist-tab-list) {
	border-color: #E5E8F2;
}

:deep(.p-tabpanels) {
	padding: 0;
}

.form-container {
	border: 1px solid #EEF2FA;
	border-top: none;
	padding: 20px;
}
</style>