<template>
  <div class="app-container simulation-execution">
    <el-card>
      <div style="text-align: right;margin-bottom: 10px;">
        <el-button type="primary" @click="doRefresh">刷新</el-button>
      </div>
      <el-table v-loading="loading" ref="dataTb" :data="info.dataList" stripe height="400px">
        <el-table-column label="推理任务名称" align="left" prop="task_name" />
        <el-table-column label="模型名称" align="left" prop="model_name" />
        <el-table-column label="模型类型" align="left" prop="modl_net_type" />
        <el-table-column label="互联名称" align="left" prop="connection_name" />
        <el-table-column label="推理数据集名称" align="left" prop="dataset_name" />
        <el-table-column label="推理设备名称" align="left" prop="device_name" />
        <el-table-column label="运行状态" fixed="right" align="center" width="120" v-if="1 == 2">
          <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" @click="doStopTask(scope.row)">
              <i-ep-circle-close />&nbsp;终止推理</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-model:total="total" v-model:page="queryParams.pageNum" v-if="1 == 2"
        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 info.logs" :key="idx" class="log-item" :style="'color:'+it.color">        
        <span>[{{ it.logs_level }}]</span>
        <span>[{{ it.logs_time }}]</span>
        <span>{{ it.taskName }} - </span>
        <span>{{ it.logs_content }}</span>
      </div>
      <div v-if="!info.logs || info.logs.length==0">
       暂无日志
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useDateFormat } from "@vueuse/core";
import TaskApi from '@/api/task'
import LogsApi from '@/api/log'
import request from "axios";
let loading = ref(false)
let info = reactive({
  dataList: [],
  logs: [],
})
const logList = reactive([])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords: ''
});
const total = ref(100)
/** 查询 */
function handleQuery(a) {
  queryParams.pageSize = a.limit;
  ElMessage.success("查询成功");
  loading.value = false;
}
//加载最后日志
const loadLogs = () => {
  let ajaxs = info.dataList.filter(it => it.state == 0).map(it => {
    return LogsApi.inferenceTaskLatest(it.task_id,it.device_id)
  });
  request.all(ajaxs).then(d => {
    d.forEach(res=>{
      let logs=(res.data?.data?.latest_log_list||[]).map(log=>{
        let tasks=info.dataList.filter(d=>d.task_id==log.task_id);
        let task=tasks.length>0?tasks[0]:{}
        log.taskName=task.task_name||"";
        log.color=task.color;
        if(info.logs.filter(it=>it.task_id==log.task_id  && it.logs_content==log.logs_content).length>0){
          log.taskName="";
        }
        return log.taskName?log:"";
      }).filter(log=>log);
      info.logs=[...logs,...info.logs];
    });    
    setTimeout(loadLogs,3000);
  });
};

//刷新
function doRefresh(){
  loadData(true)
}
//终止任务
function doStopTask(row){
  ElMessageBox.confirm("确定要终止任务["+row.task_name+"]？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  }).then(() => {
    TaskApi.stopTask(row.task_id).then(d=>{
      if(d.data.code==0){
        ElMessage.success("终止任务["+row.task_name+"]成功!");
        setTimeout(doRefresh,5000);
      }else{
        ElMessage.error("终止任务["+row.task_name+"]失败!");
      }
    });
  });
 
}
//加载数据
const loadData = (onlyRefresh) => {
  loading.value = true;
  TaskApi.running().then(d => {
    loading.value = false;
    info.dataList = (d.data.data.running_task_list || []).map((it,idx) => {  
      it.color="#000000,#0000FF,#8A2BE2,#A52A2A,#DEB887,#5F9EA0,#7FFF00,#D2691E,#FF7F50,#6495ED".split(",")[idx%10];    
      it.state = 0;      
      return it;
    });    
    if(!onlyRefresh){
      loadLogs();
    }
  });
}
onMounted(loadData);
</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>