{$layout}
{$template "../menu"}

<first-menu style="margin-top:-1em">
	<a href="" class="item" @click.prevent="createGroup()">
		<i class="pi pi-plus"></i>
		{{t('clusters_monitors_groups@创建分组')}}
	</a>
</first-menu>

<b-empty v-if="groups.length == 0">
	{{t('clusters_monitors_groups@暂时还没有分组')}}
</b-empty>

<div v-if="groups.length > 0">
	<div class="margin"></div>
	<b-sortable-table
		:columns="columns"
		:data-source="groups"
		:row-key="'id'"
		:on-sort="handleSort"
		size="middle"
	>
		<template slot="handleSlot" slot-scope="{ record }">
			<i class="icon bars handle grey"></i>
		</template>

		<template slot="nameSlot" slot-scope="{ record }">
			<a href="" @click.prevent="updateGroup(record.id)">{{record.name}} <i class="icon expand small"></i></a>
		</template>

		<template slot="countSlot" slot-scope="{ record }">
			<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId + '&groupId=' + record.id" v-if="record.countNodes > 0">{{record.countNodes}}</a>
			<span v-else class="disabled">0</span>
		</template>

		<template slot="actionSlot" slot-scope="{ record }">
			<a-button type="link" @click="updateGroup(record.id)">
				<i class="pi pi-pen-to-square" style="font-size: 12px; padding: 4px;"></i> {{t('clusters_monitors_groups@修改')}}
			</a-button>
			<a-button type="link" @click="deleteGroup(record.id)">
				<i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> {{t('clusters_monitors_groups@删除')}}
			</a-button>
		</template>
	</b-sortable-table>
</div>