<template>
  <div style="width:200px;height:200px;">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

import { findStatisticDataApi } from '@/api/statistic'

export default {
  props: {
    exam: {
      default: null
    }
  },
  watch: {
    exam: {
      handler (nv) {
        this.findData(nv)
      }
    }
  },
  methods: {
    async findData (examId) {
      if (this.chart) {
        this.chart.destroy()
      }
      this.chart = new Chart({
        container: this.$el,
        autoFit: true,
        // height: 300,
        padding: [20]
      })
      this.chart.scale('value', {
        alias: '考试时长(分钟)'
      })
      const data = await findStatisticDataApi('exam-details-score-order-tower', { noCatch: true, exam: examId })
      // 添加文本标注
      data.forEach((item) => {
        this.chart
          .annotation()
          .text({
            position: [item.localOrder, item.score],
            content: item.score,
            style: {
              textAlign: 'center'
            },
            offsetY: -5
          })
      })
      this.chart.data(data)
      this.chart.axis('localOrder', {
        tickLine: {
          alignTick: false
        }
      })
      this.chart.axis('score', false)

      this.chart.tooltip({
        showMarkers: false,
        title: (title, datum) => title + ': ' + datum.name,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>分数: {score}</li>'
      })
      this.chart.interval().position('localOrder*score').tooltip('score*name*localOrder', (score, name, localOrder) => {
        return {
          score,
          name,
          localOrder
        }
      })
      this.chart.interaction('element-active')
      this.chart.render()
    }
  },

  mounted () {
    this.findData()
  }
}
</script>
