<template>
    <div class="app-container simulation-report-desc"  >
        <div style="background-color: #fff;padding:20px;margin-bottom: 60px;" id="print_simulation_report_desc">
            <div class="report-name">{{ info.report.report_name }}</div>
            <div class="report-info">
                <table>
                    <tr>
                        <td style="width:100px;" align="right"> 报告创建人:</td>
                        <td>{{ info.report.user_name }}</td>
                    </tr>
                    <tr>
                        <td align="right"> 报告生成时间:</td>
                        <td>{{ info.report.create_time }}</td>
                    </tr>
                    <tr>
                        <td align="right"> 报告说明:</td>
                        <td>{{ info.report.report_desc }}</td>
                    </tr>
                </table>
            </div>
            <div class="div-line"></div>
            <div class="sub-title">推理任务列表</div>
            <el-table :data="info.taskList" stripe style="margin-top:10px;">
                <el-table-column label="任务名称" align="left" prop="task_name" />
                <el-table-column label="模型名称" align="left" prop="model_name" />
                <el-table-column label="网络类型" align="left" prop="modl_sub_type" />
                <el-table-column label="互联名称" align="left" prop="connection_name" />
                <el-table-column label="数据集名称" align="left" prop="dataset_name" />
                <el-table-column label="图片数量" align="left" prop="image_count" />
                <el-table-column label="设备名称" align="left" prop="device_name" />
                <el-table-column label="设备处理器" align="left" prop="hardware_chip" />
            </el-table>
            <div class="task-lists" v-if="info.tasks && info.tasks.length > 0">
                <div v-for="(it, idx) in info.tasks" :key="idx">
                    <div class="sub-title">我的任务{{ idx + 1 }}的评估报告</div>
                    <div v-if="info.thresholds" class="info-thresholds">
                        <span>置信度阈值：</span>
                        <span>{{ info.thresholds.score_threshold }}</span>
                        <span>nms阈值:</span>
                        <span>{{ info.thresholds.nms_threshold }}</span>
                    </div>

                    <el-table :data="it.classes" stripe style="margin-top:10px;">
                        <el-table-column label="类别名称" align="left" prop="class_name" />
                        <el-table-column label="Accuracy(准确度)" align="left" prop="accuracy" />
                        <el-table-column label="Precision(精准度)" align="left" prop="precision" />
                        <el-table-column label="Recall(召回率)" align="left" prop="recall" />
                        <el-table-column label="F1-score" align="left" prop="f1_score" />
                        <el-table-column label="AP" align="left" prop="ap" />
                    </el-table>

                    <el-table :data="it.datas" stripe style="margin-top:20px;" >
                        <el-table-column label="mAP" align="left" prop="map" />
                        <el-table-column label="Micro F1" align="left" prop="micro_f1" />
                        <el-table-column label="Macro F1" align="left" prop="macro_f1" />
                        <el-table-column label="加权F1-Scroe" align="left" prop="weight_f1" />
                        <el-table-column label="平均推理时间" align="left" prop="inference_time" />
                        <el-table-column label="系统延迟时间" align="left" prop="system_delay" />
                    </el-table>

                    <el-row class="report-chart1" style="margin-top:20px;">
                        <el-col :span="12">
                            <charts :id="'reportChart1-' + idx" width="100%" height="400px"
                                :render="opt => renderChart1(it, 'roc')"></charts>
                        </el-col>
                        <el-col :span="12">
                            <charts :id="'reportChart2-' + idx" width="100%" height="400px"
                                :render="opt => renderChart1(it, 'rp')"></charts>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

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

<script setup>
import ReportApi from '@/api/report'
import charts from './components/charts.vue'
import printJS from 'print-js'
const route = useRoute()
const router = useRouter();
const info = reactive({
    report: {},
    taskList: [],
    thresholds: null,
    extra_evaluation_type: '',
    tasks: []
})
function goBack(){
    router.push({ path: "/simulationEvaluation/reportList"});
}
function doPrint(){
    printJS({
        printable:'print_simulation_report_desc',
        type: 'html',
        header:info.report.report_name,
        ignoreElements: ['no-print']
    });
}
const doDelete = () => {
  let id = route.query.id;
  ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    ReportApi.deleteReport(id).then(d=>{
      if(d.data.code==0){
        ElMessage.success("删除成功!");     
        goBack();   
      }else{
        ElMessage.error("删除失败!");
      }
    });    

  });
}

function renderChart1(data, type) {
    let chartInfo = data.chartsInfo
    let opt = {
        legend: { 
            left:'10%',right:'10%',
            data: chartInfo.names },
        grid: { top: '25%', },
        xAxis: [{
            type: 'category',   // 还有其他的type，可以去官网喵两眼哦
            data: ['0.0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', "0.8", "0.9", "1.0"],   // x轴数据
        }],
        yAxis: [{
            type: 'value',
            name: type == 'roc' ? "ROC曲线" : "RP曲线"
        }],
        tooltip: {
            trigger: 'axis'
        },
        series: (type == "roc" ? chartInfo.rocs : chartInfo.rps).map(it => {
            return {
                name: it.name,
                type: it.type,
                data: it.data,
       label:{
        show:true,
        position:'top'
      }
            }
        })
    }
    return opt;
}
function initTaskChart(it) {
    let rocs = [];
    let rps = [];
    let names = [];
    let classes = it.classes || [];
    classes.forEach(d => {
        rocs.push({
            name: d.class_name, data: d.roc, type: 'line'
        });
        rps.push({
            name: d.class_name, data: d.pr, type: 'line'
        });
        names.push(d.class_name)
    });
    return {
        rocs, rps, names
    }
}
function loadData() {
    let id = route.query.id;
    ReportApi.getReport(id).then(d => {
        info.report = d.data.data || {};
        info.taskList = info.report.task_list || []
        info.thresholds = info.report.report_parameters?.report_parameters?.thresholds || null
        info.extra_evaluation_type = info.report.report_parameters?.report_parameters?.extra_evaluation_type || '';
        info.tasks = (info.report.report_data?.tasks || []).map(it => {
            it.classes.splice(20)
            it.datas = [{
                inference_time: it.inference_time, macro_f1: it.macro_f1, map: it.map, micro_f1: it.micro_f1,
                system_delay: it.system_delay, task_id: it.task_id, weight_f1: it.weight_f1
            }];
            it.chartsInfo = initTaskChart(it);
            return it;
        });

    });
}
onMounted(loadData);
</script>
<style lang='scss'>
.simulation-report-desc {

    font-size: 12px;

    .report-name {
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }

    .sub-title {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    .div-line {
        margin: 10px 0px;
        height: 2px;
        background-color: #aaa;
    }

    .task-lists {
        margin-top: 20px;

        .info-thresholds {
            font-weight: bold;
        }
    }
    .card-footer{
        position: fixed;
        width: calc(100% - 215px);
        bottom: 0px;

        .el-card__body {
            padding: 10px;

            .el-pagination {
                justify-content: end;
            }
        }  
    }
}
</style>