<template>
    <div class="app-container add-report">
        <div class="scroll div-content-scroll">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-card>
                    <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />报告基本信息
                    </template>


                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="报告名称" prop="reportName">
                                <el-input v-model="form.reportName" placeholder="请输入数据集名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="报告说明" prop="reportDesc">
                                <el-input v-model="form.reportDesc" placeholder="请输入数据集版本" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-card>

                <el-card style="margin-top: 10px;">
                    <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />推理任务
                    </template>
                    <el-table :data="info.tableData" stripe class="data-table1">
                        <el-table-column label="任务名称" align="left" prop="task_name" />
                        <el-table-column label="任务说明" align="left" prop="task_desc" />
                        <el-table-column label="使用数据集" align="left" prop="dataset_name" />
                        <el-table-column label="运行模型" align="left" prop="model_name" width="120" />
                        <el-table-column label="模型网络" align="left" prop="modl_net_type" width="120" />
                        <el-table-column label="创建时间" align="left" prop="create_time" width="120" v-if="1 == 2" />
                        <el-table-column label="完成时间" align="left" prop="finish_time" width="120" />
                        <el-table-column label="操作" fixed="right" align="center" width="100">
                            <template #default="scope">
                                <el-button text type="primary" size="small"
                                    @click="doDelete(scope.row)"><i-ep-close-bold />删除</el-button>
                            </template>
                        </el-table-column>
                        <template #empty>
                            <el-button type="primary" @click="choiceTask">选择推理任务</el-button>
                        </template>
                    </el-table>

                    <div style="margin-top: 10px;"
                        v-if="['detection', 'classification', 'tracking'].indexOf(info.modl_sub_type) >= 0">
                        <div class="div-nav-header"><el-icon color="#409eff">
                                <Warning />
                            </el-icon>常用性能测评</div>
                        <el-row class="row-norm">
                            <el-col :span="12">
                                <el-form-item label="算法性能指标">
                                    <span v-for="(it, idx) in info.norm.lvl1" :key="idx">{{ it }}</span>
                                </el-form-item>

                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="实时响应指标">
                                    <span v-for="(it, idx) in info.norm.lvl2" :key="idx">{{ it }}</span>
                                </el-form-item>

                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top: 10px;" v-if="['detection', 'classification'].indexOf(info.modl_sub_type) >= 0">
                        <div class="div-nav-header"><el-icon color="#409eff">
                                <Warning />
                            </el-icon>算法阀值指标</div>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="置信度阈值" prop="score_threshold">
                                    <el-input v-model="form.score_threshold" style="width: 120px;" class="txt-number"
                                        placeholder="请输入置信度阈值" type="number" />
                                </el-form-item>

                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="IoU阈值" prop="nms_threshold">
                                    <el-input v-model="form.nms_threshold" style="width: 120px;" class="txt-number"
                                        placeholder="请输入置信度阈值" type="number" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <el-card style="margin-top: 10px;" v-if="info.modl_sub_type">
                    <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />更多测评
                    </template>

                    <el-table :data="info.tableData2" stripe class="data-table2">
                        <el-table-column label="任务名称" align="left" prop="task_name" />
                        <el-table-column label="任务说明" align="left" prop="task_desc" />
                        <el-table-column label="使用数据集" align="left" prop="dataset_name" />
                        <el-table-column label="运行模型" align="left" prop="model_name" width="120" />
                        <el-table-column label="模型网络" align="left" prop="modl_net_type" width="120" />
                        <el-table-column label="创建时间" align="left" prop="create_time" width="120" v-if="1 == 2" />
                        <el-table-column label="完成时间" align="left" prop="finish_time" width="120" />
                        <el-table-column label="操作" fixed="right" align="center" width="100">
                            <template #default="scope">
                                <el-button text type="primary" size="small" v-if="!scope.row.old"
                                    @click="doDeleteComp(scope.row)"><i-ep-close-bold />删除</el-button>
                            </template>
                        </el-table-column>
                        <template #empty>
                            <el-button type="primary" @click="choiceRobustTask">添加鲁棒性任务</el-button>
                            <el-button type="primary" @click="choiceCompTask">添加对比任务</el-button>
                        </template>
                    </el-table>

                </el-card>
            </el-form>
        </div>
        <choiceTaskDlg ref="taskDlg" @success="doChoiceSuccess" />

        <el-card class="card-footer">
            <el-button type="primary" @click="doSave">生成报告</el-button>
        </el-card>

    </div>
</template>

<script setup>
import choiceTaskDlg from './components/choiceTaskDlg.vue'
import ReportApi from '@/api/report'
const router = useRouter();
const info = reactive({
    tableData: [],
    tableData2: [],
    modl_sub_type: '',
    norm: {
        lvl1: [],
        lvl2: [],
    },
    choiceType: '',
})
const formRef=ref();
const form = ref({}); // 基础表单
const taskDlg = ref()
const validateScore = (r, v, callback) => {
    if (+v < 0 || +v >= 1) {
        return callback(new Error('值在0-1之间'))
    }
    callback()
}
// 校验规则
const rules = reactive({
    reportName: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
    score_threshold: [
        { required: true, message: "置信度阈值不能为空", trigger: "blur" },
        { validator: validateScore, trigger: 'blur' }
    ],
    nms_threshold: [{ required: true, message: "IoU阈值不能为空", trigger: "blur" },
    { validator: validateScore, trigger: 'blur' }
    ],
});
//生成报告(验证)
function doSave() {
    formRef.value.validate(d=>{
      if(d){
        if(!info.tableData || info.tableData.length==0){
            ElMessage.error("请选择任务!");
            return;
        }
        doMakeReport();//生成报告
      }
    });
}
//生成报告
function doMakeReport(){
    let postData={
        report_name:form.value.reportName,
        report_desc:form.value.reportDesc,
        task_id_list:info.tableData2 && info.tableData2.length>1?info.tableData2.map(d=>d.task_id):info.tableData.map(d=>d.task_id),
        extra_evaluation_type:info.choiceType       
    };
    if(info.choiceType=='horizontal_comparison'){
        postData.threshold={
            score_threshold:form.value.score_threshold,
            nms_threshold:form.value.nms_threshold
        };
    }
    ReportApi.addReport(postData).then(d=>{
        let reportId=d.data?.data?.report_id||'';
        if(reportId){
            router.push({ path: "/simulationEvaluation/reportDesc", query: { id:reportId} });
            ElMessage.success("生成报告成功!");
        }else{
            ElMessage.error("生成报告失败!");
        }
    });
}
//删除已选择
function doDelete(row) {
    info.tableData = [];
    info.modl_sub_type = "";
}
//删除对比
function doDeleteComp(row) {
    let idx = info.tableData2.indexOf(row)
    if (idx >= 0) {
        info.tableData2 = info.tableData2.splice(idx, 1);
        if (info.tableData2.length == 1) {
            info.tableData2 = [];
            info.choiceType=''
        }
    }
}
//选择任务
function choiceTask() {
    info.choiceType = 'select'
    taskDlg.value.showDialog({});
}
//添加鲁棒性任务
function choiceRobustTask() {
    info.choiceType = 'robustness'
    let taskId = info.tableData && info.tableData.length > 0 ? info.tableData[0].task_id : '';
    taskDlg.value.showDialog({
        disTaskId: taskId,
        mult: false
    });
}
//添加对比任务
function choiceCompTask() {
    info.choiceType = 'horizontal_comparison'
    let taskId = info.tableData && info.tableData.length > 0 ? info.tableData[0].task_id : '';
    taskDlg.value.showDialog({
        disTaskId: taskId,
        mult: true
    });
}
function doChoiceSuccess(d) {
    if (info.choiceType !== 'select') {
        info.tableData2 = [];
        let it = info.tableData[0];
        it.old = true;
        info.tableData2 = [it, ...d];
    }
    info.tableData = d || [];
    info.modl_sub_type = info.tableData != null && info.tableData.length > 0 ? info.tableData[0].modl_sub_type || '' : '';
    if (['tracking'].indexOf(info.modl_sub_type) >= 0) {
        info.norm = {            
            lvl1: "1.IDSW (ID跳变),2.MT（跟踪轨迹）,3.ML（丢失轨迹）,4.FM（打断次数）,5.MOTA（跟踪准确度）".split(","),
            lvl2: "1. 平均推理时间,2. 系统延迟时间".split(",")
        }
        form.value.score_threshold = 0.5;
        form.value.nms_threshold = 0.5;
    } else if (['detection', 'classification'].indexOf(info.modl_sub_type) >= 0) {
        info.norm = {
            lvl1: "1.Precision（精确度）,2.Recall (召回率),3.F1-Score (F1分数),4. Micro F1,5. Macro F1,6.加权F1-Score,7.AP（平均精度）,8.mAP(多类平均精度),9.PR曲线".split(","),
            lvl2: "1. 平均推理时间,2. 系统延迟时间".split(",")
        }
        form.value.score_threshold = 0.5;
        form.value.nms_threshold = 0.5;
    } else {
        info.norm = {
            lvl1: [],
            lvl2: []
        }
    }
}
</script>

<style lang="scss">
.add-report {
    .el-card__header {
        padding: 8px 4px;
        display: flex;
        align-items: center;
    }

    .data-table1 {
        .el-table__empty-block {
            display: block;
            text-align: right;
        }
    }

    .txt-number {

        input::-webkit-inner-spin-button,
        input::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    }

    .row-norm {
        .el-form-item__content {
            background: #eee;
            border-radius: 10px;
            padding: 10px;
            line-height: 20px;
            font-weight: bold;
            span{
                margin-right:8px;
            }
        }
    }

    .div-nav-header {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        position: relative;

        .el-icon {
            position: relative;
            margin-right: 4px;
            top: 2px;
        }
    }

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

        .el-card__body {
            padding: 10px;

            .el-pagination {
                justify-content: end;
            }
        }
    }
    .div-content-scroll{
        margin-bottom: 60px;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
}
</style>