{$layout}

<first-menu>
	<menu-item href="/servers/groups" active="true">{{t("servers_groups_index@分组列表")}}</menu-item>
	<span class="separator">|</span>
	<a href="" class="item" @click.prevent="createGroup()">
		<i class="pi pi-pen-to-square"></i>
		{{t("servers_groups_index@创建")}}
	</a>
</first-menu>

<div class="">
	<div class="audit-message warning" v-if="groups.length == 0">
		<i class="icon warning circle"></i>
		{{t("servers_groups_index@暂时还没有分组")}}
	</div>
	<div class="margin"></div>
	<p class="comment" style="margin-top: 1rem;" v-if="groups.length > 0">
		<i class="icon info circle"></i>
		{{t("servers_groups_index@可以拖动左侧的排序")}}<i class="icon bars"></i>{{t("servers_groups_index@排序")}}
	</p>
	<div class="margin"></div>
	<b-sortable-table v-if="groups.length > 0" :columns="columns" :data-source="groups" row-key="id" :bordered="false" size="middle"
		:pagination="false" :on-sort="handleSort">
		<!-- 拖动把手 -->
		<template slot="handleSlot" slot-scope="{ text, record }">
			<i class="icon handle bars"></i>
		</template>

		<!-- 分组名称 -->
		<template slot="nameSlot" slot-scope="{ text, record }">
			<a :href="'/servers/groups/group?groupId=' + record.id">{{record.name}}</a>
		</template>

		<!-- 服务数量 -->
		<template slot="countSlot" slot-scope="{ text, record }">
			<a :href="'/servers?groupId=' + record.id" v-if="record.countServers > 0">{{record.countServers}}</a>
			<span v-else class="disabled">0</span>
		</template>

		<!-- 操作 -->
		<template slot="actionSlot" slot-scope="{ text, record }">
			<a-button type="link" :href="'/servers/groups/group?groupId=' + record.id"><i class="pi pi-pencil"
					style="font-size: 12px; padding: 4px;"></i> {{t("servers_groups_index@详情")}}</a-button>
			<a-button type="link" @click.prevent="deleteGroup(record.id)"><i class="pi pi-trash"
					style="font-size: 12px; padding: 4px;"></i> {{t("servers_groups_index@删除")}}</a-button>
		</template>
	</b-sortable-table>
</div>
</div>