<!-- 任务列表操作 -->
<template>

    <div class="tableBox">
      <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 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 { TuningRun, 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: 19,
        session_hash: this.item.runId
      },
      activeName: this.page,
      timeImg: null
    };
  },
  props: ['page', 'item'],
  components: {particulars, assessmentReport, trainingLog},

  computed: {},

  mounted () {
    
  },

  methods: {

    PyApi (index, data = []) {
      let param = {
       
        data: data,
        event_data: null,
        fn_index: index,
        session_hash: this.item.runId
      }
      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(20)
      TuningRun.updateById(this, {tuningRunDto: {runId: this.item.runId, runStatus: -2}}).then(res => {
        console.log(res);
      }).catch(e => {

      });
    },
    getPreviewCommand () { // 获取参数
      TuningRun.getPreviewCommand(this, {runId: this.item.runId}).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}"}`)
      // this.getPreviewCommand()
    },
    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>
</style>
