<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 "./greyList.js"
import Menu from "@/views/servers/server/settings/waf/@menu.vue";
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import SecondMenu from "@/components/common/SecondMenu.vue";
import MenuItem from "@/components/common/MenuItem.vue";
import Pager from "@/components/common/Pager.vue";
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import IPListTable from "@/components/iplist/IPListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

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

		<div v-if="ctx.featureIsOn">
			<SecondMenu>
				<MenuItem @click.prevent="ctx.createIP('grey')">添加IP</MenuItem>
				<span class="item">|</span>
				<span class="item flex items-center">ID: {{ ctx.listId }} &nbsp; <TipIcon content="ID可以用于使用API操作此IP名单；灰名单中的IP仅作为记录和观察使用，不影响黑名单和白名单的作用。" class="flex"></TipIcon></span>
			</SecondMenu>

			<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-can-update="true"></IPListTable>

			<Pager :data="ctx.page"></Pager>
		</div>
		<div v-if="!ctx.featureIsOn">
			<ServerFeatureRequired></ServerFeatureRequired>
		</div>
	</ServerSettingLayout>
</template>

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