<template>
    <div class="app-container edit-model">
        <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.info.model_name }}</span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">模型类型:</span>
                        <span class="sp-text">{{ data.info.modl_main_type_name }}
                            /{{ data.info.modl_sub_type_name }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">模型版本:</span>
                        <span class="sp-text">
                            {{ data.info.model_version }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">版本描述:</span>
                        <span class="sp-text">
                            {{ data.info.model_desc }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">模型网络:</span>
                        <span class="sp-text">
                            {{ data.info.model_net_type }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">上传用户:</span>
                        <span class="sp-text"> {{ data.info.user_name }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <span class="sp-title">算法框架:</span>
                        <span class="sp-text">
                            {{ data.info.modl_framework }}
                        </span>
                    </td>
                    <td style="width: 50%;">
                        <span class="sp-title">上传时间:</span>
                        <span class="sp-text">
                            {{ data.info.create_time }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="width: 100%;">
                        <el-form ref="uploadForm" :rules="upRules" :model="upForm" label-width="120">
                            <el-form-item label="网络参数" prop="model_file_list">
                                <el-upload ref="uploadRef1" class="uploadFile1" :action="fileUpload" :data="upModelData"
                                    :headers="uploadHeaders" :before-upload="handleBeforeUploadModel"
                                    :on-success="handleUploadModelSuccess" :on-error="handleUploadModelFail"
                                    :on-remove="handleFileRemove" :on-exceed="handleFileExceed"
                                    :auto-upload-demo="false" :limit="1" accept=".onnx,.ts">
                                    <el-button type="primary"><el-icon class="el-icon--upload"> <i-ep-upload-filled />
                                        </el-icon>选择文件</el-button>
                                    <template #tip>
                                        <div class="el-upload__tip">
                                            请上传大小不超过<span style="color:coral">500M</span>,格式为<span
                                                style="color:coral">onnx/ts</span>的文件
                                        </div>
                                    </template>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
            </table>

        </el-card>

        <el-card class="card-footer">
            <el-button type="primary" @click="doSave">保存</el-button>
            <el-button @click="doBack">返回</el-button>
        </el-card>
    </div>
</template>

<script setup>
import ModelApi from '@/api/models'
import { TOKEN_KEY } from "@/enums/CacheEnum";
const router = useRouter();
const route = useRoute()
const data = reactive({
    info: {}
});
let listOpt = reactive({
    upFiles: []
});
let fileUpload = ref(import.meta.env.VITE_APP_BASE_API + "/models/upload");
let uploadHeaders = ref({
    Authorization: localStorage.getItem(TOKEN_KEY)
})
let upModelData = reactive({
    file_name: '',
    file_content: null
});
const uploadForm = ref(ElForm)
let upForm = reactive({
    model_file_list: [

    ]
})
function handleFileExceed() {
    ElMessage.warning("超过上传上限！");
}

function handleBeforeUploadModel(file, b, c) {
    if (file.size > 500 * 1024 * 1024) {
        ElMessage.warning("文件大小不能超500M");
        file.onError("文件大小不能超500M")
        return false;
    }
    let ext = file.name.split(".").pop().toLowerCase();
    if (["onnx", "ts"].indexOf(ext) == -1) {
        ElMessage.warning("请上传onnx/ts格式文件");
        file.onError("请上传onnx/ts格式文件")
        return false;
    }
    upModelData.file_name = file.name;
    upModelData.file_content = file;
}

function handleUploadModelSuccess(res) {
    if (res.code == 0) {
        listOpt.upFiles.push({
            name: res.data.file_name,
            serverName: res.data.file_name
        })
        upForm.model_file_list = listOpt.upFiles.map(it => it.serverName);
    } else {
        ElMessage.error("上传失败," + res.message);
        uploadRef1.value.clearFiles();
    }
}

function handleFileRemove(a, b, c) {
    let tmps = listOpt.upFiles.filter(d => d.name == a.name);
    if (tmps.length > 0) {
        let idx = listOpt.upFiles.indexOf(tmps[0]);
        listOpt.upFiles.splice(idx, 1);
    }
    upForm.model_file_list = listOpt.upFiles.map(it => it.serverName);
}

function handleUploadModelFail(res) {
    uploadRef1.value.clearFiles();
}

const upRules = computed(() => {
    return {
        model_file_list: [{ required: true, trigger: "blur", message: "请上传网络参数", }],
    }
});

const doSave = () => {
    uploadForm.value?.validate((valid) => {
        if (valid) {
            let id = route.query.id;
            let name=listOpt.upFiles[0].name;
            let data={
                id:id,
                fileName:name,
                fileType:name.split(".").pop()
            }
            ModelApi.updateModel(data).then(d=>{
               if(d.data?.code==0){
                ElMessage.success("更新模型成功!");
                setTimeout(()=>{
                    doBack();
                },1000);
               }else{
                ElMessage.error("更新模型失败!");
               }
            });
        }   
    }
    );
}

const doBack = () => {
    router.push({ path: "/modelMgr/index" })
}
const initData = () => {
    let id = route.query.id;
    ModelApi.findOne(id).then(d => {
        data.info = d.data.data;
    });
}

onMounted(() => {
    initData();
})

</script>

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

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

.edit-model {
    :deep(.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;
        }
    }
}
</style>