<template>
    <div class="app-container upload-model">
        <div class="search-container" style="padding-top:4px;padding-right:20px;">
            <h4>模型基本信息</h4>
            <el-form ref="uploadForm" :rules="upRules" :model="upForm" label-width="120">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模型名称" prop="model_name">
                            <el-input v-model="upForm.model_name" placeholder="请输入模型名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="div-mode-type">
                        <el-row>
                            <el-col :span="14">
                        <el-form-item label="模型类型" prop="modl_main_type">
                            <el-select v-model="upForm.modl_main_type" placeholder="请选择" 
                                @change="doMainTypeChange">
                                <el-option v-for="(it, idx) in listOpt.modelType" :key="idx"
                                    :label="it.modl_main_type_name" :value="it.modl_main_type" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                            <el-col :span="10">
                                <el-form-item label="" prop="modl_sub_type" class="form-item-sub-type">
                            <el-select v-model="upForm.modl_sub_type" placeholder="请选择">
                                <el-option v-for="(it, idx) in listOpt.modelSubType" :key="idx"
                                    :label="it.modl_sub_type_name" :value="it.modl_sub_type" />
                            </el-select>
                        </el-form-item>
                            </el-col>
                        </el-row>
                        
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模型版本" prop="model_version">
                            <el-input v-model="upForm.model_version" placeholder="请输入模型版本" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="版本描述">
                            <el-input v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4"
                                placeholder="请输入版本描述" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="算法框架" prop="modl_framework">
                            <el-select v-model="upForm.modl_framework" placeholder="请选择"
                                style="width: 48%;margin-left:2%;">
                                <el-option v-for="(it, idx) in listOpt.modelFramework" :label="it" :value="it"
                                    :key="idx" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模型网络" prop="modl_net_type">
                            <el-select v-model="upForm.modl_net_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
                                <el-option v-for="(it,idx) in listOpt.modelNetType" :label="it" :value="it" :key="idx" />
                                
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="文件格式" prop="modl_file_type">
                            <el-select v-model="upForm.modl_file_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
                                <el-option v-for="(it,idx) in listOpt.modelFileType" :label="it" :value="it" :key="idx" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="网络参数">
                            <el-upload v-model:file-list="fileList" class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
                                <el-button type="primary">请选择文件</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        请上传大小不超过<span style="color:coral">10M</span>,格式为<span
                                            style="color:coral">onnx/ts</span>的文件
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="网络配置">
                            <el-upload v-model:file-list="fileList" class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
                                <el-button type="primary">请选择文件</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        请上传大小不超过<span style="color:coral">10M</span>,格式为<span
                                            style="color:coral">json</span>的文件
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
        <div class="div-log">
            <div style="font-weight: bold;font-size:14px;padding:10px 10px">分割日志</div>
            <el-card class="split-log">
                <div v-for="(it, idx) in logList" :key="idx" class="log-item">
                    <span>{{ it.date }}</span>
                    <span>{{ it.log }}</span>
                </div>
            </el-card>
        </div>
        <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 ConstApi from '@/api/const'
import ModelApi from '@/api/models'
import request from "axios";
const router = useRouter();
let listOpt = reactive({
    modelType: [],
    modelFramework: [],
    modelNetType: [],
    modelFileType: [],
    modelSubType: [],
})
let fileList=ref([])

const doSave = () => {
    uploadForm.value?.validate((valid) => {
        if (valid) {
            ModelApi.add(upForm).then(d=>{
                if(d.data.code==0){
                    ElMessage.success("增加模型成功!");
                    router.push({ path: "/modelMgr/index" })
                }
            })
            
        }
    });
    
}
const doBack = () => {
    router.push({ path: "/modelMgr/index" })
}
const uploadForm = ref(ElForm)
let upForm = reactive({
    model_name: '',
    model_version: '',
    model_desc: '',
    modl_main_type: '',
    modl_sub_type: '',
    modl_net_type: '',
    modl_framework: '',
    modl_file_type: '',
    model_parameters: {},
    model_file_list: []
})
const logList = reactive([{
    date: '2024-05-06 18:34:36', log: '系统已启动编译'
}, { date: '2024-05-06 18:34:36', log: '系统正在分割目标文件' },
{ date: '2024-05-06 18:34:36', log: '运行时异常，系统编译已终止' }])

const upRules = computed(() => {
    return {
        model_name: [{required: true,trigger: "blur",message: "请输入模型名称",},],
        modl_main_type: [{required: true,trigger: "blur",message: "请选择主类型",}],
        modl_sub_type: [{required: true,trigger: "blur",message: "请选择子类型",}],
        model_version: [{required: true,trigger: "blur",message: "请输入模型版本",}],
        modl_framework: [{required: true,trigger: "blur",message: "请选择算法框架",}],
        modl_net_type: [{required: true,trigger: "blur",message: "请选择模型网络",}],
        modl_file_type: [{required: true,trigger: "blur",message: "请选择文件类型",}],
    }
});

const initData = () => {
    let ajaxs = [];
    ajaxs.push(ConstApi.modlMainType());
    ajaxs.push(ConstApi.modlFramework());
    ajaxs.push(ConstApi.modlNetType());
    ajaxs.push(ConstApi.modlFileType());
    request.all(ajaxs).then(res => {
        listOpt.modelType = res[0].data?.data?.modl_main_type_list || [];
        listOpt.modelFramework = res[1].data?.data?.modl_framework_list || [];
        listOpt.modelNetType = res[2].data?.data?.model_net_type_list || [];
        listOpt.modelFileType = res[3].data?.data?.modl_file_type_list || [];
    });
}
const doMainTypeChange = () => {
    let mainType = upForm.modl_main_type;
    let subList = listOpt.modelType.filter(d => d.modl_main_type == mainType);
    listOpt.modelSubType = subList.length > 0 ? subList[0].modl_sub_type_list || [] : [];
}
onMounted(() => {
    initData();
});

</script>
<style scoped lang='scss'>
.card-footer {
    position: fixed;
    width: calc(100% - 215px);
    bottom: 0px;
}

.div-log {
    font-size: 12px;

    :deep(.el-card__body) {
        padding: 8px;
    }
}
</style>
<style lang="scss">
.upload-model{
    .div-mode-type{
        .form-item-sub-type{
            .el-form-item__content{
                margin-left:10px !important;
            }
        }
    }
}
</style>