<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <div class="breadcrumbContext">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>回放任务</el-breadcrumb-item>
                <el-breadcrumb-item>任务详情</el-breadcrumb-item>
            </div>
            <el-button @click="goBack" class="goback">返回</el-button>
        </el-breadcrumb>
        <!--   详情   -->
        <el-tabs type="border-card">
            <el-tab-pane label="任务详情">
                <!--   任务详情列表   -->
                <el-table :data="taskDetailTable" style="{width: 1300px}"
                          border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                    <el-table-column prop="status" label="运行状态" min-width="300px"  :formatter="apiStatusFormatter" showOverflowTooltip />
                    <el-table-column prop="api_url" label="接口地址" min-width="300px" showOverflowTooltip />
                    <el-table-column prop="param" label="请求参数" min-width="300px" showOverflowTooltip />
                    <el-table-column prop="req_count" label="样本请求次数" min-width="300px" showOverflowTooltip />
                    <el-table-column prop="result" label="运行结果" min-width="300px" showOverflowTooltip />
                    
                </el-table>
                <!--   任务详情分页  -->
                <el-pagination
                    @size-change="handleTaskDetailSizeChange"
                    @current-change="handleTaskDetailCurrentChange"
                    :current-page="taskDetail.page"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="taskDetail.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="taskDetailTotal">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import "/src/assets/font/iconfont.css"
import "/src/assets/font/iconfont.js"

export default {
    name: "QueryDiffTaskDetail",
    data() {
        return {
            task_id: '',
            // 项目维度的统计对象
            summary: {},
            // 问题详情
            taskDetail: {
                taskId: null,
                page: 1,
                size: 10,
            },
            // api运行状态枚举值
            apiStatusMap:{
                0: '未运行',
                1: '通过',
                2: '失败'
            },
            // 问题列表1：表单数据
            taskDetailTable: [],
            // 问题列表1：表单总数据
            taskDetailTotal: 0
        }
    },
    methods: {
        // 状态格式化
        apiStatusFormatter(row, column, cellValue) {
            return this.apiStatusMap[cellValue]
        },
        taskTypeFormatter(row, column, cellValue){
            return this.issuesTypeMap[cellValue]
        },
        // 返回到
        goBack() {
            this.$router.push('/querydiff/page')
        },
        
        // 分页查询问题详情
        async queryTaskDetailPage() {
            this.taskDetail.taskId = this.task_id
            const res = await this.$api.get('api/querydiff/task/case/list', this.taskDetail)
            if (res.success != true) return this.$message.error(res.error.message)
            this.taskDetailTable = res.data.case
            this.taskDetailTotal = res.data.total;
        },
        // 修改页大小
        handleTaskDetailSizeChange(size) {
            this.taskDetail.size = size;
            this.queryTaskDetailPage()
        },
        // 修改当前页
        handleTaskDetailCurrentChange(index) {
            this.taskDetail.page = index;
            this.queryTaskDetailPage()
        }
    },
    created() {
        this.task_id = this.$route.query.taskId
        console.log(this.task_id)
        this.queryTaskDetailPage()
    }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
    // 让文字居中显示与返回按钮对齐
    height: 32px;
    line-height: 32px;

    .goback {
        float: right;
    }
}
.el-table {
    margin-top: 15px;
    margin-bottom: 15px;

    /deep/ .cell {
        white-space: nowrap;
    }
}
.el-pagination {
    text-align: center;
    margin-top: 15px;
}
.el-card {
    margin-bottom: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;

    .summary {
        display: flex;
        flex-direction: column;
        width: 80%;
        color: #8A8C94 !important;

        .summaryTitle {
            line-height: 32px;
            font-size: 16px;
            padding: 0 0 0 18px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .summaryDetail {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 64px;

            .summary-icon {
                vertical-align: middle;
                width: 100px;
                position: relative;
            }

            .summary-icon div {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);

                .iconfont {
                    line-height: 64px;
                    height: 64px;
                    width: 64px;
                    font-size: 32px;
                    text-align: center;
                }
            }

            .labelName {
                line-height: 32px;
                font-size: 14px;
                padding: 0;
                box-sizing: border-box;
                vertical-align: middle;
                display: block;
            }
        }

        .summaryDetail div:not(:first-child) {
            padding-left: 20px;
            border-left: 1px solid #F5F5F5;
        }

        .summaryDetail div:nth-child(2) {
            margin-left: 80px;
            flex: 2;
        }

        .summaryDetail div:nth-child(3) {
            flex: 1;
        }

        .summaryDetail div:nth-child(4) {
            flex: 1;
        }

        .summaryDetail div:nth-child(5) {
            flex: 1;
        }
    }
}
</style>
