<template>
    <div class="app-container simulation-his-task-desc">
        <el-card class="card-info">
            <template #header>
                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                推理评估信息</template>
            <div  class="tb-base-info">
            <el-row>
                <el-col :span="12">
                    <span class="sp-title">任务名称:</span>
                        <span class="sp-text">人员检测测四报告</span>
                </el-col>
                <el-col :span="12">
                    <span class="sp-title">任务说明:</span>
                        <span class="sp-text">
                            <el-popover placement="top-start" width="50%" trigger="hover"
                                content="人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告">
                                <template #reference>
                                    人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告
                                </template>
                            </el-popover>
                        </span>
                </el-col>                
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span class="sp-title">互联名称:</span>
                        <span class="sp-text">人员检测测互联</span>

                </el-col>
                <el-col :span="12">
                    <span class="sp-title">互联说明:</span>
                        <span class="sp-text">
                            <el-popover placement="top-start" width="50%" trigger="hover"
                                content="人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告">
                                <template #reference>
                                    人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告
                                </template>
                            </el-popover>
                        </span>
                </el-col>
            </el-row>
        </div>
            <table style="width:100%" class="tb-base-info">             
                <tr>
                    <td class="cl-td">
                        <span class="sp-title">数据集:</span>
                        <span class="sp-text">人员识别</span>
                    </td>
                    <td class="cl-td">
                        <span class="sp-title">数据集标签:</span>
                        <span class="sp-text">人员检测</span>
                    </td>
                </tr>
                <tr>
                    <td class="cl-td">
                        <span class="sp-title">运行模型:</span>
                        <span class="sp-text">人员检测模型</span>
                    </td>
                    <td class="cl-td">
                        <span class="sp-title">模型网络:</span>
                        <span class="sp-text">VIT</span>
                    </td>
                </tr>

                <tr>
                    <td class="cl-td" rowspan="2">
                        <span class="sp-title">设备列表:</span>
                        <span class="sp-text">
                            <el-input v-model="devList" disabled type="textarea"
                                style="width:calc(100% - 120px);vertical-align: top;" :rows="2" />
                        </span>
                    </td>
                    <td class="cl-td">
                        <span class="sp-title">推理开始时间:</span>
                        <span class="sp-text">2024-06-0418:34:32</span>
                    </td>
                </tr>
                <tr>
                    <td class="cl-td">
                        <span class="sp-title">报告生成时:</span>
                        <span class="sp-text">2024-06-0418:34:32</span>
                    </td>
                </tr>


            </table>
        </el-card>
        <el-card style="margin-top: 12px;margin-bottom: 100px;height: 450px;">
            <template #header>
                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                报告图表</template>
            <el-row>
                <el-col :span="12" style="position: relative;display: flex;justify-content: center;">
                    <BarChart1/>
                </el-col>
                <el-col :span="12" style="position: relative;display: flex;justify-content: center;">
                    <BarChart2/>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="card-footer">
            <el-button type="primary" @click="doPrint">打印</el-button>
            <el-button type="primary" @click="doExport">导出</el-button>
            <el-button type="primary" @click="doDelete">删除</el-button>
            <el-button type="primary" @click="doBack">返回</el-button>
        </el-card>
    </div>
</template>

<script setup>
import BarChart1 from './BarChart1.vue'
import BarChart2 from './BarChart2.vue'
const router = useRouter();
let devList = ref("ST18-9\nRTX4080")
const doBack = () => {
    router.replace({ path: "/simulationEvaluation/hisTaskList" })
}
const doPrint = () => {
    ElMessage.success("正在打印...");
}
const doExport = () => {
    ElMessage.success("正在导出...");
}
const doDelete = () => {
    ElMessageBox.confirm("确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(function () {

        let idx = tableData.indexOf(row);
        if (idx >= 0) {
            tableData.splice(idx, 1);
            ElMessage.success("删除成功");
            setTimeout(() => {
                doPrint();
            }, 1500);
        }

    });
}
</script>
<style lang='scss'>
.simulation-his-task-desc {
    .el-card__header {
        padding: 8px 4px;
        display: flex;
        align-items: center
    }

    .card-footer {
        position: fixed;
        width: calc(100% - 215px);
        bottom: 0px;

        :deep(.el-card__body) {
            padding: 10px;

            .el-pagination {
                justify-content: end;
            }
        }
    }
    .card-info{
        .el-card__body{
            padding: 10px;
        }
    }
    .tb-base-info {
        line-height: 24px;

        span {
            font-size: 12px;

            &.sp-text {
                .el-only-child__content {
                    width: calc(100% - 120px);
                    text-overflow: ellipsis;
                    display: inline-block;
                    overflow: hidden;
                    white-space: nowrap;
                    position: relative;
                    top:10px;
                }
            }
        }
        .cl-td{
            width:50%;
            min-width: 50%;
        }

    }

}
</style>