<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 "./group.js"
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import Menu from "./@menu.vue"
import LabelOn from "@/components/common/LabelOn.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import HTTPFirewallRuleLabel from "@/components/server/HTTPFirewallRuleLabel.vue";
import HTTPFirewallActionsView from "@/components/server/HTTPFirewallActionsView.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

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

		<h5 class="mb-4">{{ ctx.group.name }}<a href="" @click.prevent="ctx.updateGroup(ctx.group.id)">[修改]</a></h5>
		<CardView>
			<CardRow>
				<template #name>名称</template>
				<template #value>{{ ctx.group.name }}</template>
			</CardRow>
			<CardRow>
				<template #name>描述</template>
				<template #value>
					<span v-if="ctx.group.description.length == 0" class="disabled">暂时还没有描述。</span>
					<span v-if="ctx.group.description.length > 0">{{ ctx.group.description }}</span>
				</template>
			</CardRow>
			<CardRow>
				<template #name>启用状态</template>
				<template #value>
					<LabelOn :v-is-on="ctx.group.isOn"></LabelOn>
				</template>
			</CardRow>
		</CardView>

		<h5 class="group-header">规则集<a href="" @click.prevent="ctx.createSet(ctx.group.id)">[添加规则集]</a>
		</h5>
		<NotFoundInfo v-if="ctx.sets == null || ctx.sets.length == 0">暂时还没有规则。</NotFoundInfo>

		<div v-if="ctx.sets != null && ctx.sets.length > 0">
			<ListTable :items="ctx.sets" @sort="ctx.sortTable">
				<Column rowReorder headerStyle="width: 3em" frozen></Column>
				<Column header="规则集名称" class="name-column" frozen>
					<template #body="{data:set}">
						<a :data-set-id="set.id"></a>
						<a :name="'set' + set.id"></a><a href="" @click.prevent="ctx.updateSet(set.id)"><span :class="{disabled:!set.isOn}">{{ set.name }}</span>&nbsp;
						<i class="pi pi-expand small"></i></a>
						<p style="margin-top:0.5em">
							<LabelOn :v-is-on="set.isOn"></LabelOn>
						</p>
					</template>
				</Column>
				<Column header="规则" style="min-width: 24em">
					<template #body="{data:set}">
						<div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
							<HTTPFirewallRuleLabel :v-rule="rule"></HTTPFirewallRuleLabel>
						</div>
						<span class="ui disabled" v-if="set.rules.length == 0">暂时还没有规则</span>
					</template>
				</Column>
				<Column class="fixed-value-column text-center">
					<template #header>
						<div class="flex items-center gap-2 justify-center whitespace-nowrap">
							规则关系
							<TipIcon content="规则关系指的是<strong>单个规则集</strong>中的各个规则之间的关系，如果是“和(AND)”表示所有规则都必须满足条件，如果是“或(OR)”表示任一规则满足条件即可。<br/><br/>多个规则集之间没有任何关系，满足任一个规则集即停止向下匹配。"></TipIcon>
						</div>
					</template>
					<template #body="{data:set}">
    					<span v-if="set.rules != null && set.rules.length > 1">
                        	<span v-if="set.connector.toUpperCase() == 'OR'">或</span><span v-else>和</span>
                        	<span class="small grey">({{ set.connector.toUpperCase() }})</span>
                    	</span>
						<span v-else class="disabled">-</span>
					</template>
				</Column>
				<Column header="动作" class="whitespace-nowrap">
					<template #body="{data:set}">
						<HTTPFirewallActionsView :v-actions="set.actions"></HTTPFirewallActionsView>
					</template>
				</Column>
				<Column header="操作" headerClass="four op" frozen align-frozen="right">
					<template #body="{data:set}">
						<a href="" @click.prevent="ctx.updateSet(set.id)">修改</a> &nbsp;
						<a href="" @click.prevent="ctx.updateSetOn(set.id, false)" v-if="set.isOn">停用</a><a href="" @click.prevent="ctx.updateSetOn(set.id, true)" v-if="!set.isOn"><span class="red">启用</span></a> &nbsp;
						<a href="" @click.prevent="ctx.showSetCode(set.id)">代码</a> &nbsp;
						<a href="" @click.prevent="ctx.deleteSet(set.id)">删除</a>
					</template>
				</Column>
			</ListTable>

			<p class="comment flex items-center" v-if="ctx.group.sets != null && ctx.group.sets.length > 1">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。
			</p>
		</div>
	</ServerSettingLayout>
</template>

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