{$layout}

<first-menu>
  <menu-item :active="true">AccessKey列表</menu-item>
  <span class="item">|</span>
  <menu-item @click.prevent="createAccessKey()">
    <i class="pi pi-pen-to-square" style="margin-right: 0.5em;"></i>
    创建AccessKey
  </menu-item>
  <span class="item">|</span>
  <menu-item>
    <tip-icon style="padding: 0 !important;" content="AccessKey可以用来访问API接口。"></tip-icon>
  </menu-item>
</first-menu>

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

<div class="margin"></div>
<b-table
    v-if="accessKeys.length > 0"
    :columns="columns"
    :data-source="accessKeys"
    :row-key="'id'"
    :scroll="{ x: 1000 }"
    size="middle"
>
    <template slot="uniqueIdSlot" slot-scope="{ text, record }">
        {{record.uniqueId}}
    </template>

    <template slot="secretSlot" slot-scope="{ text, record }">
        {{record.secret}}
    </template>

    <template slot="descriptionSlot" slot-scope="{ text, record }">
        {{record.description}}
    </template>

    <template slot="statusSlot" slot-scope="{ text, record }">
        <span v-if="record.isOn" class="green">已启用</span>
        <span v-else class="disabled">已禁用</span>
    </template>

    <template slot="operationSlot" slot-scope="{ text, record }">
        <a-button type="link" @click.prevent="updateAccessKeyIsOn(record.id, !record.isOn)">
            <i :class="record.isOn ? 'pi pi-pause' : 'pi pi-play'" style="font-size: 12px; padding: 4px 2px;"></i>
            {{record.isOn ? '禁用' : '启用'}}
        </a-button>
        <a-button type="link" @click.prevent="deleteAccessKey(record.id)">
            <i class="pi pi-trash" style="font-size: 12px; padding: 4px 2px;"></i> 删除
        </a-button>
    </template>
</b-table>