<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./provinces.js"
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import PostForm from "@/components/form/PostForm.vue";
import HTTPFirewallProvinceSelector from "@/components/server/HTTPFirewallProvinceSelector.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import Menu from "../@menu.vue"
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ServerSettingLayout :ctx="ctx">
		<Menu :ctx="ctx" active-tab="province"></Menu>

		<div v-if="!ctx.featureIsOn">
			<ServerFeatureRequired></ServerFeatureRequired>
		</div>

		<div v-if="ctx.featureIsOn">
			<WarningMessage disable-spacing v-if="!ctx.wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + ctx.serverId">[启用Web防火墙]</a>后生效。
			</WarningMessage>
			<WarningMessage v-if="ctx.clusterFirewallPolicy != null && ctx.clusterFirewallPolicy.mode != 'defend'">当前网站所在集群的WAF策略模式为
				<span v-if="ctx.clusterFirewallPolicy.modeInfo != null"><strong>{{ ctx.clusterFirewallPolicy.modeInfo.name }}</strong></span>
				<span v-else>非防御模式</span>，当前设置将不会生效。
			</WarningMessage>

			<PostForm action="$" @success="ctx.success">
				<input type="hidden" name="firewallPolicyId" :value="ctx.firewallPolicyId"/>
				<input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(ctx.exceptURLPatterns)"/>
				<input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(ctx.onlyURLPatterns)"/>
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">仅允许的省份</td>
						<td>
							<HTTPFirewallProvinceSelector :v-provinces="ctx.allowedProvinces" :v-type="'allow'" @change="ctx.changeAllowedProvinces"></HTTPFirewallProvinceSelector>
						</td>
					</tr>
					<tr>
						<td class="title">仅封禁的省份</td>
						<td>
							<p class="comment" v-if="ctx.allowedProvinces.length > 0">由于你已设置"仅允许的省份"，所以不需要再设置封禁省份。</p>
							<HTTPFirewallProvinceSelector :v-provinces="ctx.deniedProvinces" :v-type="'deny'" v-show="ctx.allowedProvinces.length == 0"></HTTPFirewallProvinceSelector>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<MoreOptionsIndicator></MoreOptionsIndicator>
						</td>
					</tr>
					</tbody>
					<tbody v-show="ctx.moreOptionsVisible">
					<tr>
						<td>例外URL &nbsp;<TipIcon content="对这些URL将不做任何限制。"></TipIcon>
						</td>
						<td>
							<URLPatternsBox v-model="ctx.exceptURLPatterns"></URLPatternsBox>
						</td>
					</tr>
					<tr>
						<td>限制URL &nbsp;<TipIcon content="只对这些URL做限制。"></TipIcon>
						</td>
						<td>
							<URLPatternsBox v-model="ctx.onlyURLPatterns"></URLPatternsBox>
						</td>
					</tr>
					<tr>
						<td>提示内容</td>
						<td>
							<TTextarea v-model="ctx.provinceHTML" name="provinceHTML" rows="3" class="w-full"></TTextarea>
							<p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>
				<SubmitButton></SubmitButton>
			</PostForm>
		</div>
	</ServerSettingLayout>
</template>

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