{$layout}

<first-menu>
    <menu-item href="/ns/domains/groups" active="true">分组列表</menu-item>
    <span class="item disabled">|</span>
    <menu-item @click.prevent="createGroup">
      <i class="edit icon"></i>
      创建分组
    </menu-item>
</first-menu>

<!-- <not-found-box v-if="groups.length == 0">暂时还没有分组。</not-found-box> -->
<b-empty v-if="groups.length == 0">暂时还没有分组。</b-empty>

<div class="margin"></div>
<b-table
    v-if="groups.length > 0"
    :columns="columns"
    :data-source="groups"
    :row-key="'id'"
    :scroll="{ x: 800 }"
    size="middle"
>
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updateGroup(record.id)">
            {{record.name}} <i class="pi pi-window-maximize"></i>
        </a>
    </template>

    <template slot="statusSlot" slot-scope="{ text, record }">
        <label-on :v-is-on="record.isOn"></label-on>
    </template>

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