<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 Menu from "../@menu.vue"
import ListTable from "@/components/common/ListTable.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import NavButtons from "@/components/common/NavButtons.vue";
import NavButton from "@/components/common/NavButton.vue";
import TColumn from "@/components/ui/TColumn.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu active-tab="group"></Menu>

	<NavButtons>
		<NavButton @click.prevent="ctx.createGroup" action-create>创建新分组</NavButton>
	</NavButtons>

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

	<div v-show="ctx.groups.length > 0">
		<ListTable :items="ctx.groups" @sort="ctx.sortTable">
			<TColumn row-reorder style="width:3em"></TColumn>
			<TColumn header="分组名称">
				<template #body="{data:group}">
					<a :href="'/servers/groups/group?groupId=' + group.id">{{ group.name }}</a>
				</template>
			</TColumn>
			<TColumn header="网站数量" class="value-column">
				<template #body="{data:group}">
					<a :href="'/servers?groupId=' + group.id" v-if="group.countServers > 0">{{ group.countServers }}</a>
					<span v-else class="disabled">0</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op">
				<template #body="{data:group}">
					<a :href="'/servers/groups/group?groupId=' + group.id">详情</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteGroup(group.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>

		<p v-if="ctx.groups.length > 0" class="comment flex items-center">可以拖动左侧的<i class="icon bars"></i>排序。
		</p>
	</div>
</template>

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