{$layout}

{$template "menu"}

<b-empty v-if="!isLoading && storages.length == 0">{{t('暂时还没有存储。')}}</b-empty>

<div class="table-box">
    <b-table
        v-if="storages.length > 0"
        :columns="[
            {
                title: t('存储名称'),
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: t('类型'),
                key: 'type',
                width: '200px',
                align: 'center',
                scopedSlots: { customRender: 'typeSlot' }
            },
            {
                title: t('存储路径'),
                dataIndex: 'setting.storagePath',
                key: 'storagePath'
            },
            {
                title: t('添加时间'),
                dataIndex: 'createdAt',
                key: 'createdAt',
                width: '200px',
                align: 'center'
            },
            {
                title: t('操作'),
                key: 'action',
                width: '100px',
                align: 'center',
                scopedSlots: { customRender: 'actionSlot' }
            }
        ]"
        :data-source="storages"
        :row-key="'id'"
        size="middle"
        :pagination="false"
        :loading="isLoading"
        class="celled-table"
    >
        <!-- {{t('类型')}} -->
        <template slot="typeSlot" slot-scope="{ text, record }">
            <span v-if="record.type == 'local'">{{t('本地文件系统')}}</span>
            <span v-else-if="record.type == 'nfs'">{{t('本地文件系统')}}</span>
            <span v-else-if="record.type == 's3'">{{t('S3对象存储')}}</span>
            <span v-else>-</span>
        </template>
        
        <!-- {{t('操作')}} -->
        <template slot="actionSlot" slot-scope="{ text, record }">
             <a-button type="link" @click.prevent="deleteStorage(record.id)">
                 <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> {{t('删除')}}
             </a-button>
        </template>
    </b-table>
</div>