<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 "./groups.js"
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import Menu from "@/views/servers/server/settings/waf/@menu.vue";
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import NavButtons from "@/components/common/NavButtons.vue";
import NavButton from "@/components/common/NavButton.vue";

const ctx = ctxRef(new Context())

</script>

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

		<div v-if="ctx.featureIsOn">
			<NavButtons>
				<NavButton @click.prevent="ctx.createGroup(ctx.type)" action-create>添加分组</NavButton>
			</NavButtons>

			<NotFoundInfo v-if="ctx.groups.length == 0">暂时还没有规则分组。</NotFoundInfo>

			<div v-if="ctx.groups.length > 0">
				<ListTable :items="ctx.groups" @sort="ctx.sortTable">
					<Column rowReorder headerStyle="width: 3em"></Column>
					<Column header="规则分组">
						<template #body="{data:group}">
							<a :href="'/servers/server/settings/waf/group?serverId=' + ctx.serverId + '&firewallPolicyId=' + ctx.firewallPolicyId + '&type=' + ctx.type + '&groupId=' + group.id"><span :class="{disabled:!group.isOn}">{{ group.name }}</span></a>
							<p class="comment" v-if="group.description.length > 0" style="padding-bottom:0">{{ group.description }}</p>
							<p class="label-group mt-1">
								<TinyBasicLabel v-if="group.isOn" class="green">启用</TinyBasicLabel>
								<TinyBasicLabel v-if="!group.isOn" class="red">停用</TinyBasicLabel>
								<TinyBasicLabel v-if="group.code.length > 0">预置</TinyBasicLabel>
								<TinyBasicLabel v-if="group.code.length == 0">自定义</TinyBasicLabel>
							</p>
						</template>
					</Column>
					<Column header="规则集" headerClass="text-center two wide" bodyClass="text-center">
						<template #body="{data:group}">
							<a :href="'/servers/server/settings/waf/group?serverId=' + ctx.serverId + '&firewallPolicyId=' + ctx.firewallPolicyId + '&type=' + ctx.type + '&groupId=' + group.id">{{ group.countSets }}</a>
						</template>
					</Column>
					<Column header="操作" headerClass="three op">
						<template #body="{data:group}">
							<a :href="'/servers/server/settings/waf/group?serverId=' + ctx.serverId + '&firewallPolicyId=' + ctx.firewallPolicyId + '&type=' + ctx.type + '&groupId=' + group.id">详情</a> &nbsp;
							<a href="" v-if="!group.isOn" @click.prevent="ctx.enableGroup(group.id)">启用</a><a href="" v-if="group.isOn" @click.prevent="ctx.disableGroup(group.id)">停用</a> &nbsp;
							<a href="" @click.prevent="ctx.deleteGroup(group.id)" v-if="group.canDelete">删除</a>
						</template>
					</Column>
				</ListTable>

				<p class="comment flex items-center">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。
				</p>
			</div>
		</div>

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

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