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

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

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

export default {
  props: {
    type: {
      default: null
    }
  },
  watch: {
    type: {
      handler (nv) {
        this.findData(nv)
      }
    }
  },
  methods: {
    async findData (type) {
      if (this.chart) {
        this.chart.destroy()
      }
      this.chart = new Chart({
        padding: [30],
        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({
        showMarkers: false,
        title: (t, d) => d.item + '题型',
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>占比: {percent}</li>'
      })

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

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

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