<script setup>

import {ref, watch} from "vue"
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TInputText from "@/components/ui/TInputText.vue";
import DomainsBox from "@/components/server/DomainsBox.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import MoreOptionsAngle from "@/components/common/MoreOptionsAngle.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-redirect-to-https-config", "v-is-location"])

const {redirectToHttpsConfig, portString, moreOptionsVisible, statusOptions} = (function () {
	let redirectToHttpsConfig = props.vRedirectToHttpsConfig
	if (redirectToHttpsConfig == null) {
		redirectToHttpsConfig = {
			isPrior: false,
			isOn: false,
			host: "",
			port: 0,
			status: 0,
			onlyDomains: [],
			exceptDomains: []
		}
	} else {
		if (redirectToHttpsConfig.onlyDomains == null) {
			redirectToHttpsConfig.onlyDomains = []
		}
		if (redirectToHttpsConfig.exceptDomains == null) {
			redirectToHttpsConfig.exceptDomains = []
		}
	}
	return {
		redirectToHttpsConfig: ref(redirectToHttpsConfig),
		portString: ref((redirectToHttpsConfig.port > 0) ? redirectToHttpsConfig.port.toString() : ""),
		moreOptionsVisible: ref(false),
		statusOptions: ref([
			{"code": 301, "text": "Moved Permanently"},
			{"code": 308, "text": "Permanent Redirect"},
			{"code": 302, "text": "Found"},
			{"code": 303, "text": "See Other"},
			{"code": 307, "text": "Temporary Redirect"}
		])
	}
})()

const changeMoreOptions = function (isVisible) {
	moreOptionsVisible.value = isVisible
}

const changeOnlyDomains = function (values) {
	redirectToHttpsConfig.value.onlyDomains = values
}

const changeExceptDomains = function (values) {
	redirectToHttpsConfig.value.exceptDomains = values
}

watch(() => redirectToHttpsConfig.value.status, function () {
	redirectToHttpsConfig.value.status = parseInt(redirectToHttpsConfig.value.status)
})

watch(portString, function (v) {
	let port = parseInt(v)
	if (!isNaN(port)) {
		redirectToHttpsConfig.value.port = port
	} else {
		redirectToHttpsConfig.value.port = 0
	}
})

</script>

<template>
	<div>
		<input type="hidden" name="redirectToHTTPSJSON" :value="JSON.stringify(redirectToHttpsConfig)"/>

		<!-- Location -->
		<DefinitionTable v-if="vIsLocation">
			<PriorCheckbox :v-config="redirectToHttpsConfig"></PriorCheckbox>
			<tbody v-show="redirectToHttpsConfig.isPrior">
			<tr>
				<td class="title">自动跳转到HTTPS</td>
				<td>
					<TCheckboxBinary v-model="redirectToHttpsConfig.isOn">{{ redirectToHttpsConfig.isOn ? '开启' : '关闭' }}</TCheckboxBinary>
					<p class="comment">开启后，所有HTTP的请求都会自动跳转到对应的HTTPS URL上，
						<MoreOptionsAngle @change="changeMoreOptions"></MoreOptionsAngle>
					</p>

					<!--  TODO 如果已经设置了特殊设置，需要在界面上显示 -->
					<table class="ui table definition" v-show="moreOptionsVisible">
						<tr>
							<td class="title">状态码</td>
							<td>
								<TSelect v-model="redirectToHttpsConfig.status">
									<TOption value="0">[使用默认]</TOption>
									<TOption v-for="option in statusOptions" :value="option.code">{{ option.code }} {{ option.text }}</TOption>
								</TSelect>
							</td>
						</tr>
						<tr>
							<td>域名或IP地址</td>
							<td>
								<TInputText type="text" name="host" v-model="redirectToHttpsConfig.host" class="w-full"/>
								<p class="comment">默认和用户正在访问的域名或IP地址一致。</p>
							</td>
						</tr>
						<tr>
							<td>端口</td>
							<td>
								<TInputText type="text" name="port" v-model="portString" maxlength="5" />
								<p class="comment">默认端口为443。</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>

		<!-- 非Location -->
		<div v-if="!vIsLocation">
			<TCheckboxBinary v-model="redirectToHttpsConfig.isOn"/>
			<p class="comment">开启后，所有HTTP的请求都会自动跳转到对应的HTTPS URL上，
				<MoreOptionsAngle @change="changeMoreOptions"></MoreOptionsAngle>
			</p>

			<!--  TODO 如果已经设置了特殊设置，需要在界面上显示 -->
			<table class="ui table definition" v-show="moreOptionsVisible">
				<tr>
					<td class="title">状态码</td>
					<td>
						<TSelect v-model="redirectToHttpsConfig.status">
							<TOption value="0">使用默认</TOption>
							<TOption v-for="option in statusOptions" :value="option.code">{{ option.code }} {{ option.text }}</TOption>
						</TSelect>
					</td>
				</tr>
				<tr>
					<td>跳转后域名或IP地址</td>
					<td>
						<TInputText type="text" name="host" v-model="redirectToHttpsConfig.host" class="w-full"/>
						<p class="comment small">默认和用户正在访问的域名或IP地址一致，不填写就表示使用当前的域名。</p>
					</td>
				</tr>
				<tr>
					<td>端口</td>
					<td>
						<TInputText type="text" name="port" v-model="portString" maxlength="5" style="width:6em"/>
						<p class="comment small">默认端口为443。</p>
					</td>
				</tr>
				<tr>
					<td>允许的域名</td>
					<td>
						<div style="margin-top: -0.5em; margin-bottom: -0.5em;">
							<DomainsBox :v-domains="redirectToHttpsConfig.onlyDomains" @change="changeOnlyDomains"></DomainsBox>
							<p class="comment small">如果填写了允许的域名，那么只有这些域名可以自动跳转。</p>
						</div>
					</td>
				</tr>
				<tr>
					<td>排除的域名</td>
					<td>
						<div style="margin-top: -0.5em; margin-bottom: -0.5em;">
							<DomainsBox :v-domains="redirectToHttpsConfig.exceptDomains" @change="changeExceptDomains"></DomainsBox>
							<p class="comment small">如果填写了排除的域名，那么这些域名将不跳转。</p>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<style scoped>
:deep(.p-inputtext),
:deep(.p-inputnumber),
:deep(.p-select) {
    border-radius: 4px;
    border-color: rgba(229, 232, 242, 1);
}
:deep(.p-inputtext:not(.w-full)),
:deep(.p-inputnumber:not(.w-full)),
:deep(.p-select:not(.w-full)) {
	width: 118px!important;
}
.ui.table .comment.small {
	font-weight: 400;
	font-size: 12px;
}
</style>
