<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/servers/@menu.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import ServerGroupSelector from "@/components/server/ServerGroupSelector.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TRadio from "@/components/ui/TRadio.vue";
import TInputText from "@/components/ui/TInputText.vue";
import PostForm from "@/components/form/PostForm.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import SSLCertsBox from "@/components/server/SSLCertsBox.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import ServerNameBox from "@/components/server/ServerNameBox.vue";
import OriginInputBox from "@/components/server/OriginInputBox.vue";
import CacheCondBox from "@/components/server/CacheCondBox.vue";
import { ref } from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

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

</script>

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

	<WarningMessage v-show="ctx.clusterId == 0">
		需要管理员在后台设置当前用户所属集群后才能继续操作。
	</WarningMessage>

	<PostForm action="$" @success="ctx.success" @fail="ctx.fail" v-show="ctx.clusterId > 0">
		<DefinitionTable>
			<tbody>
				<tr>
					<td class="title after:content-['*'] after:text-red-500">加速域名</td>
					<td>
						<ServerNameBox ref="serverNameBox"></ServerNameBox>
					</td>
				</tr>
				<tr>
					<td class="after:content-['*'] after:text-red-500">域名协议</td>
					<td>
						<div class="flex items-center gap-[60px]">
							<TCheckboxBinary name="protocols" :value="'http'">HTTP</TCheckboxBinary>
							<TCheckboxBinary name="protocols" :value="'https'" v-model="ctx.supportHTTPS">HTTPS
							</TCheckboxBinary>
						</div>
					</td>
				</tr>
				<tr v-show="ctx.supportHTTPS">
					<td class="after:content-['*'] after:text-red-500">HTTPS证书</td>
					<td>
						<SSLCertsBox :v-domains="ctx.findServerNames"></SSLCertsBox>
					</td>
				</tr>
				<tr>
					<td class="after:content-['*'] after:text-red-500">源站信息</td>
					<td>
						<OriginInputBox :v-oss-types="ctx.ossTypes"></OriginInputBox>
					</td>
				</tr>
				<tr>
					<td class="after:content-['*'] after:text-red-500">回源主机名</td>
					<td>
						<div class="flex gap-[30px]">
							<TRadio name="requestHostType" :value="0" v-model="ctx.requestHostType">跟随CDN服务</TRadio>
							<TRadio name="requestHostType" :value="1" v-model="ctx.requestHostType">跟随源站</TRadio>
							<TRadio name="requestHostType" :value="2" v-model="ctx.requestHostType">自定义</TRadio>
						</div>
						<div v-show="ctx.requestHostType == 2" style="margin-top: 0.8em">
							<TInputText name="requestHost" placeholder="比如example.com" v-model="ctx.requestHost"
								class="w-full" />
						</div>
						<p class="comment" style="margin-top: 13px; margin-bottom: 0;">请求源站时的Host，用于设置访问源站的站点域名
							<span v-if="ctx.requestHostType == 0">，"跟随CDN服务"是指访问源站的站点域名和当前CDN服务保持一致</span>
							<span v-if="ctx.requestHostType == 1">，"跟随源站"是指访问源站的站点域名仍然是填写的源站地址中的信息，不随CDN服务域名改变而改变</span>
							<span v-if="ctx.requestHostType == 2">，自定义Host内容中支持请求变量</span>。
						</p>
					</td>
				</tr>
				<tr>
					<td>缓存设置</td>
					<td style="padding-top: 8px; padding-bottom: 16px;">
						<CacheCondBox></CacheCondBox>
					</td>
				</tr>
				<tr v-show="ctx.requirePlan || ctx.userPlans.length > 0">
					<td>绑定套餐<span v-if="ctx.requirePlan" class="text-red-500">*</span></td>
					<td>
						<input type="hidden" name="isChanged" value="1" />
						<span v-if="ctx.userPlans.length == 0 && !ctx.requirePlan" class="disabled">当前还没有可以使用的套餐。</span>
						<span v-if="ctx.userPlans.length == 0 && ctx.requirePlan" class="red"><a href="/plans"><span
									class="red">当前还没有可以使用的套餐，请先购买套餐</span></a> 。</span>
						<div v-else>
							<TSelect name="userPlanId" filter>
								<TOption value="0" v-if="!ctx.requirePlan">[不使用套餐]</TOption>
								<TOption value="0" v-if="ctx.requirePlan">[选择套餐]</TOption>
								<TOption v-for="userPlan in ctx.userPlans" :value="userPlan.id">{{ userPlan.name }}（{{
									userPlan.dayTo }}）</TOption>
							</TSelect>
						</div>
					</td>
				</tr>
				<tr>
					<td>所属分组</td>
					<td>
						<ServerGroupSelector></ServerGroupSelector>
					</td>
				</tr>
			</tbody>
		</DefinitionTable>

		<SubmitButton></SubmitButton>
	</PostForm>

</template>

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