<template>
  <div class="chart" data-title="考试答题时长统计">
  </div>
</template>

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

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

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

      this.chart.tooltip({
        showMarkers: false
      })
      this.chart.interval().position('type*value')
      this.chart.interaction('element-active')
      this.chart.render()
    }
  }

}
</script>
