<template>
  <TrainChunkBox title="训练步骤统计信息">
    
    <div
      ref="stepevealuation"
      style="height: 100%; overflow: hidden; padding: 5px"
    ></div>
  </TrainChunkBox>
</template>

<script>
import { Chart } from '@antv/g2'
import { getStepApi } from '@/api/training/train-evealuation'
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
export default {
  components: { TrainChunkBox },
  data () {
    return {
      allData: [],
      chart: null,
      showGroupData: null
    }
  },
  props: {
    trainId: {
      type: Number,
      required: true
    },
    checkedGroup: {
      type: Number,
      default: 1
    }
  },
  created () {
    // this.initData()
  },
  methods: {
    async getStepData () {
      const { data } = await getStepApi(this.trainId)
      this.allData = data
    },
    init () {
      this.chart?.destroy?.()
      const chart = new Chart({
        container: this.$refs.stepevealuation,
        autoFit: true
      })
      chart.data(this.showGroupData)
      chart.coordinate().transpose()
        .scale(1, -1)
      chart.tooltip({
        shared: true,
        showMarkers: false
      })
      chart.scale('count', {
        nice: true
      })
      chart.axis('count', {
        position: 'right'
      })
      chart.legend({
        position: 'top'
      })
      chart
        .interval()
        .position('name*count')
        .color('type')
        .adjust([
          {
            type: 'dodge',
            dodgeBy: 'type',
            marginRatio: 0
          }
        ])
      chart.interaction('active-region')
      chart.theme({
        styleSheet: {
          brandColor: '#FF6B3B',
          paletteQualitative10: [
            '#6395fa',
            '#63daab',
            '#fe615f'

          ],
          paletteQualitative20: [
            '#FF6B3B',
            '#626681',
            '#FFC100'
          ]
        }
      })

      chart.render()
      this.chart = chart
    },
    formatData () {
      const allStep = []
      const correctStep = []
      const errorStep = []
      console.log(this.allData);
      this.allData[this.checkedGroup]?.forEach((user) => {
        allStep.push({
          name: user.name,
          count: user.count,
          type: '标准步骤数'
        })
        correctStep.push({ name: user.name, count: user.ok, type: '正确步骤数' })
        errorStep.push({
          name: user.name,
          count: user.fail,
          type: '错误步骤数'
        })
      })
      this.showGroupData = [...allStep, ...correctStep, ...errorStep]
      console.log(this.showGroupData);
      this.$nextTick(() => {
        this.init()
      })
    }
  },
  watch: {
    trainId () {
      this.getStepData(this.trainId)
    },
    allData () {
      this.formatData()
    },
    checkedGroup () {
      this.formatData()
    }
  },
  computed: {}
}
</script>
z
<style lang="scss" scoped>
</style>
