<!-- 训练日志 -->
<template>
  <div>
    <el-card>
      <div v-html="logText" class="box-card" ref="logBox" v-if="logText">
      </div>
      <div class="table-empty unified-font" v-else>
        <img src="@/assets/img/empty.png">
        <span>暂无数据</span>
      </div>
    </el-card>
  </div>
</template>
  
<script>
// import { MyModel } from '@/api/gptController.js';
import { ModelEstimate } from '@/api/gptController.js';
export default {
  data () {
    return {
      active: 0,
      allLog: this.result?.output?.data[0] || ''
    };
  },
  props: ['item', 'result'],
  components: {},

  computed: {
    logText () {
      return this.allLog.replace(/\n/g, '<br/>')
    }
  },
  watch: {
    result (n, o) {
      // console.log(n);
      this.allLog += n?.output?.data[0];
      this.$nextTick(() => {
        this.$refs.logBox.scrollTo(0, this.$refs.logBox.scrollHeight)
      })
    }
  },

  mounted () {
    this.init()
  },

  methods: {
    init (run = false) {
      if (run || this.item.taskStatus === 1 || this.item.taskStatus === 2) { // 训练完成
        ModelEstimate.getLog(this, { taskId: this.item.taskId }).then((res) => {
          this.allLog = res.data
        })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    select (active) {
      this.active = active
    }
  }
};
</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;
}
.box-card {
  height: calc(100vh - 250px);
  overflow: auto;
}
</style>
