<template>
  <TrainChunkBox style="150px" title="设备操作正确及错误次数统计" ref="UserOpeartionResult">
    <template v-slot:title-left
      ><span
        v-if="!$store.isFullscreen"
        @click="
          $elementFullscreen(
            $refs.UserOpeartionResult,
            getBaseData
          )
        "
        >全屏</span
      >
    </template>
    <div class="user-position" ref="userTranSubjectGrade"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getUserOperationResultApi } from '@/api/training/train-evealuation'
import { Chart } from '@antv/g2'
export default {
  components: { TrainChunkBox },
  props: {
    userId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      baseData: null
    }
  },
  created () {},
  methods: {
    async getBaseData () {
      if (!this.userId) return
      const { data } = await getUserOperationResultApi(this.userId)
      this.baseData = []
      Object.values(data).forEach((item) => {
        this.baseData.push({
          deviceName: item.deviceName,
          value: item.ok,
          type: '正确'
        })
        this.baseData.push({
          deviceName: item.deviceName,
          value: item.fail,
          type: '错误'
        })
        this.baseData.push({
          deviceName: item.deviceName,
          value: item.delay,
          type: '延误'
        })
      })
      this.init()
    },
    init () {
      this.chart?.destroy()
      const chart = new Chart({
        container: this.$refs.userTranSubjectGrade,
        autoFit: true,
        height: 500
      })

      chart.data(this.baseData)

      chart.scale('value', { nice: true })

      chart.legend({
        position: 'top'
      })

      chart.tooltip({
        showMarkers: false
      })

      chart
        .interval()
        .position('deviceName*value')
        .color('type')
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ])

      chart.interaction('element-list-highlight')

      chart.theme({
        styleSheet: {
          brandColor: '#5B8FF9',
          paletteQualitative10: [
            '#61ddaa',
            '#ff4500',
            '#f6bd16',
            '#F6BD16',
            '#7262fd',
            '#78D3F8',
            '#9661BC',
            '#F6903D',
            '#008685',
            '#F08BB4'
          ]
        }
      })
      chart.render()

      this.chart = chart
    }
  },
  watch: {
    userId () {
      this.getBaseData()
    }
  }
}
</script>

<style lang="scss" scoped>
.user-position {
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
