<script setup>

import {ref, watch} from "vue"
import TInputText from "@/components/ui/TInputText.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import HTTPRequestCondsBox from "@/components/server/HTTPRequestCondsBox.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.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(["v-uam-config", "v-is-location", "v-is-group"])

const {config, moreOptionsVisible, minQPSPerIP, keyLife} = (function () {
	let config = props.vUamConfig
	if (config == null) {
		config = {
			isPrior: false,
			isOn: false,
			addToWhiteList: true,
			onlyURLPatterns: [],
			exceptURLPatterns: [],
			minQPSPerIP: 0,
			keyLife: 0
		}
	}
	if (config.onlyURLPatterns == null) {
		config.onlyURLPatterns = []
	}
	if (config.exceptURLPatterns == null) {
		config.exceptURLPatterns = []
	}
	return {
		config: ref(config),
		moreOptionsVisible: ref(false),
		minQPSPerIP: ref(config.minQPSPerIP),
		keyLife: ref(config.keyLife)
	}
})()

const showMoreOptions = function () {
	moreOptionsVisible.value = !moreOptionsVisible.value
}

const changeConds = function (conds) {
	config.value.conds = conds
}

watch(minQPSPerIP, function (v) {
	let qps = parseInt(v.toString())
	if (isNaN(qps) || qps < 0) {
		qps = 0
	}
	config.value.minQPSPerIP = qps
})

watch(keyLife, function (v) {
	let keyLife = parseInt(v)
	if (isNaN(keyLife) || keyLife <= 0) {
		keyLife = 0
	}
	config.value.keyLife = keyLife
})

</script>

<template>
	<div class="uam-config-box">
		<input type="hidden" name="uamJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="config" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="((!vIsLocation && !vIsGroup) || config.isPrior)">
			<tr>
				<td class="title">启用5秒盾</td>
				<td>
					<TCheckboxBinary v-model="config.isOn">{{ config.isOn ?'开启':'关闭' }}</TCheckboxBinary>
					<p class="comment">
						启用后，访问网站时，自动检查浏览器环境，阻止非正常访问。
					</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="config.isOn">
			<tr>
				<td colspan="2" style="height: 30px; padding-top: 4px; padding-bottom: 4px;">
					<MoreOptionsIndicator @change="showMoreOptions"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="moreOptionsVisible && config.isOn">
			<tr>
				<td>验证有效期</td>
				<td>
					<TInputGroup>
						<TInputText type="text" name="keyLife" v-model="keyLife" maxlength="6" size="6" style="width: 118px"/>
						<TInputGroupAddon>
							<span>秒</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">单个客户端验证通过后，在这个有效期内不再重复验证；如果为0则表示系统默认。</p>
				</td>
			</tr>
			<tr>
				<td>单IP最低QPS</td>
				<td>
					<TInputGroup>
						<TInputText type="text" name="minQPSPerIP" maxlength="6" style="width: 118px" v-model="minQPSPerIP"/>
						<TInputGroupAddon>
							<span>请求数/秒</span>
						</TInputGroupAddon>
					</TInputGroup>
					<p class="comment">当某个IP在1分钟内平均QPS达到此值时，才会触发5秒盾；如果设置为0，表示任何访问都会触发。</p>
				</td>
			</tr>
			<tr>
				<td>加入IP白名单</td>
				<td>
					<TCheckboxBinary v-model="config.addToWhiteList">{{ config.addToWhiteList ?'开启':'关闭' }}</TCheckboxBinary>
					<p class="comment">选中后，表示验证通过后，将访问者IP加入到临时白名单中，此IP下次访问时不再校验5秒盾；此白名单只对5秒盾有效，不影响其他规则。此选项主要用于可能无法正常使用Cookie的网站。</p>
				</td>
			</tr>
			<tr>
				<td>例外URL</td>
				<td class="bg-white dark:bg-black">
					<div>
						<URLPatternsBox v-model="config.exceptURLPatterns"></URLPatternsBox>
					</div>
					<p class="comment">如果填写了例外URL，表示这些URL跳过5秒盾不做处理。</p>
				</td>
			</tr>
			<tr>
				<td>限制URL</td>
				<td class="bg-white dark:bg-black">
					<div>
						<URLPatternsBox v-model="config.onlyURLPatterns"></URLPatternsBox>
					</div>
					<p class="comment">如果填写了限制URL，表示只对这些URL进行5秒盾处理；如果不填则表示支持所有的URL。</p>
				</td>
			</tr>
			<tr>
				<td>匹配条件</td>
				<td class="bg-white dark:bg-black">
					<HTTPRequestCondsBox :v-conds="config.conds" @change="changeConds"></HTTPRequestCondsBox>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
.uam-config-box {
    margin-top: 14px;
    font-family: Source Han Sans SC;
}

.comment {
	margin-bottom: 0;
	color: rgba(101, 112, 128, 1);
	font-weight: 400;
	font-size: 14px;
	line-height: 14px;
}
</style>
