<template>
    <div class="app-container simulation-compile">
        <el-card>
            <template #header>互联说明</template>
            <el-form ref="uploadForm" :model="upForm" label-width="120">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模型名称">
                            <el-input disabled v-model="upForm.name" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模型类型">
                            <el-input disabled v-model="upForm.type" placeholder="VIT" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="互联名称">
                            <el-input disabled v-model="upForm.netName" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="互联说明">
                            <el-input disabled v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4"
                                placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card style="margin-top:12px">
            <template #header>硬件设备列表</template>
            <el-table v-loading="loading" :data="tableData" stripe height="300">
                <el-table-column type="selection" width="55" />
                <el-table-column label="设备名称" align="left" prop="name" />
                <el-table-column label="已部署模型名称" align="left" prop="modelName" />
                <el-table-column label="已部署模型类型" align="left" prop="modelType" />
                <el-table-column label="部署时间" align="left" prop="time" />
                <el-table-column label="设备状态" align="left" prop="devState">
                    <template #default="scope">{{ scope.row.devState == 0 ? '空闲' : '推理中' }}</template>
                </el-table-column>
                <el-table-column label="量化和编译参数" align="left" prop="parm" width="280">
                    <template #default="scope">
                        <el-upload v-model:file-list="fileList" class="upload-demo" :limit="1">
                            <el-button>
                                <i-ep-upload-filled />
                                上传文件</el-button>
                            <el-button text type="primary" size="small" v-if="scope.row.parm">查看参数</el-button>
                            <span style="color: #ccc;font-size:12px;white-space: nowrap;margin-left:8px;"
                                v-else>无参数,请上传参数文件</span>
                        </el-upload>
                    </template>
                </el-table-column>
                <el-table-column label="编译部署结果" align="left" prop="state">
                    <template #default="scope">
                        <el-button type="success" link size="small" v-if="scope.row.state == 1">部署成功</el-button>
                        <el-button type="danger" link size="small" v-else-if="scope.row.state == 2">部署失败</el-button>
                        <span v-else></span>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>

        <div style="font-size:12px;font-weight: bold;margin-top:12px;padding-left: 8px;">编译部署日志</div>
        <el-card style="margin-top:0px;margin-bottom: 60px;">
            <div v-for="(it, idx) in logList" :key="idx" class="log-item">
                <span>{{ it.date }}</span>
                <span>{{ it.log }}</span>
            </div>
        </el-card>

        <el-card class="card-footer">
            <el-button type="primary" @click="doCompile">编译部署</el-button>
            <el-button type="primary" @click="doToReason">转到推理</el-button>
            <el-button @click="doCancel">取消</el-button>
        </el-card>
    </div>
</template>

<script setup>
const router = useRouter();
const uploadForm = ref(ElForm)
const upForm = reactive({
    name: '目标分类模型',
    type: "VIT",
    netName: "互联名称",
    desc: "互联说明互联说明互联说明互联说明互联说明互联说明互联说明互联说明互联说明互联说明"
})

const doCompile = () => {

}
const doToReason = () => {

}
const doCancel = () => {
    router.push({ path: "/simulationEvaluation/index" })
}

const tableData = [
    {
        id: "1",
        name: "设备名称设备名称设备名称",
        modelName: "进行人员检测的模型",
        modelType: "Mobile-Vit",
        time: "2024-02-02 18:00:00",
        devState: 0,
        parm: 'aa.json',
        state: '1'
    },
    {
        id: "2",
        name: "设备名称设备名称设备名称",
        modelName: "进行人员检测的模型",
        modelType: "Mobile-Vit",
        time: "2024-02-02 18:00:00",
        devState: 0,
        parm: '',
        state: '0'
    },
    {
        id: "3",
        name: "设备名称设备名称设备名称",
        modelName: "进行人员检测的模型",
        modelType: "Mobile-Vit",
        time: "2024-02-02 18:00:00",
        devState: 0,
        parm: 'bb.json',
        state: '2'
    },
    {
        id: "3",
        name: "设备名称设备名称设备名称",
        modelName: "进行人员检测的模型",
        modelType: "Mobile-Vit",
        time: "2024-02-02 18:00:00",
        devState: 1,
        parm: 'cc.json',
        state: '1'
    },
];
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: '运行时异常，系统编译已终止' }])
</script>
<style scoped lang='scss'>
.simulation-compile {
    :deep(.el-card__header) {
        padding: 8px 12px;
        display: flex;
        align-items: center;
        font-weight: bold;
    }

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

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

            .el-pagination {
                justify-content: end;
            }
        }
    }
    .log-item{
        font-size: 12px;
        color:#666;
    }
}
</style>