{$layout "layout_popup"}

<!-- <h3>{{t('dns_tasks@正在同步的DNS任务')}}<span v-if="tasks.length > 0">{{t('dns_tasks@(共x个)', {count: tasks.length})}}</span></h3> -->
<b-empty v-if="tasks.length == 0">{{t('dns_tasks@暂时没有同步的任务。')}}</b-empty>
<div v-if="tasks.length > 0">
    <button class="ui button tiny basic" @click.prevent="deleteAllTasks">{{t('dns_tasks@清空所有任务')}}</button>
    <div class="margin"></div>
    
    <b-table
        :columns="[
            {
                title: t('dns_tasks@对象'),
                dataIndex: 'object',
                key: 'object',
                width: '180px',
                scopedSlots: { customRender: 'object' }
            },
            {
                title: t('dns_tasks@任务'),
                dataIndex: 'type',
                key: 'type',
                width: '180px',
                scopedSlots: { customRender: 'type' }
            },
            {
                title: t('dns_tasks@状态'),
                dataIndex: 'isDone',
                key: 'isDone',
                width: '100px',
                scopedSlots: { customRender: 'isDone' }
            },
            {
                title: t('dns_tasks@触发时间'),
                dataIndex: 'updatedTime',
                key: 'updatedTime',
                width: '150px',
                scopedSlots: { customRender: 'updatedTime' }
            },
            {
                title: t('dns_tasks@操作'),
                key: 'action',
                width: '80px',
                scopedSlots: { customRender: 'action' }
            }
        ]"
        :data-source="tasks"
        row-key="id"
        :bordered="false"
        :scroll="{ x: 1200, y: 300 }"
        :pagination="false"
        size="middle"
    >
        <!-- 对象列 -->
        <template slot="object" slot-scope="{ text, record }">
            <span v-if="(record.type == 'clusterChange' || record.type == 'clusterNodesChange' || record.type == 'clusterRemoveDomain') && record.cluster != null">
                {{record.cluster.name}}
                <link-icon :href="'/dns/clusters/cluster?clusterId=' + record.cluster.id" target="_top"></link-icon>
            </span>
            <span v-if="record.type == 'nodeChange'">{{record.node.name}}</span>
            <span v-if="record.type == 'serverChange'">{{record.server.name}}</span>
            <span v-if="record.type == 'domainChange'">{{record.domain.name}}</span>
        </template>
        
        <!-- 任务类型列 -->
        <template slot="type" slot-scope="{ text, record }">
            <span v-if="record.type == 'clusterChange' || record.type == 'clusterNodesChange' || record.type == 'clusterRemoveDomain'">{{t('dns_tasks@集群')}}</span>
            <span v-if="record.type == 'nodeChange'">{{t('dns_tasks@节点')}}</span>
            <span v-if="record.type == 'serverChange'">{{t('dns_tasks@网站')}}</span>
            <span v-if="record.type == 'domainChange'">{{t('dns_tasks@域名')}}</span>
        </template>
        
        <!-- 状态列 -->
        <template slot="isDone" slot-scope="{ text, record }">
            <span v-if="record.isDone" class="red">{{record.error}}</span>
            <span v-else>{{t('dns_tasks@正在同步')}}</span>
        </template>
        
        <!-- 触发时间列 -->
        <template slot="updatedTime" slot-scope="{ text, record }">
            {{record.updatedTime}}
        </template>
        
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ text, record }">
            <a-button @click.prevent="deleteTask(record.id)" type="link" size="small">{{t('dns_tasks@删除')}}</a-button>
        </template>
    </b-table>
</div>