{$layout}
{$template "menu"}

<div class="ui message" v-if="isLoading">{{t("settings_database_clean@正在加载中...")}}</div>

<div class="ui message small warning" v-if="!isLoading && tables.length > 0">
    <p>{{t("settings_database_clean@请确认数据表用途后再执行相关操作。")}}</p>
</div>

<!-- 使用 b-table 替换 -->
<b-table
    v-if="!isLoading && tables.length > 0"
    :columns="columns" 
    :data-source="tables"
    :row-key="'name'"
    :loading="isLoading"
    size="middle"
    :pagination="false"  
>
    <!-- 占用空间列 -->
    <template slot="sizeSlot" slot-scope="{ text, record }">
        {{record.size}}
        <span class="grey small" v-if="record.rows > 0">{{t("settings_database_clean@（")}}{{record.rows}}{{t("settings_database_clean@行）")}}</span>
    </template>

    <!-- 操作列 -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a-button type="link" v-if="record.canDelete" @click.prevent="deleteTable(record.name)">
             <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> {{t("settings_database_clean@删除")}}
        </a-button>
        <a-button type="link" v-if="record.canClean" @click.prevent="truncateTable(record.name)">
            <i class="pi pi-eraser" style="font-size: 12px; padding: 4px;"></i> {{t("settings_database_clean@清空")}}
        </a-button>
    </template>
</b-table>

<div class="ui message" v-if="!isLoading && tables.length == 0">
    <p>{{t("settings_database_clean@暂时没有可以清理的数据表。")}}</p>
</div>