<!-- 评估报告 -->
<template>
    <div>
        <el-card class="box-card" >
          <el-descriptions title="评估报告">
                <el-descriptions-item label="最佳性能指标：">{{assessmentReport?.best_metric||'/'}}</el-descriptions-item>
                <el-descriptions-item label="最佳模型的检查点路径：">{{assessmentReport?.best_model_checkpoint||'/'}}</el-descriptions-item>
                <el-descriptions-item label="当前的训练轮数：">{{ assessmentReport?.epoch||'/' }}</el-descriptions-item>
                <el-descriptions-item label="全局步数：">{{assessmentReport?.global_step||'/' }}</el-descriptions-item>
                <el-descriptions-item label="是否为超参数搜索：">{{assessmentReport?.is_hyper_param_search||'/' }}</el-descriptions-item>

                <el-descriptions-item label="是否是本地进程的第一个进程：">{{assessmentReport?.is_local_process_zero||'/' }}</el-descriptions-item>
                <el-descriptions-item label="是否是全局进程的第一个进程：">{{assessmentReport?.is_world_process_zero||'/' }}</el-descriptions-item>
                <el-descriptions-item label="最大训练步数：">{{assessmentReport?.max_steps||'/' }}</el-descriptions-item>
                <el-descriptions-item label="训练的总epoch数：">{{assessmentReport?.num_train_epochs||'/' }}</el-descriptions-item>
                <el-descriptions-item label="每隔N步保存一次模型：">{{assessmentReport?.save_steps||'/' }}</el-descriptions-item>
                <el-descriptions-item label="总的浮点运算数：">{{assessmentReport?.total_flos||'/' }}</el-descriptions-item>
                <el-descriptions-item label="试验名称：">{{assessmentReport?.trial_name||'/' }}</el-descriptions-item>
                <el-descriptions-item label="试验参数：">{{assessmentReport?.trial_params||'/' }}</el-descriptions-item>
        
            </el-descriptions>
            <div class="main" ref="main" ></div>
            <!-- <div class="main">
              <img   v-if="img" :src="img" alt="">
            </div>
        -->
        </el-card>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import { TuningRun } from '@/api/gptController.js';
// import { MyModel } from '@/api/gptController.js';
export default {
  data () {
    return {
      assessmentReport: undefined,
      echarts: null,
      option: {
        color: ['#37A2FF', '#FFBF00'],
        legend: {
          type: 'scroll',
          top: '0%',
          left: 'center',
          show: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
    
          // {
          //   smooth: true,
          //   lineStyle: {
          //     width: 0
          //   },
          //   showSymbol: false,
          //   areaStyle: {
          //     opacity: 0.8,
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: 'rgb(255, 191, 0)'
          //       },
          //       {
          //         offset: 1,
          //         color: 'rgb(224, 62, 76)'
          //       }
          //     ])
          //   },
          //   data: [150, 230, 224, 218, 135, 147, 260],
          //   type: 'line',
          //   name: 'smoothed'
          // },
          {
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            data: [],
            type: 'line',
            name: 'original'
          }
        ]
      }
    };
  },
  props: ['item', 'result', 'img'],
  components: {},

  computed: {

  },

  mounted () {
    // this.echarts = echarts.init(this.$refs.main);
    // this.refresh();
    this.init()
  },

  methods: {
    init (run = false) {
      if (run || this.item.runStatus === 1 || this.item.runStatus === 2 || this.item.runStatus === -1) { // 训练完成
        TuningRun.getStatus(this, {runId: this.item.runId}).then((res) => {
          this.assessmentReport = JSON.parse(res.data)
          let logHistory = this.assessmentReport.log_history.slice(0, -1)
          logHistory.forEach(item => {
            this.option.xAxis.data.push(item.step)
            this.option.series[0].data.push(item.loss)
          });
          this.echarts = echarts.init(this.$refs.main);
          this.refresh();
        })
      }
    },
    refresh () {
      if (this.echarts != null) {
        this.echarts.setOption(this.option, true);
        this.echarts.resize();
      }
    },
    resize () {
      if (this.echarts != null) {
        this.echarts.resize();
      }
    },
    completed () { // 完成训练
        
    }
  }
};
</script>
<style scoped>
div /deep/ .el-card{
    margin-bottom: 20px;
}

.main{
  height: calc(100vh - 450px);
  width: calc(100vw - 100px);
}
.main img{
  height: 100%;
  width: 100%;
}
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;
}
</style>
