<template>
  <TrainChunkBox style="150px" title="号位选择比较">
    <div class="user-position" ref="userPosition"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getUserPositionfoApi } 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 getUserPositionfoApi(this.userId)
      data.forEach((item) => {
        item.percent = +item.percent
        item.positionId = `${item.positionId}`
      })
      this.baseData = data
      this.init()
    },
    init () {
      this.chart?.destroy()
      const chart = new Chart({
        container: this.$refs.userPosition,
        autoFit: true,
        height: 500
      })
      chart.data(this.baseData)
      chart.scale('percent', {
        formatter: (val) => {
          val = Math.round(val) + '%'
          return val
        }
      })
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6
      })
      chart.legend({ position: 'right' })
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      // 辅助文本
      chart
        .annotation()
        .text({
          position: ['50%', '50%'],
          content: '总号位数',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetY: -10
        })
        .text({
          position: ['50%', '50%'],
          content: this.baseData[0]?.total,
          style: {
            fontSize: 20,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetX: 0,
          offsetY: 10
        })
      chart
        .interval()
        .adjust('stack')
        .position('percent')
        .color('positionName')
        .label('positionId', {
          offset: '80%',
          style: {
            textAlign: 'center',
            fontSize: 12,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)'
          },
          content: (data) => {
            return data.positionName
          }

        })
      chart.interaction('element-active')
      this.chart = chart
      chart.render()
    }
  },
  watch: {
    userId () {
      this.getBaseData()
    }
  }
}
</script>

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