<!-- 模型评估详情 -->
<template>
  <div>
    <el-button :size="defaultFormItemSize" type="primary" @click="preview">预览命令</el-button>
    <el-button :size="defaultFormItemSize" type="primary" @click="start" :disabled="istraining">开始评估</el-button>
    <el-button :size="defaultFormItemSize" type="primary" @click="pause" :disabled="!istraining">中断评估</el-button>
    <el-tabs v-model="activeName" :size="defaultFormItemSize">
      <el-tab-pane label="运行详情" name="particulars">
        <particulars :item="item" />
      </el-tab-pane>
      <el-tab-pane label="评估报告" name="assessmentReport">
        <assessmentReport ref="assessmentReport" :item="item" :result="result" :img="img" />
      </el-tab-pane>
      <el-tab-pane label="评估日志" name="trainingLog">
        <trainingLog :item="item" :result="result" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

// import { MyModel } from '@/api/gptController.js';

import particulars from './operate/particulars';
import assessmentReport from './operate/assessmentReport';
import trainingLog from './operate/trainingLog';
// eslint-disable-next-line no-unused-vars
import previewCommand from './previewCommand';
// import { getSessionHash } from '@/utils/index';
import { ModelEstimate, PyApi } from '@/api/gptController.js';
export default {
  data () {
    return {
      istraining: false, // 是否在训练中
      img: '',
      result: '',
      SocketService: new this.$SocketService('queue/join', this.websocketonmessage, this.successful),
      wsData: {
        data: null,
        event_data: null,
        fn_index: 33,
        session_hash: this.item.taskId
      },
      activeName: this.page,
      timeImg: null
    };
  },
  props: {
    page: {
      default: 'particulars'
    },
    item: {
      default: {}
    }
  },
  components: { particulars, assessmentReport, trainingLog },

  computed: {},

  mounted () {

  },

  methods: {
    PyApi (index, data = []) {
      let param = {

        data: data,
        event_data: null,
        fn_index: index,
        session_hash: this.item.taskId
      }
      return PyApi.predict(this, param).then((res) => {
        if (index === 22) { // 图片
          console.log(res);
          this.img = JSON.parse(res.data).data[0]?.plot;

          console.log(this.img);
        } else if (index === 20) { // 暂停
          this.$message({
            message: '已暂停',
            type: 'success'
          })
        }
        // this.result = {output: {data: []}}
      })
    },
    preview () {
      this.$dialog.show('预览命令', previewCommand, {
        area: ['50%', '70%']
      }, { item: this.item }).then(res => {
        this.refresh();
      }).catch(e => { });
    },
    start () {
      this.SocketService.initWebSocket()
    },
    async pause () {
      await this.PyApi(34)
      ModelEstimate.updateById(this, {modelEstimateDto: {taskId: this.item.taskId, taskStatus: -2} }).then(res => {
        console.log(res);
      }).catch(e => {

      });
    },
    getPreviewCommand () { // 获取参数
      ModelEstimate.getPreviewCommand(this, { taskId: this.item.taskId }).then((res) => {
        this.wsData.data = res.data
        this.send(JSON.stringify(this.wsData))
      })
    },
    successful () { // 连接成功
      this.send(`{"fn_index":${this.wsData.fn_index},"session_hash":"${this.wsData.session_hash}"}`)
    },
    send (data) { // 发送参数
      this.SocketService.websocketsend(data)
    },
    websocketonmessage (e) { // 返回接收参数
      if (JSON.parse(e.data).msg === 'process_generating') {
        this.istraining = true
        this.result = JSON.parse(e.data)
        if (!this.timeImg) {
          // this.startGetImg()
        }
      } else if (JSON.parse(e.data).msg === 'process_completed') {
        this.$refs.assessmentReport.completed()
        clearInterval(this.timeImg)
        this.timeImg = null
        this.istraining = false
        this.$refs.assessmentReport.init(true)
      } else if (JSON.parse(e.data).msg === 'send_data') {
        this.getPreviewCommand()
      }
    },
    startGetImg () {
      this.timeImg = setInterval(() => {
        this.PyApi(22, [this.wsData.data[1], this.wsData.data[3], this.wsData.data[37]])
      }, 10000);
    }
  }
}

</script>
<style scoped>
div /deep/ .el-descriptions__title {
  font-size: 18px;
}
div /deep/.el-descriptions__table {
  width: 100%;
  line-height: 30px;
}
div /deep/ .el-card {
  margin-bottom: 20px;
}
.logBox {
  height: 500px;
  background-color: #eee;
  margin-top: 10px;
}
</style>
