<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 "./items.js"
import ListMenu from "@/views/waf/iplists/@list_menu.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import IPListTable from "@/components/iplist/IPListTable.vue";
import Pager from "@/components/common/Pager.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<ListMenu :ctx="ctx" active-tab="item"></ListMenu>

	<form action="/waf/iplists/items">
		<input type="hidden" name="listId" :value="ctx.list.id"/>
		<div class="ui fields inline">
			<div class="ui field">
				<TInputText size="20" placeholder="x.x.x.x" name="keyword" v-model="ctx.keyword"/>
			</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">
				<TButton secondary="" type="submit">搜索</TButton>
				&nbsp;
				<a :href="'/waf/iplists/items?listId=' + ctx.list.id" v-if="ctx.keyword.length > 0 || ctx.eventLevel.length > 0">[清除条件]</a>
			</div>
		</div>
		<div class="margin"></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" :v-keyword="ctx.keyword"></IPListTable>

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

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