<template>
    <div class="app-container task-detail">
        <el-card>
            <template #header>
                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                任务详情</template>
            <table style="width:100%" class="tb-base-info">
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">任务名称:</span>
                        <span class="sp-text">{{ data.taskInfo.task_name }}</span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">任务说明:</span>
                        <span class="sp-text">{{ data.taskInfo.task_desc }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">互联名称:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.connection_name }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">互联说明:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.connection_desc }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">数据集:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.dataset_name }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">图像数量:</span>
                        <span class="sp-text"> {{ data.taskInfo.image_count }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">运行模型:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.model_name }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">模型网络:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.modl_net_type }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">设备名称:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.device_name }}
                        </span>
                    </td>

                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">开始时间:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.create_time }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">结束时间:</span>
                        <span class="sp-text">
                            {{ data.taskInfo.finish_time }}
                        </span>
                    </td>
                </tr>
            </table>
        </el-card>
        <el-card style="margin-top: 20px;" class="image-list">
            <template #header>
                <svg-icon icon-class="pause" style="width:20px;height:20px;" />
                结果集图像列表({{ data.imageList.length }})</template>
            <el-upload v-model:file-list="data.imageList" class="upload-demo upload-demo-2"
                :on-preview="handlePreview" />
            <el-empty v-if="data.imageList.length == 0" description="暂 无 数 据" />
        </el-card>


        <div class="demo-image__preview">
            <el-image class="imgPreView" :src="imgPreSrc" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                :preview-src-list="imgPreSrcList" :initial-index="4" style="width: 1px; height: 1px" fit="cover" />
        </div>


        <el-card class="card-footer">
            <el-button type="primary" @click="doDelete">删除</el-button>
            <el-button @click="doBack">返回</el-button>
        </el-card>


    </div>
</template>

<script setup>
import task from '@/api/task';
import DataSetApi from "@/api/dataSet";
const router = useRouter();
const route = useRoute()
const imgPreSrcList = ref([]);
const imgPreSrc = ref("");
const imgViewer = ref(false);
const data = reactive({
    taskInfo: {},
    imageList: [],
    elKey: 0
})
const doDelete = () => {
    ElMessageBox.confirm("确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(function () {
        let id = route.query.id;
        task.deleteTask(id).then(d => {
            if (d.data.code == 0) {
                ElMessage.success("删除成功");
                setTimeout(() => {
                    doBack();
                }, 1000);
            } else {
                ElMessage.error("删除失败!");
            }
        });
    });
}
const doBack = () => {
    router.push({ path: "/simulationEvaluation/hisTaskList" })
}

/** 预览图片 */
function handlePreview(file) {
    imgPreSrcList.value = [];
    let id = route.query.id;
    task.taskImage(id, file.name).then(res => {
        if (res.data.code == 0) {
            imgPreSrc.value = "data:image/gif;base64," + res.data.data.file_content;
            imgPreSrcList.value.push(imgPreSrc.value);
            setTimeout(() => {
                console.log("点击事件===>");
                imgViewer.value = true;
                document.getElementsByClassName("imgPreView")[0].children[0].click();
            }, 50);
        }
    });
}

const initData = () => {

    let id = route.query.id;
    task.taskDetail(id).then(d => {
        data.taskInfo = d.data.data || {};
        data.elKey++;
    })
    task.taskResults(id).then(d => {
        data.imageList = (d.data.data.image_list || []).map(it => {
            return {
                name: it, url: it
            }
        });
        data.elKey++;
    })
}

onMounted(() => {
    initData();
});
</script>

<style lang="scss" scoped>
.tb-base-info {
    line-height: 30px;

    :deep(span) {
        font-size: 14px;
    }
}

:deep(.svg-icon) {
    margin-right: 8px;
}

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

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

        .el-pagination {
            justify-content: end;
        }
    }
}
</style>
<style lang="scss">
.app-container.task-detail{
    .image-list{
        .el-upload.el-upload--text{
            display: none;
        }
        .el-upload-list{
            margin-top: 0px;
            
            .el-upload-list__item{
                display: inline-block;
                width:23%;
                .el-icon.el-icon--document{
                    background-image: url("../../assets/img.png");
                    width:18px;
                    background-repeat: no-repeat;
                    svg{
                        display: none;
                    }
                }
                .el-icon.el-icon--close{
                    display: none;
                }
                .el-upload-list__item-status-label{
                    display:none;
                }
            }
        }
    }
}
</style>