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

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header>修改规则集</header>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="setId" :value="ctx.setConfig.id"/>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">规则集名称 *</td>
					<td>
						<TInputText type="text" name="name" maxlength="100" class="w-full" autofocus v-model="ctx.setConfig.name"/>
						<p class="comment">可以用来描述当前规则集用途。</p>
					</td>
				</tr>
				<tr>
					<td>规则 *</td>
					<td style="word-break: break-word">
						<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-action-configs="ctx.actionConfigs" :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" v-model="ctx.setConfig.ignoreLocal"></TCheckboxBinary>
						<p class="comment">选中后表示如果请求来自局域网IP，则直接跳过当前规则集。</p>
					</td>
				</tr>
				<tr v-show="ctx.moreOptionsVisible">
					<td>允许搜索引擎</td>
					<td>
						<TCheckboxBinary name="ignoreSearchEngine" v-model="ctx.setConfig.ignoreSearchEngine"></TCheckboxBinary>
						<p class="comment">选中后，表示如果请求来自常见搜索引擎的IP，则直接跳过当前规则集。</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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