<!-- 评估报告 -->
<template>
  <div>
    <el-card class="box-card">
      <el-descriptions title="评估指标分析">
        <el-descriptions-item>
          <div style="display: flex;flex-direction: row; justify-content: space-between;  align-items: center;">
            <div class="main" ref="main">
              <div class="table-empty unified-font">
                <img src="@/assets/img/empty.png">
                <span>暂无数据</span>
              </div>
            </div>
            <div style="width: calc(100% - 750px)">

              <el-table :data="tableData">
                <el-table-column prop="label" label="自动规则打分指标">
                </el-table-column>
                <el-table-column prop="value" :label="item.modelVersionIdDictMap.name" >
                </el-table-column>

              </el-table>
            </div>
          </div>
     </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <el-descriptions title="模型结果分析">
        <el-descriptions-item>
          <modelResultAnalysis :item="item"></modelResultAnalysis>
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

  </div>
</template>
  
<script>
import * as echarts from 'echarts';

import modelResultAnalysis from './modelResultAnalysis';
import { ModelEstimate } from '@/api/gptController.js';
// import { MyModel } from '@/api/gptController.js';
export default {
  data () {
    return {
      assessmentReport: undefined,
      echarts: null,
      tableData: [],
      
      option: {
        color: ['#56A3F1', '#FFE434', '#67F9D8', '#FF917C'],
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            var relVal = params.name
            params.value.forEach((item, index) => {
              relVal += `<br>   ${this.option.radar[0].indicator[index].text}:${item}%`
            })
            return relVal
          }
        },

        textStyle: {
          fontSize: '13',
          color: '#000'
        },

        radar: [
          {
            indicator: [],

            shape: 'circle'

          }
        ],
        
        series: [
          {

            type: 'radar',
            tooltip: {
              trigger: 'item'
            },

            areaStyle: {},
            data: [
              {
             
                name: '数据',
                value: []
              }
            ]
          }
        ]
      }
    };
  },
  props: ['item', 'result', 'img'],
  components: {modelResultAnalysis},

  computed: {

  },

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

  methods: {
    init (run = false) {
      if (run || this.item.taskStatus === 1 || this.item.taskStatus === 2) { // 训练完成
        ModelEstimate.getStatus(this, { taskId: this.item.taskId }).then((res) => {
          this.assessmentReport = JSON.parse(res.data)
          for (const key in this.assessmentReport) {
            const element = this.assessmentReport[key];
            if (key !== 'predict_samples_per_second' && key !== 'predict_steps_per_second' && key !== 'predict_runtime') {
              this.option.radar[0].indicator.push({ text: key, max: 100 })
              this.option.series[0].data[0].value.push(element)
            }
            this.tableData.push({
              label: key,
              value: element
            })
          }
 
          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 - 650px);
  width: 700px;
}
/* .main img{
  height: 100%;
  width: 30%;
} */
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>
