<template>
  <TrainChunkBox style="150px" title="各班组平均操作用时统计" ref="TeamGroupDuration">
      <template v-slot:title-left
      ><span v-if="!$store.isFullscreen"
        @click="$elementFullscreen($refs.TeamGroupDuration, init)"
        >全屏</span
      >
      </template
    >
    <div class="user-position" ref="TeamgroupAverageScores"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getTeamGroupDurationApi } from '@/api/training/train-evealuation'
import { Chart } from '@antv/g2'
export default {
  components: { TrainChunkBox },
  props: {
    subjectId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      baseData: null
    }
  },
  created () {},
  methods: {
    async getBaseData () {
      const { data } = await getTeamGroupDurationApi(this.subjectId)
      data.forEach((item) => {
        item.avgDur = +(+item.avgDur / 1000).toFixed(2)
      })
      data.sort((now, next) => {
        return now.orgId - next.orgId
      })
      this.baseData = data
      // this.formatData(data)
      this.init()
    },
    init () {
      this.chart?.destroy?.()
      const chart = new Chart({
        container: this.$refs.TeamgroupAverageScores,
        autoFit: true
      })
      chart.data(this.baseData)
      chart.coordinate().transpose().scale(1, -1)
      chart.tooltip({
        shared: true,
        showMarkers: false
      })
      chart.scale('avgDur', {
        nice: true
      })
      chart.axis('avgDur', {
        position: 'right'
      })
      chart.legend({
        position: 'top'
      })
      chart
        .interval()
        .position('posName*avgDur')
        .color('orgName')
        .adjust([
          {
            type: 'dodge',
            dodgeBy: 'orgName',
            marginRatio: 0
          }
        ])
        .tooltip('avgDur*orgName', (value, avgDur) => ({
          value: (+value).toFixed(2) + '秒',
          name: avgDur
        }))
      chart.interaction('active-region')

      chart.render()
      this.chart = chart
    }
  },
  watch: {
    subjectId: {
      handler () {
        this.getBaseData()
      },
      immediate: true
    }
  }
}
</script>

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