<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 "./test.js"
import Menu from "@/views/servers/server/settings/waf/@menu.vue";
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import PostForm from "@/components/form/PostForm.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import IPItemText from "@/components/iplist/IPItemText.vue";
import TInputText from "@/components/ui/TInputText.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

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

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

		<div v-if="ctx.featureIsOn">
			<WarningMessage v-if="!ctx.wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + ctx.serverId">[启用Web防火墙]</a>后生效。
			</WarningMessage>

			<PostForm action="$" @success="ctx.success">
				<input type="hidden" name="firewallPolicyId" :value="ctx.firewallPolicyId"/>
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">IP *</td>
						<td>
							<TInputText name="ip" type="text" maxlength="100" autofocus placeholder="x.x.x.x" v-model="ctx.ip" class="w-full"/>
							<p class="comment">要检查的IP</p>
						</td>
					</tr>
					<tr>
						<td>检查结果</td>
						<td>
							<div v-if="ctx.result.isDone">
								<div v-if="!ctx.result.isOk">
									<span class="red">{{ ctx.result.error }}</span>
								</div>
								<div v-if="ctx.result.isFound">
									<div v-if="ctx.result.item != null">
										<div v-if="ctx.result.isAllowed">
											<span class="green" v-if="ctx.result.item.listType == 'white'">在白名单中 <IPItemText :v-item="ctx.result.item"></IPItemText>&nbsp;<a href="" @click.prevent="ctx.updateItem(ctx.result.list.id, ctx.result.item.id)" title="查看和修改"><i class="icon pencil small"></i></a></span>
											<span class="grey" v-if="ctx.result.item.listType == 'grey'">在灰名单中 <IPItemText :v-item="ctx.result.item"></IPItemText>&nbsp;<a href="" @click.prevent="ctx.updateItem(ctx.result.list.id, ctx.result.item.id)" title="查看和修改"><i class="icon pencil small"></i></a></span>
										</div>
										<div v-else>
											<span class="red">在黑名单中 <IPItemText :v-item="ctx.result.item"></IPItemText>&nbsp;<a href="" @click.prevent="ctx.updateItem(ctx.result.list.id, ctx.result.item.id)" title="查看和修改"><i class="icon pencil small"></i></a></span>
										</div>
									</div>
									<div v-if="ctx.result.province != null">
										<span class="red">在省份封禁中 "{{ ctx.result.province.name }}"</span>
									</div>
									<div v-if="ctx.result.country != null && ctx.result.province == null">
										<span class="red">在国家/地区封禁中 "{{ ctx.result.country.name }}"</span>
									</div>
								</div>
								<div v-if="!ctx.result.isFound">
									没有找到和{{ ctx.ip }}匹配的配置。
								</div>
							</div>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>
				<SubmitButton>检查IP状态</SubmitButton>
			</PostForm>
		</div>
	</ServerSettingLayout>
</template>

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