<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref} from "vue"
import "@/configs/definitions.js"
import TDivider from "@/components/ui/TDivider.vue";
import TLabel from "@/components/ui/TLabel.vue";
import PlusButton from "@/components/common/PlusButton.vue";

const utils = useUtils()

const props = defineProps(["v-rules", "v-type", "connector"])

const {rules} = (function () {
	let rules = props.vRules
	if (rules == null) {
		rules = []
	}
	return {
		rules: ref(rules)
	}
})()

const addRule = function () {
	window.UPDATING_RULE = null
	utils.popup("/servers/components/waf/createRulePopup?type=" + props.vType, {
		width: "60em",
		height: "50em",
		callback: function (resp) {
			rules.value.push(resp.data.rule)
		}
	})
}

const updateRule = function (index, rule) {
	window.UPDATING_RULE = utils.clone(rule)
	utils.popup("/servers/components/waf/createRulePopup?type=" + props.vType, {
		width: "60em",
		height: "50em",
		callback: function (resp) {
			rules.value [index] = resp.data.rule
		}
	})
}

const removeRule = function (index) {
	utils.confirm("确定要删除此规则吗？", function () {
		rules.value.$remove(index)
	})
}

const operatorName = function (operatorCode) {
	let operatorName = operatorCode
	if (typeof (window.WAF_RULE_OPERATORS) != null) {
		window.WAF_RULE_OPERATORS.forEach(function (v) {
			if (v.code == operatorCode) {
				operatorName = v.name
			}
		})
	}

	return operatorName
}

const operatorDescription = function (operatorCode) {
	let operatorName = operatorCode
	let operatorDescription = ""
	if (typeof (window.WAF_RULE_OPERATORS) != null) {
		window.WAF_RULE_OPERATORS.forEach(function (v) {
			if (v.code == operatorCode) {
				operatorName = v.name
				operatorDescription = v.description
			}
		})
	}

	return operatorName + ": " + operatorDescription
}

const operatorDataType = function (operatorCode) {
	let operatorDataType = "none"
	if (typeof (window.WAF_RULE_OPERATORS) != null) {
		window.WAF_RULE_OPERATORS.forEach(function (v) {
			if (v.code == operatorCode) {
				operatorDataType = v.dataType
			}
		})
	}

	return operatorDataType
}

const calculateParamName = function (param) {
	let paramName = ""
	if (param != null) {
		window.WAF_RULE_CHECKPOINTS.forEach(function (checkpoint) {
			if (param == "${" + checkpoint.prefix + "}" || param.startsWith("${" + checkpoint.prefix + ".")) {
				paramName = checkpoint.name
			}
		})
	}
	return paramName
}

const calculateParamDescription = function (param) {
	let paramName = ""
	let paramDescription = ""
	if (param != null) {
		window.WAF_RULE_CHECKPOINTS.forEach(function (checkpoint) {
			if (param == "${" + checkpoint.prefix + "}" || param.startsWith("${" + checkpoint.prefix + ".")) {
				paramName = checkpoint.name
				paramDescription = checkpoint.description
			}
		})
	}
	return paramName + ": " + paramDescription
}

const isEmptyString = function (v) {
	return typeof v == "string" && v.length == 0
}

</script>

<template>
	<div>
		<input type="hidden" name="rulesJSON" :value="JSON.stringify(rules)"/>
		<div v-if="rules.length > 0" class="label-group">
			<template v-for="(rule, index) in rules">
				<TLabel outlined="">
					{{ rule.name }}
					<span :title="calculateParamDescription(rule.param)" class="hover">{{ calculateParamName(rule.param) }}&nbsp;<span class="small grey"> {{ rule.param }}</span>&nbsp;</span>

					<!-- cc -->
					<span v-if="rule.param == '\${cc}'">
					{{ rule.checkpointOptions.period }}秒内请求数
				</span>

					<!-- refererBlock -->
					<span v-if="rule.param == '\${refererBlock}'">
					<span v-if="rule.checkpointOptions.allowDomains != null && rule.checkpointOptions.allowDomains.length > 0">允许{{ rule.checkpointOptions.allowDomains }}</span>
					<span v-if="rule.checkpointOptions.denyDomains != null && rule.checkpointOptions.denyDomains.length > 0">禁止{{ rule.checkpointOptions.denyDomains }}</span>
				</span>

					<span v-else>
					<span v-if="rule.paramFilters != null && rule.paramFilters.length > 0" v-for="paramFilter in rule.paramFilters"> | {{ paramFilter.code }}</span> <span class="hover" :title="operatorDescription(rule.operator) + ((!rule.isComposed && rule.isCaseInsensitive) ? '\\n[大小写不敏感] ':'')">&lt;{{ operatorName(rule.operator) }}&gt;</span>&nbsp;
						<span v-if="!isEmptyString(rule.value)" class="hover">{{ rule.value }}</span>
						<span v-else-if="operatorDataType(rule.operator) != 'none'" class="disabled" style="font-weight: normal" title="空字符串">[空]</span>
				</span>

					<!-- description -->
					<span v-if="rule.description != null && rule.description.length > 0" class="grey small">（{{ rule.description }}）</span>

					&nbsp;
					<a href="" title="修改" @click.prevent="updateRule(index, rule)"><i class="icon pencil small"></i></a>&nbsp;
					<a href="" title="删除" @click.prevent="removeRule(index)"><i class="icon remove"></i></a>
				</TLabel>

				<template v-if="index != rules.length - 1">
					<TLabel v-if="connector == 'and'" v-tooltip.bottom="'规则之间关系-和：\n所有规则都满足才视为匹配'">和</TLabel>
					<TLabel v-if="connector == 'or'" v-tooltip.bottom="'规则之间关系-或：\n任一规则满足了就视为匹配'">或</TLabel>
				</template>
			</template>
			<TDivider></TDivider>
		</div>
		<PlusButton size="small" type="button" @click.prevent="addRule()"></PlusButton>
	</div>
</template>

<style scoped>
</style>
