<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./createSetPopup.js"
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import PostForm from "@/components/form/PostForm.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import TMessage from "@/components/ui/TMessage.vue";
import {ref} from "vue";
import HTTPFirewallRulesBox from "@/components/server/HTTPFirewallRulesBox.vue";
import HTTPFirewallActionsBox from "@/components/server/HTTPFirewallActionsBox.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const codeInput = ref()
const ctx = ctxRef(new Context(), {
	refs: {codeInput}
})

</script>

<template>
	<PopupLayout>

		<header>添加规则集</header>

		<TMessage class="mt-2 mb-4" v-if="ctx.isGlobalPolicy">当前设置的规则集为WAF策略的规则集，将会应用于对应集群已经启用WAF的网站；如果你只是想设置某个网站相关的规则集，请到对应网站WAF功能中设置。</TMessage>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="groupId" :value="ctx.groupId"/>
			<input type="hidden" name="formType" :value="ctx.useCode ? 'code' : 'normal'"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">规则集名称 *</td>
					<td>
						<TInputText type="text" name="name" maxlength="100" class="w-full" autofocus/>
						<p class="comment">可以用来描述当前规则集用途。<a href="" @click.prevent="ctx.switchToCode"><span v-if="!ctx.useCode">[使用代码]</span><span v-else>[切换到常规表单]</span></a>
						</p>
					</td>
				</tr>
				</tbody>

				<!-- usual form -->
				<tbody v-show="!ctx.useCode">
				<tr>
					<td>规则 *</td>
					<td>
						<HTTPFirewallRulesBox :v-rules="ctx.rules" :v-type="ctx.type" :connector="ctx.selectedConnector"></HTTPFirewallRulesBox>
					</td>
				</tr>
				<tr v-show="ctx.rules.length > 1">
					<td>规则之间的关系 *</td>
					<td>
						<TSelect name="connector" @change="ctx.changeConnector()" v-model="ctx.selectedConnector">
							<TOption v-for="connector in ctx.connectors" :value="connector.value">{{ connector.name }}</TOption>
						</TSelect>
						<p class="comment">{{ ctx.selectedConnectorDescription }}</p>
					</td>
				</tr>
				<tr>
					<td>执行动作 *</td>
					<td>
						<HTTPFirewallActionsBox :v-actions="ctx.actions" :v-firewall-policy="ctx.firewallPolicy" :v-group-type="ctx.type"></HTTPFirewallActionsBox>
					</td>
				</tr>
				<tr>
					<td colspan="2"><MoreOptionsIndicator></MoreOptionsIndicator></td>
				</tr>
				<tr v-show="ctx.moreOptionsVisible">
					<td>允许局域网IP</td>
					<td>
						<TCheckboxBinary name="ignoreLocal"></TCheckboxBinary>
						<p class="comment">选中后，表示如果请求来自局域网IP，则直接跳过当前规则集。</p>
					</td>
				</tr>
				<tr v-show="ctx.moreOptionsVisible">
					<td>允许搜索引擎</td>
					<td>
						<TCheckboxBinary name="ignoreSearchEngine"></TCheckboxBinary>
						<p class="comment">选中后，表示如果请求来自常见搜索引擎的IP，则直接跳过当前规则集。</p>
					</td>
				</tr>
				</tbody>

				<!-- code form -->
				<tbody v-show="ctx.useCode">
				<tr>
					<td>规则集代码 *</td>
					<td>
						<TTextarea name="code" ref="codeInput" placeholder="{ ... 规则集代码  ... }" rows="20" class="w-full"></TTextarea>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

<style lang="postcss" scoped>
</style>