{$layout} 
{$template "../menu"}
<second-menu>
  <menu-item @click.prevent="createGroup">
    <a-button>
        <i class="pi pi-pen-to-square" style="margin-right: .5rem;"></i>
      创建新分组
    </a-button>
  </menu-item>
</second-menu>

<!-- <p class="comment" v-if="groups.length == 0">暂时还没有分组。</p> -->
<b-empty v-if="groups.length == 0">暂时还没有分组。</b-empty>

<!-- <div class="ui divider"></div> -->

<div class="ui message warning" v-if="groups.length == 0">暂时还没有分组。</div>

<div v-if="groups.length > 0">
    
    <b-sortable-table
        :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> 修改</a-button>
            <a-button type="link" @click.prevent="deleteGroup(record.id)"><i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> 删除</a-button>
        </template>
    </b-sortable-table>
</div>