<template>
 <div class="app-container simulation-execution">
    <el-card>
        <el-table v-loading="loading" ref="dataTb" :data="tableData" stripe height="400px" >
            <el-table-column label="推理任务名称" align="left" prop="taskName" />
            <el-table-column label="模型名称" align="left" prop="modelName" />
            <el-table-column label="模型类型" align="left" prop="modelType" />
            <el-table-column label="互联名称" align="left" prop="netName" />
            <el-table-column label="推理数据集名称" align="left" prop="datasName" />            
            <el-table-column label="创建用户" width="120" align="left" prop="createUser" />
            <el-table-column label="推理设备名称"  align="left" prop="devName" />            
            <el-table-column label="运行状态" fixed="right" align="center" width="120">
                <template #default="scope"> 
                    <span :class="'run-state state-'+scope.row.state">{{ scope.row.state==1?'完成':'推理中' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="120">
                <template #default="scope">     
                    <el-button  text type="primary">
                        <i-ep-circle-close />&nbsp;终止推理</el-button>                
                </template>
            </el-table-column>

        </el-table>
        <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
    <div style="margin-top:30px;font-size:12px;font-weight: bold;margin-left:8px;">推理日志</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>
</template>

<script  setup>
let loading=ref(false)
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 queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords:''
});
const total=ref(100)
/** 查询 */
function handleQuery(a) {
  queryParams.pageSize=a.limit;  
  ElMessage.success("查询成功");
  loading.value = false;
  
}

let tableData=reactive([
    {id:"1",taskName:"人脸识别推理1",modelName:'进行人员检测的模型1',modelType:'图像分类',netName:'我的互联名称',datasName:'模型名称模型名称模型名称1',createUser:'User',devName:'Mobile-Vit',state:0},
    {id:"2",taskName:"人脸识别推理2",modelName:'进行人员检测的模型2',modelType:'图像分类',netName:'我的互联名称',datasName:'模型名称模型名称模型名称2',createUser:'User',devName:'Mobile-Vit',state:1},
    {id:"3",taskName:"人脸识别推理3",modelName:'进行人员检测的模型3',modelType:'图像分类',netName:'我的互联名称',datasName:'模型名称模型名称模型名称3',createUser:'User',devName:'Mobile-Vit',state:0},
    {id:"4",taskName:"人脸识别推理4",modelName:'进行人员检测的模型4',modelType:'图像分类',netName:'我的互联名称',datasName:'模型名称模型名称模型名称4',createUser:'User',devName:'Mobile-Vit',state:1}
])
</script>
<style  lang='scss'>
.simulation-execution{
    .split-log{
        font-size: 12px;
        .el-card__body{
            padding:8px;
        }
    }
    .run-state{
        &.state-0{
            color:var(--el-color-primary);
        }
        &.state-1{
            color:var(--el-color-success);
        }
    }
}
</style>