<template>
  <div class="chart" data-title="试题难度占比统计">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'
import { DataView } from '@antv/data-set'

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

export default {
  methods: {
    async findData () {
      const data = await findStatisticDataApi('questions-count-by-type-and-difficulty-percent')
      const dv = new DataView()
      dv.source(data).transform({
        type: 'percent',
        field: 'value',
        dimension: 'type',
        as: 'percent'
      })
      const chart = new Chart({
        container: this.$el,
        autoFit: true,
        height: 300,
        padding: [10]
      })

      chart.data(dv.rows)
      chart.scale({
        percent: {
          formatter: (val) => {
            val = (val * 100).toFixed(2) + '%'
            return val
          }
        }
      })
      chart.coordinate('theta', {
        radius: 0.45
      })
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><p><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</p><p><span style="background-color:transparent;margin-top:5px" class="g2-tooltip-marker"></span>数量: {count} 道</p></li>'
      })
      chart.legend(false)
      chart
        .interval()
        .adjust('stack')
        .position('percent')
        .color('type')
        .label('type', {
          offset: -10,
          style: {
            fontSize: 9
          }
        })
        .tooltip('type*percent*value', (item, percent, value) => {
          percent = (percent * 100).toFixed(2) + '%'
          return {
            name: item,
            value: percent,
            count: value
          }
        })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        })

      const outterView = chart.createView()
      const dv1 = new DataView()
      dv1.source(data).transform({
        type: 'percent',
        field: 'value',
        dimension: 'name',
        as: 'percent'
      })

      outterView.data(dv1.rows)
      outterView.scale({
        percent: {
          formatter: (val) => {
            val = (val * 100).toFixed(2) + '%'
            return val
          }
        }
      })
      outterView.coordinate('theta', {
        innerRadius: 0.45 / 0.65,
        radius: 0.7
      })
      outterView
        .interval()
        .adjust('stack')
        .position('percent')
        .color('name', ['#BAE7FF', '#7FC9FE', '#71E3E3', '#ABF5F5', '#8EE0A1', '#BAF5C4'])
        .label('name', (namev) => {
          return {
            content: namev.split('-')[1]
          }
        }, {
          style: {
            fontSize: 11
          }
        })
        .tooltip('name*percent*value', (item, percent, value) => {
          percent = (percent * 100).toFixed(2) + '%'
          return {
            name: item,
            value: percent,
            count: value
          }
        })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        })

      chart.interaction('element-highlight')

      chart.render()
    }
  },

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