<template>
  <TrainChunkBox style="150px" title="科目训练历史成绩" ref="UserSubjectGrade">
     <template v-slot:title-left
      ><span
        v-if="!$store.isFullscreen"
        @click="
          $elementFullscreen(
            $refs.UserSubjectGrade,
            getBaseData,
            changeSize
          )
        "
        >全屏</span
      >
    </template>
    <div class="user-position" ref="userSubjectGrade"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getUserSubjectGradeApi } 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 getUserSubjectGradeApi(this.userId)
      data.forEach((item, index) => {
        item.sort = `第${index + 1}场`
      })
      this.baseData = data
      this.init()
    },
    init () {
      this.chart?.destroy()
      const chart = new Chart({
        container: this.$refs.userSubjectGrade,
        autoFit: true,
        height: 500
      })

      chart.data(this.baseData)
      chart.scale({
        sort: {
          range: [0, 1]
        },
        score: {
          min: 0,
          max: 100,
          nice: true
        }
      })

      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true,
        title: (title, datum) => {
          return `训练名称：${datum.tname}`
        },
        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">{sname}</span>
    </li>
  </ul>`
      })

      chart
        .line()
        .position('sort*score')
        .label('score')
        .tooltip('score*sname', (score, sname) => {
          return {
            score,
            sname
          }
        })
      chart.point().position('sort*score')

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

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