<template>
  <TrainChunkBox style="150px" title="号位成绩比较" ref="UserPositionGrade">
    <template v-slot:title-left
      ><span
        v-if="!$store.isFullscreen"
        @click="
          $elementFullscreen(
            $refs.UserPositionGrade,
            getBaseData,
            changeSize
          )
        "
        >全屏</span
      >
    </template>
    <div class="user-position" ref="userPositionGrade"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getUserPositionGradeApi } 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 getUserPositionGradeApi(this.userId)
      this.baseData = data
      data.forEach((item, index) => {
        item.posId = `${item.posId}`
        item.sortName = `第${index + 1}场`
      })
      this.init()
    },
    init () {
      this.chart?.destroy()

      const chart = new Chart({
        container: this.$refs.userPositionGrade,
        autoFit: true,
        height: 500
      })

      chart.data(this.baseData)
      chart.scale('score', {
        max: 100,
        nice: true
      })

      chart.tooltip({
        showMarkers: false,
        title: (title, datum) => '训练名称：' + datum.trainName,
        itemTpl: `
        <ul class="g2-tooltip-list">
          <li class="g2-tooltip-list-item">
            <span style="background-color:{color};" class="g2-tooltip-marker"></span>
            <span class="g2-tooltip-name">分数：</span><span class="g2-tooltip-value">{score}分</span>
          </li>
           <li class="g2-tooltip-list-item">
            <span style="background-color:{color};" class="g2-tooltip-marker"></span>
            <span class="g2-tooltip-name">号位：</span><span class="g2-tooltip-value">{posName}</span>
          </li>
        </ul>`
      })

      chart
        .interval()
        .position('sortName*score')
        .color('posId')
        .adjust('stack')
        .tooltip('score*trainName*posName', (score, trainName, posName) => {
          return {
            score,
            trainName,
            posName
          }
        })

      chart.interaction('element-highlight-by-color')

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

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