<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 "./addPopup.js"
import AddOSSPopupView from "./addPopup_oss.vue";
import PostForm from "@/components/form/PostForm.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import SSLCertsBox from "@/components/server/SSLCertsBox.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>添加源站</header>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="reverseProxyId" :value="ctx.reverseProxyId"/>
			<input type="hidden" name="originType" :value="ctx.originType"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">源站协议</td>
					<td>
						<!-- HTTP -->
						<TSelect name="protocol" v-model="ctx.protocol" v-if="ctx.serverType == 'httpProxy' || ctx.serverType == 'httpWeb'" @change="ctx.changeProtocol">
							<TOption value="http">HTTP</TOption>
							<TOption value="https">HTTPS</TOption>

							<!-- 对象存储 -->
							<optgroup label="对象存储" v-if="ctx.ossTypes.length > 0"></optgroup>
							<TOption v-for="ossType in ctx.ossTypes" :value="ossType.code">{{ ossType.name }}</TOption>
						</TSelect>

						<!-- TCP -->
						<TSelect name="protocol" v-model="ctx.protocol" v-if="ctx.serverType == 'tcpProxy'">
							<TOption value="tcp">TCP</TOption>
							<TOption value="tls">TLS</TOption>
						</TSelect>

						<!-- UDP -->
						<TSelect name="protocol" v-model="ctx.protocol" v-if="ctx.serverType == 'udpProxy'">
							<TOption value="udp">UDP</TOption>
						</TSelect>
					</td>
				</tr>

				<!-- 普通源站 -->
				<tr v-show="!ctx.isOSS">
					<td class="title">源站地址 *</td>
					<td>
						<TInputGroup>
							<TInputGroupAddon>
								<span>{{ ctx.protocol.toLowerCase() }}://</span>
							</TInputGroupAddon>
							<TInputText name="addr" autofocus v-model="ctx.addr" @input="ctx.changeAddr" @change="ctx.detectHTTPS" class="w-full"/>
						</TInputGroup>
						<p class="comment" style="padding-bottom: 0; margin-bottom: 0" v-if="ctx.addrError.length == 0 && ctx.adviceHTTPS && ctx.protocol == 'http'">
							<span class="red">系统检测到当前源站有HTTPS协议可用，是否切换到HTTPS协议？</span>
							<a href="" @click.prevent="ctx.switchToHTTPS">[点此切换]</a></p>
						<p class="comment"><span class="red" v-if="ctx.addrError.length > 0">{{ ctx.addrError }}</span>
							源站服务器地址，通常是一个IP（或域名）加端口，80和443端口可以省略<span v-if="ctx.serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。
						</p>
					</td>
				</tr>
				<tr v-if="(ctx.isHTTP || ctx.protocol == 'tls') && !ctx.isOSS">
					<td>回源主机名</td>
					<td>
						<TInputText name="host" placeholder="比如example.com" maxlength="100" class="w-full"/>
						<p class="comment">可选项。请求源站时的Host，用于设置访问源站的站点域名<span v-if="ctx.isHTTP">，自定义Host内容中支持请求变量</span>；如果用户实际访问的域名和源站域名不一致，请务必设置为源站域名。
						</p>
					</td>
				</tr>
				</tbody>

				<!-- OSS -->
				<AddOSSPopupView :ctx="ctx" v-if="ctx.teaCommon.teaIsPlus"></AddOSSPopupView>

				<tbody>
				<tr>
					<td colspan="2">
						<MoreOptionsIndicator></MoreOptionsIndicator>
					</td>
				</tr>
				</tbody>

				<tbody v-show="ctx.moreOptionsVisible">
				<tr v-show="ctx.protocol == 'https' || ctx.protocol == 'tls'">
					<td>校验源站{{ ctx.protocol.toUpperCase() }}证书</td>
					<td>
						<TSelect name="tlsSecurityVerifyMode" v-model="ctx.tlsSecurityVerifyMode">
							<TOption name="自动" value="auto"></TOption>
							<TOption name="强校验" value="force"></TOption>
							<TOption name="不校验" value="skip"></TOption>
						</TSelect>
						<p class="comment" v-if="ctx.tlsSecurityVerifyMode == 'auto'">访问源站时，系统自动判断是否需要校验证书安全性。</p>
						<p class="comment" v-if="ctx.tlsSecurityVerifyMode == 'force'">访问源站时，每次请求都对证书安全性进行强校验。</p>
						<p class="comment" v-if="ctx.tlsSecurityVerifyMode == 'skip'">访问源站时，不对证书进行安全性校验。</p>
					</td>
				</tr>
				<tr v-if="ctx.protocol == 'https' || ctx.protocol == 'tls'">
					<td>{{ ctx.protocol.toUpperCase() }}证书</td>
					<td>
						<SSLCertsBox :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书；除非源站有特殊需求，否则不需要添加。'"></SSLCertsBox>
					</td>
				</tr>
				<tr v-show="ctx.protocol != 'udp'">
					<td>专属域名</td>
					<td>
						<DomainsBox></DomainsBox>
						<p class="comment">默认不需要填写，表示支持所有域名。如果填写了专属域名，表示这些源站只会在所列的专属域名被访问时才生效。</p>
					</td>
				</tr>
				<tr v-show="!ctx.isOSS">
					<td>端口跟随</td>
					<td>
						<TCheckboxBinary name="followPort"></TCheckboxBinary>
						<p class="comment">选中后表示源站的端口保持和用户访问的网站端口保持一致；此时的源站地址中的端口号可以任意填写。</p>
					</td>
				</tr>
				<tr v-show="!ctx.isOSS && ctx.protocol == 'https'">
					<td>支持HTTP/2</td>
					<td>
						<TCheckboxBinary name="http2Enabled"></TCheckboxBinary>
						<p class="comment">选中后，表示源站支持HTTP/2协议。</p>
					</td>
				</tr>
				<tr>
					<td>权重</td>
					<td>
						<TInputText name="weight" maxlength="4" value="10" style="width:5em"/>
						<p class="comment">数字越大，代表分配的请求比例越多。</p>
					</td>
				</tr>
				<tr>
					<td>名称</td>
					<td>
						<TInputText name="name" maxlength="100" class="w-full"/>
						<p class="comment">给当前源站起一个容易识别的名称。</p>
					</td>
				</tr>
				<tr>
					<td>备注</td>
					<td>
						<TTextarea name="description" rows="3" maxlength="100" class="w-full"></TTextarea>
					</td>
				</tr>
				<tr>
					<td>启用当前源站</td>
					<td>
						<TCheckboxBinary name="isOn" checked="checked"></TCheckboxBinary>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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