<template>
  <div class="gy-chart chart" data-title="错题题型占比">
  </div>
</template>

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

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

export default {
  props: {
    exam: {}
  },
  watch: {
    exam: {
      deep: true,
      immediate: true,
      handler (nv) {
        nv && this.$nextTick(() => { this.findData(nv.historyId) })
      }
    }
  },
  methods: {
    async findData (historyId) {
      const data = await findStatisticDataApi('exam-details-mistakes-percent', { noCatch: true, historyId })
      this.chart?.destroy?.()
      this.chart = new Chart({
        padding: [30, 0],
        container: this.$el,
        autoFit: true,
        height: 300
      })
      this.chart.scale('percent', {
        formatter: (val) => {
          val = val * 100 + '%'
          return val
        }
      })
      this.chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6
      })
      this.chart.tooltip({
        showTitle: true,
        showMarkers: false,
        title: (t, d) => { return `${d.name}：${d.count}道` },
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>数量占比: {value}</li>'
      })

      this.chart
        .interval()
        .adjust('stack')
        .position('percent')
        .color('name')
        .label('percent', (percent) => {
          return {
            content: (data) => {
            // ${data.item}:
              return `${(percent).toFixed(2)}%`
            }
          }
        })
        .tooltip('name*percent*count', (name, percent, count) => {
          return {
            name,
            value: percent + '%',
            count
          }
        })

      this.chart.interaction('element-active')
      this.chart.data(data)
      this.chart.annotation().html({
        position: ['50%', '50%'],
        html: `<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">错题数<br><span style="color:#8c8c8c;font-size:20px">${(data?.[0]?.total ?? 0)}</span>道</div>`,
        alignX: 'middle',
        alignY: 'middle'
      })
      this.chart.render()
    }
  }

}
</script>
