<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 "./index.js"
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import PostForm from "@/components/form/PostForm.vue";
import HTTPRedirectToHTTPSBox from "@/components/server/HTTPRedirectToHTTPSBox.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import NetworkAddressesBox from "@/components/common/NetworkAddressesBox.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ServerSettingLayout :ctx="ctx">
		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="serverId" :value="ctx.serverId"/>
			<input type="hidden" name="webId" :value="ctx.webId"/>
			<input type="hidden" name="serverType" :value="ctx.serverType"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">启用HTTP</td>
					<td>
						<TCheckboxBinary name="isOn" value="1" v-model="ctx.httpConfig.isOn">{{ ctx.httpConfig.isOn ?'开启':'关闭' }}</TCheckboxBinary>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.httpConfig.isOn && ctx.canSpecifyPort">
				<tr>
					<td class="title">绑定端口<span style="color: rgba(255, 67, 67, 1);">*</span></td>
					<td>
						<span class="red" v-if="ctx.httpConfig.isOn && (ctx.httpConfig.addresses == null || ctx.httpConfig.addresses.length == 0)">还没有添加端口绑定，会导致HTTP服务无法访问。</span>
						<NetworkAddressesBox
							:v-server-type="ctx.serverType"
							:v-addresses="ctx.httpConfig.addresses"
							:v-protocol="'http'"
							:min-port="ctx.minPort"
							:max-port="ctx.maxPort"></NetworkAddressesBox>
						<p class="comment" v-if="ctx.conflictingPorts.length > 0">
							<span v-if="ctx.conflictingPorts.length > 0" class="red">
								配置错误：
								<span v-for="(port, index) in ctx.conflictingPorts">{{ port }}
									<span v-if="index != ctx.conflictingPorts.length - 1">、</span>
								</span>
								<span v-if="ctx.conflictingPorts.length > 1">等</span>
								端口同HTTPS设置的端口冲突，请删除HTTP或HTTPS中的相关端口。
							</span>
						</p>
					</td>
				</tr>
				</tbody>
				<tbody v-show="ctx.httpConfig.isOn">
				<tr>
					<td>自动跳转到HTTPS</td>
					<td>
						<HTTPRedirectToHTTPSBox :v-redirect-to-https-config="ctx.redirectToHTTPSConfig"></HTTPRedirectToHTTPSBox>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<div class="submit-button">
				<SubmitButton></SubmitButton>
			</div>
		</PostForm>
	</ServerSettingLayout>
</template>

<style lang="postcss" scoped src="@/views/servers/style/server.pcss"></style>
<style lang="postcss" scoped>
:deep(.ui.definition.table > tr:first-child > td) {
	border-top: unset!important;
}

:deep(.ui.definition.table > tr > td:first-child:not(.ignored)) {
	width: 110px;
	min-width: unset;
	padding: 12px 8px;
	background-color: rgba(250, 250, 250, 1);
}

:deep(.ui.definition.table > tr > td:nth-child(2)) {
	padding: 12px 8px;
}
</style>