<template>
    <el-container>
        <el-header>
            <div class="right-panel">
                <el-select v-model="query.status" placeholder="执行状态" clearable @change="handleQuery">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间" clearable @change="handleQuery"/>
            </div>
        </el-header>
        <el-main>
            <scTable ref="table" :apiObj="apiObj" :params="params" @row-click="itemDetail">
                <el-table-column label="执行ID" prop="task_id" width="280" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="名称" prop="periodic_task_name" width="240" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="执行方法" prop="task_name" width="260" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="状态" prop="status" width="80" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="执行返回" prop="result" width="180" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="开始时间" prop="date_created" width="160" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="结束时间" prop="date_done" width="160" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="错误信息" prop="traceback" min-width="80" :show-overflow-tooltip="true"></el-table-column>
            </scTable>
        </el-main>
        <el-dialog v-model="dVisible" title="详情">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="开始执行" width="80">{{ current_tr.date_created }}</el-descriptions-item>
                <el-descriptions-item label="结束执行">{{ current_tr.date_created }}</el-descriptions-item>
                <el-descriptions-item label="执行状态">{{ current_tr.status }}</el-descriptions-item>
                <el-descriptions-item label="返回结果">{{ current_tr.result }}</el-descriptions-item>
                <el-descriptions-item label="错误信息">{{ current_tr.traceback }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            apiObj: this.$API.system.task.result,
            params: {
                task_name__in: "apps.enm.tasks.cal_mpointstats"
            },
            timeRange:[],
            query: {},
            statusOptions: [
                {label: 'SUCCESS', value: 'SUCCESS'},
                {label: 'FAILURE', value: 'FAILURE'},
                {label: 'REVOKED', value: 'REVOKED'},
                {label: 'PENDING', value: 'PENDING'},
                {label: 'RETRY', value: 'RETRY'},
            ],
            dVisible: false,
            current_tr: {}
        }
    },
    methods: {
        itemDetail(row){
            this.dVisible = true;
            this.current_tr = row;
        },
        handleQuery(){
            if(this.timeRange){
                this.query.date_created__gte = this.timeRange[0]
                this.query.date_created__lte = this.timeRange[1]
            }
            else{
                this.query.date_created__gte = null
                this.query.date_created__lte = null
            }
            this.$refs.table.queryData(this.query)
        }
    }
}
</script>