<script setup>
import {ref, watch} from "vue";
import TInputText from "@/components/ui/TInputText.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["modelValue"])

const {config, portString, timeoutSecondsString, countUpString, countDownString} = (function () {
	let config = props.modelValue
	if (config == null) {
		config = {
			isOn: false,
			port: 80,
			timeoutSeconds: 5,
			countUp: 1,
			countDown: 3
		}
	}
	return {
		config: ref(config),
		portString: ref(config.port.toString()),
		timeoutSecondsString: ref(config.timeoutSeconds.toString()),
		countUpString: ref(config.countUp.toString()),
		countDownString: ref(config.countDown.toString())
	}
})()

watch(portString, function (value) {
	let port = parseInt(value.toString())
	if (isNaN(port) || port > 65535 || port < 1) {
		config.value.port = 80
	} else {
		config.value.port = port
	}
})

watch(timeoutSecondsString, function (value) {
	let timeoutSeconds = parseInt(value.toString())
	if (isNaN(timeoutSeconds) || timeoutSeconds > 1000 || timeoutSeconds < 1) {
		config.value.timeoutSeconds = 5
	} else {
		config.value.timeoutSeconds = timeoutSeconds
	}
})

watch(countUpString, function (value) {
	let countUp = parseInt(value.toString())
	if (isNaN(countUp) || countUp > 1000 || countUp < 1) {
		config.value.countUp = 1
	} else {
		config.value.countUp = countUp
	}
})

watch(countDownString, function (value) {
	let countDown = parseInt(value.toString())
	if (isNaN(countDown) || countDown > 1000 || countDown < 1) {
		config.value.countDown = 3
	} else {
		config.value.countDown = countDown
	}
})
</script>

<template>
	<div>
		<input type="hidden" name="recordsHealthCheckJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">启用健康检查</td>
				<td>
					<TCheckboxBinary v-model="config.isOn"></TCheckboxBinary>
					<p class="comment">选中后，表示启用当前域名下A/AAAA记录的健康检查；启用此设置后，你仍需设置单个A/AAAA记录的健康检查。</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="config.isOn">
			<tr>
				<td>默认检测端口</td>
				<td>
					<TInputText type="text" v-model="portString" maxlength="5" style="width: 5em"/>
					<p class="comment">通过尝试连接A/AAAA记录中的IP加此端口来确定当前记录是否健康。</p>
				</td>
			</tr>
			<tr>
				<td>默认超时时间</td>
				<td>
					<TInputGroup>
						<TInputText type="text" style="width: 4em" v-model="timeoutSecondsString" maxlength="3"/>
						<TInputGroupAddon>
							<span>秒</span>
						</TInputGroupAddon>
					</TInputGroup>
				</td>
			</tr>
			<tr>
				<td>默认连续上线次数</td>
				<td>
					<TInputGroup>
						<TInputText type="text" style="width: 4em" v-model="countUpString" maxlength="3"/>
						<TInputGroupAddon>
							<span>次</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">连续检测<span v-if="config.countUp > 0">{{ config.countUp }}</span><span v-else>N</span>次成功后，认为当前记录是在线的。
					</p>
				</td>
			</tr>
			<tr>
				<td>默认连续下线次数</td>
				<td>
					<TInputGroup>
						<TInputText type="text" style="width: 4em" v-model="countDownString" maxlength="3"/>
						<TInputGroupAddon>
							<span>次</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">连续检测<span v-if="config.countDown > 0">{{ config.countDown }}</span><span v-else>N</span>次失败后，认为当前记录是离线的。
					</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped lang="postcss">

</style>