<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 "./index.js"
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TButton from "@/components/ui/TButton.vue";
import Pager from "@/components/common/Pager.vue";
import IPListTable from "@/components/iplist/IPListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import NavButton from "@/components/common/NavButton.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<form action="/waf/iplists" method="get" class="relative" v-show="!ctx.hasCheckedItems">
		<div class="ui fields inline">
			<div class="ui field">
				<TInputText name="keyword" placeholder="x.x.x.x" v-model="ctx.keyword"/>
			</div>
			<div class="ui field">
				<TSelect name="listType" v-model="ctx.listType">
					<TOption value="">[所有类型]</TOption>
					<TOption value="black">黑名单</TOption>
					<TOption value="white">白名单</TOption>
					<TOption value="grey">灰名单</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<TSelect name="eventLevel" v-model="ctx.eventLevel">
					<TOption value="">[所有级别]</TOption>
					<TOption v-for="level in ctx.eventLevels" :value="level.code">{{ level.name }}</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<div class="ui checkbox">
					<TCheckboxBinary name="globalOnly" value="1" v-model="ctx.globalOnly">系统自动拦截</TCheckboxBinary>
				</div>
			</div>
			<div class="ui field" v-if="ctx.countUnread > 0">
				<div class="ui checkbox">
					<TCheckboxBinary name="unread" value="1" v-model="ctx.unread"><span class="red">New</span>
					</TCheckboxBinary>
				</div>
			</div>
			<div class="ui field">
				<TButton secondary="" type="submit">搜索</TButton>
				&nbsp;
				<a href="/waf/iplists" v-if="ctx.keyword.length > 0 || ctx.globalOnly || ctx.unread || ctx.eventLevel.length > 0">[清除条件]</a>
			</div>
			<div class="ui field" v-if="ctx.countUnread > 0">
				<span class="disabled">|</span>
			</div>
			<div class="ui field" v-if="ctx.countUnread > 0">
				<a href="" @click.prevent="ctx.readAllItems" title="消除未读标记New">[全部设为已读]</a>
			</div>
		</div>
		<div class="mt-4 xl:absolute xl:mt-0 xl:right-2 xl:top-0">
			<NavButton icon="pi pi-lock-open" @click.prevent="ctx.removeDeniedIP">快速解除黑名单</NavButton>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.items.length == 0">暂时还没有IP。</NotFoundInfo>

	<IPListTable v-if="ctx.items.length > 0" :v-items="ctx.items" @update-item="ctx.updateItem" @delete-item="ctx.deleteItem" @checked="ctx.checkItems" :v-keyword="ctx.keyword" :v-show-search-button="true"></IPListTable>

	<Pager :data="ctx.page"></Pager>
</template>

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