{$layout}
{$template "menu"}

<div class="cache-config-container">
    <div class="cache-config-form">
        <div class="form-title">
            <i class="icon tasks"></i> {{t('批量任务列表')}}
        </div>

        <div class="config-section">
            <div style="padding: 1em;">
                <b-empty v-if="tasks.length == 0">{{t('暂时还没有任务。')}}</b-empty>

                <div class="table-box" v-if="tasks.length > 0">
                    <b-table
                        :columns="columns"
                        :data-source="tasks"
                        :row-key="'id'"
                        size="middle"
                    >
                        <!-- 任务编号 Slot -->
                        <template slot="taskIdSlot" slot-scope="{ text, record }">
                            <a :href="'/servers/components/cache/batch/task?taskId=' + record.id">{{record.id}}</a>
                        </template>

                        <!-- 任务类型 Slot -->
                        <template slot="taskTypeSlot" slot-scope="{ record }">
                            <span v-if="record.type == 'purge'" class="ui label blue basic tiny">
                                <i class="icon refresh"></i> {{t('刷新')}}
                            </span>
                            <span v-if="record.type == 'fetch'" class="ui label green basic tiny">
                                <i class="icon download"></i> {{t('预热')}}
                            </span>
                        </template>

                        <!-- URL类型 Slot -->
                        <template slot="keyTypeSlot" slot-scope="{ record }">
                            <span v-if="record.keyType == 'key'" class="ui label basic tiny">
                                <i class="icon linkify"></i> URL
                            </span>
                            <span v-if="record.keyType == 'prefix'" class="ui label basic tiny">
                                <i class="icon folder"></i> {{t('目录')}}
                            </span>
                        </template>

                        <!-- 所属用户 Slot -->
                        <template slot="userSlot" slot-scope="{ record }">
                            <span v-if="record.user != null && record.user.id > 0"><user-link :v-user="record.user"></user-link></span>
                            <span v-if="record.description.length > 0" class="grey">{{record.description}}</span>
                            <span v-else-if="!(record.user != null && record.user.id > 0) && record.description.length == 0" class="disabled">-</span>
                        </template>

                        <!-- 任务状态 Slot -->
                        <template slot="statusSlot" slot-scope="{ record }">
                            <span v-if="record.isOk" class="ui label green tiny">
                                <i class="pi pi-check" style="color: #fff !important; font-size: 12px;"></i> {{t('已完成')}}
                            </span>
                            <a :href="'/servers/components/cache/batch/task?taskId=' + record.id" v-else-if="record.isDone">
                                <span class="ui label red tiny">
                                    <i class="pi pi-times" style="color: #fff !important; font-size: 12px;"></i> {{t('失败')}}
                                </span>
                            </a>
                            <span v-else-if="!record.isDone" class="ui label grey tiny">
                                <i class="pi pi-clock" style="color: #fff !important; font-size: 12px;"></i> {{t('等待执行')}}
                            </span>
                        </template>

                        <!-- 操作 Slot -->
                        <template slot="actionSlot" slot-scope="{ record }">
                            <div class="action-buttons">
                                <a :href="'/servers/components/cache/batch/task?taskId=' + record.id" class="action-button">
                                    <i class="icon info circle"></i> {{t('详情')}}
                                </a>
                                <a href="#" @click.prevent="deleteTask(record.id)" class="action-button">
                                    <i class="icon trash"></i> {{t('删除')}}
                                </a>
                            </div>
                        </template>
                    </b-table>
                </div>

                <page-box></page-box>
            </div>
        </div>
    </div>
</div>