<script setup>

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

const props = defineProps(["modelValue", "v-parent-config"])

const {
	config,
	portString,
	timeoutSecondsString,
	countUpString,
	countDownString,
	portIsEditing,
	timeoutSecondsIsEditing,
	countUpIsEditing,
	countDownIsEditing,
	parentConfig
} = (function () {
	let config = props.modelValue
	if (config == null) {
		config = {
			isOn: false,
			port: 0,
			timeoutSeconds: 0,
			countUp: 0,
			countDown: 0
		}
	}

	let parentConfig = props.vParentConfig

	return {
		config: ref(config),
		portString: ref(config.port.toString()),
		timeoutSecondsString: ref(config.timeoutSeconds.toString()),
		countUpString: ref(config.countUp.toString()),
		countDownString: ref(config.countDown.toString()),

		portIsEditing: ref(config.port > 0),
		timeoutSecondsIsEditing: ref(config.timeoutSeconds > 0),
		countUpIsEditing: ref(config.countUp > 0),
		countDownIsEditing: ref(config.countDown > 0),

		parentConfig: ref(parentConfig)
	}
})()

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

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

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

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

</script>

<template>
	<div>
		<input type="hidden" name="recordHealthCheckJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">启用当前记录健康检查</td>
				<td>
					<TCheckboxBinary v-model="config.isOn"></TCheckboxBinary>
				</td>
			</tr>
			</tbody>
			<tbody v-show="config.isOn">
			<tr>
				<td>检测端口</td>
				<td>
					<span v-if="!portIsEditing" class="grey">
						默认{{ parentConfig.port }}
						&nbsp; <a href="" @click.prevent="portIsEditing = true; portString = parentConfig.port">[修改]</a>
					</span>
					<div v-show="portIsEditing">
						<div style="margin-bottom: 0.5em">
							<a href="" @click.prevent="portIsEditing = false; portString = '0'">[使用默认]</a>
						</div>
						<TInputText type="text" v-model="portString" maxlength="5" style="width: 5em"/>
						<p class="comment">通过尝试连接A/AAAA记录中的IP加此端口来确定当前记录是否健康。</p>
					</div>
				</td>
			</tr>
			<tr>
				<td>超时时间</td>
				<td>
					<span v-if="!timeoutSecondsIsEditing" class="grey">
						默认{{ parentConfig.timeoutSeconds }}秒
						&nbsp; <a href="" @click.prevent="timeoutSecondsIsEditing = true; timeoutSecondsString = parentConfig.timeoutSeconds">[修改]</a>
					</span>
					<div v-show="timeoutSecondsIsEditing">
						<div style="margin-bottom: 0.5em">
							<a href="" @click.prevent="timeoutSecondsIsEditing = false; timeoutSecondsString = '0'">[使用默认]</a>
						</div>
						<TInputGroup>
							<TInputText type="text" style="width: 4em" v-model="timeoutSecondsString" maxlength="3"/>
							<TInputGroupAddon>
								<span>秒</span>
							</TInputGroupAddon>
						</TInputGroup>
					</div>
				</td>
			</tr>
			<tr>
				<td>默认连续上线次数</td>
				<td>
					<span v-if="!countUpIsEditing" class="grey">
						默认{{ parentConfig.countUp }}次
						&nbsp; <a href="" @click.prevent="countUpIsEditing = true; countUpString = parentConfig.countUp">[修改]</a>
					</span>
					<div v-show="countUpIsEditing">
						<div style="margin-bottom: 0.5em">
							<a href="" @click.prevent="countUpIsEditing = false; countUpString = '0'">[使用默认]</a>
						</div>
						<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>
					</div>
				</td>
			</tr>
			<tr>
				<td>默认连续下线次数</td>
				<td>
					<span v-if="!countDownIsEditing" class="grey">
						默认{{ parentConfig.countDown }}次
						&nbsp; <a href="" @click.prevent="countDownIsEditing = true; countDownString = parentConfig.countDown">[修改]</a>
					</span>
					<div v-show="countDownIsEditing">
						<div style="margin-bottom: 0.5em">
							<a href="" @click.prevent="countDownIsEditing = false; countDownString = '0'">[使用默认]</a>
						</div>
						<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>
					</div>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div class="margin"></div>
	</div>
</template>

<style scoped lang="postcss">

</style>