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

<div class="right-box">
    <second-menu>
        <menu-item @click.prevent="createAccessKey()">
            <i class="pi pi-pen-to-square"></i>
            {{t('admins_accesskeys_index@创建')}}AccessKey
        </menu-item>
    </second-menu>

    <b-empty v-if="accessKeys.length == 0">{{t('admins_accesskeys_index@暂时还没有')}}AccessKey。</b-empty>

    <b-table
        v-if="accessKeys.length > 0"
        :columns="[
            { title: 'AccessKey ID', dataIndex: 'uniqueId', key: 'uniqueId', scopedSlots: { customRender: 'uniqueIdSlot' } },
            { title: 'AccessKey' + t('admins_accesskeys_index@密钥'), dataIndex: 'secret', key: 'secret', scopedSlots: { customRender: 'secretSlot' } },
            { title: t('admins_accesskeys_index@备注'), dataIndex: 'description', key: 'description', scopedSlots: { customRender: 'descriptionSlot' } },
            { title: t('admins_accesskeys_index@最后访问'), dataIndex: 'accessedTime', key: 'time', scopedSlots: { customRender: 'timeSlot' }, width: '15%' },
            { title: t('admins_accesskeys_index@状态'), dataIndex: 'isOn', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '10%', align: 'center' },
            { title: t('admins_accesskeys_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '15%', align: 'center' }
        ]"
        :data-source="accessKeys"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
         <template slot="uniqueIdSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.uniqueId}}</span>
        </template>
        <template slot="secretSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.secret}}</span>
        </template>
         <template slot="descriptionSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.description}}</span>
        </template>
        <template slot="timeSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">
                <span v-if="record.accessedTime.length > 0">{{record.accessedTime}}</span>
                <span v-else class="disabled">{{t('admins_accesskeys_index@尚无访问')}}</span>
            </span>
        </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" v-if="record.isOn" @click.prevent="updateAccessKeyIsOn(record.id, false)">{{t('admins_accesskeys_index@禁用')}}</a-button>
             <a-button type="link" v-if="!record.isOn" @click.prevent="updateAccessKeyIsOn(record.id, true)">{{t('admins_accesskeys_index@启用')}}</a-button>
             <a-button type="link" @click.prevent="deleteAccessKey(record.id)">{{t('admins_accesskeys_index@删除')}}</a-button>
        </template>
    </b-table>
</div>