<script setup>

import {ref, watch} from "vue"
import TOption from "@/components/ui/TOption.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TSelect from "@/components/ui/TSelect.vue";
import MoreOptionsTbody from "@/components/common/MoreOptionsTbody.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import "@/configs/definitions.js"
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-firewall-config", "v-is-location", "v-is-group", "v-firewall-policy"])

const {firewall, moreOptionsVisible, execGlobalRules, captchaTypes, geeTestIsOn} = (function () {
	let firewall = props.vFirewallConfig
	if (firewall == null) {
		firewall = {
			isPrior: false,
			isOn: false,
			firewallPolicyId: 0,
			ignoreGlobalRules: false,
			defaultCaptchaType: "none"
		}
	}

	if (firewall.defaultCaptchaType == null || firewall.defaultCaptchaType.length == 0) {
		firewall.defaultCaptchaType = "none"
	}

	let allCaptchaTypes = window.WAF_CAPTCHA_TYPES.$copy()

	// geetest
	let geeTestIsOn = false
	if (props.vFirewallPolicy != null && props.vFirewallPolicy.captchaAction != null && props.vFirewallPolicy.captchaAction.geeTestConfig != null) {
		geeTestIsOn = props.vFirewallPolicy.captchaAction.geeTestConfig.isOn
	}

	// 如果没有启用geetest，则还原
	if (!geeTestIsOn && firewall.defaultCaptchaType == "geetest") {
		firewall.defaultCaptchaType = "none"
	}

	return {
		firewall: ref(firewall),
		moreOptionsVisible: ref(false),
		execGlobalRules: ref(!firewall.ignoreGlobalRules),
		captchaTypes: ref(allCaptchaTypes),
		geeTestIsOn: ref(geeTestIsOn)
	}
})()

const changeOptionsVisible = function (v) {
	moreOptionsVisible.value = v
}

watch(execGlobalRules, function (v) {
	firewall.value.ignoreGlobalRules = !v
})

</script>

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

		<DefinitionTable>
			<PriorCheckbox :v-config="firewall" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="(!vIsLocation && !vIsGroup) || firewall.isPrior">
			<tr>
				<td class="title">启用Web防火墙</td>
				<td>
					<TCheckboxBinary v-model="firewall.isOn"></TCheckboxBinary>
					<p class="comment">选中后，表示启用当前网站的WAF功能。</p>
				</td>
			</tr>
			</tbody>
			<MoreOptionsTbody @change="changeOptionsVisible" v-show="firewall.isOn"></MoreOptionsTbody>
			<tbody v-show="moreOptionsVisible">
			<tr>
				<td>人机识别验证方式</td>
				<td>
					<TSelect v-model="firewall.defaultCaptchaType">
						<TOption value="none">默认</TOption>
						<template v-for="captchaType in captchaTypes">
							<TOption v-if="captchaType.code != 'geetest' || geeTestIsOn" :value="captchaType.code">{{ captchaType.name }}</TOption>
						</template>
					</TSelect>
					<p class="comment" v-if="firewall.defaultCaptchaType == 'none'">使用系统默认的设置。你需要在入站规则中添加规则集来决定哪些请求需要人机识别验证。</p>
					<template v-for="captchaType in captchaTypes">
						<p class="comment" v-if="captchaType.code == firewall.defaultCaptchaType">{{ captchaType.description }}你需要在入站规则中添加规则集来决定哪些请求需要人机识别验证。</p>
					</template>
				</td>
			</tr>
			<tr>
				<td>启用系统全局规则</td>
				<td>
					<TCheckboxBinary v-model="execGlobalRules"></TCheckboxBinary>
					<p class="comment">选中后，表示使用系统全局WAF策略中定义的规则。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div class="margin"></div>
	</div>
</template>

<style scoped>
</style>
