<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 "./create.js"
import Menu from "@/views/lb/@menu.vue";
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import SSLCertsBox from "@/components/server/SSLCertsBox.vue";
import ValuesBox from "@/components/common/ValuesBox.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import OriginInputBox from "@/components/server/OriginInputBox.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

<template>
	<Menu active-tab="create"></Menu>

	<PostForm @success="ctx.success" action="$">
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">网站名称 *</td>
				<td>
					<TInputText name="name" maxlength="50" autofocus class="w-full"/>
					<p class="comment">请设置一个容易识别的网站名称。</p>
				</td>
			</tr>
			<tr>
				<td>网站类型 *</td>
				<td>
					<TSelect name="serverType" v-model="ctx.serverType" @change="ctx.changeServerType">
						<TOption v-for="serverType in ctx.serverTypes" :value="serverType.code">{{ serverType.name }}</TOption>
					</TSelect>
				</td>
			</tr>
			<tr>
				<td>监听协议 *</td>
				<td>
					<div>
						<span v-if="ctx.serverType == 'tcpProxy'" class="flex items-center">
							<TCheckboxBinary name="protocols" :key="'tcp'" :value="'tcp'" v-model="ctx.enableTCP">TCP</TCheckboxBinary> &nbsp; &nbsp; &nbsp;
						<TCheckboxBinary name="protocols" :key="'tls'" :value="'tls'" v-model="ctx.enableTLS">TLS</TCheckboxBinary>
						</span>
								<span v-if="ctx.serverType == 'udpProxy'">
							<TCheckboxBinary name="protocols" :key="'udp'" :value="'udp'" v-model="ctx.enableUDP">UDP</TCheckboxBinary>
						</span>
					</div>
				</td>
			</tr>
			<tr v-show="ctx.enableTLS">
				<td>HTTPS证书 *</td>
				<td>
					<SSLCertsBox></SSLCertsBox>
				</td>
			</tr>
			<tr v-if="ctx.canSpecifyTCPPort && ctx.enableTCP">
				<td>TCP监听端口 *</td>
				<td>
					<ValuesBox size="5" maxlength="5" placeholder="端口" name="tcpPorts"></ValuesBox>
					<p class="comment">添加服务器监听用户网络连接的端口，需要在1024-65534之间。TCP和TLS端口之间不能重复。</p>
				</td>
			</tr>
			<tr v-if="ctx.canSpecifyTCPPort && ctx.enableTLS">
				<td>TLS监听端口 *</td>
				<td>
					<ValuesBox size="5" maxlength="5" placeholder="端口" name="tlsPorts"></ValuesBox>
					<p class="comment">添加服务器监听用户网络连接的端口，需要在1024-65534之间。TCP和TLS端口之间不能重复。</p>
				</td>
			</tr>
			<tr v-if="!ctx.canSpecifyTCPPort && ctx.serverType == 'tcpProxy'">
				<td>TCP/TLS监听端口</td>
				<td>保存后自动生成</td>
			</tr>
			<tr v-if="ctx.canSpecifyUDPPort && ctx.enableUDP">
				<td>UDP监听端口 *</td>
				<td>
					<ValuesBox size="5" maxlength="5" placeholder="端口" name="udpPorts"></ValuesBox>
					<p class="comment">添加服务器监听用户网络连接的端口，需要在1024-65534之间。</p>
				</td>
			</tr>
			<tr v-if="!ctx.canSpecifyUDPPort && ctx.serverType == 'udpProxy'">
				<td>UDP监听端口</td>
				<td>保存后自动生成</td>
			</tr>
			<tr>
				<td>源站信息 *</td>
				<td>
					<OriginInputBox :v-family="ctx.family" ref="originInputBox"></OriginInputBox>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<SubmitButton></SubmitButton>
	</PostForm>
</template>

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