<template>
  <div id="node1"/>
</template>

<script>
import G2 from '@antv/g2'
import DataSet from '@antv/data-set'

export default {  
  props: [
    'data',  // [ { item: '实例1', count: 210, percent: 0.21 } ]
  ],
  computed: {
    total () {
      return (this.data || []).reduce((acc, it) => (acc + it.count), 0) || 0
    }
  },
  watch: {
    data () {
      this.rander()
    }
  },
  mounted() {
    this.rander()
  },
  methods: {
    rander() {
      const _self = this
      
      if (this.chart) {
        this.chart.clear();
      } else {
        this.chart = new G2.Chart({
          container: 'node1',
          forceFit: true,
          height: 282,
          animate: false,
          padding: [40, 'auto', 'auto', 'auto']
        });
      }

      var chart = this.chart

      chart.source(_self.data, {
        percent: {
          formatter: function formatter(val) {
            val = val * 100 + '%';
            return val;
          }
        }
      });

      chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
      });

      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });

      chart.legend(false);

      chart.guide().html({
        position: ['50%', '-15%'],
        html: '<div class="chart2-title"><p class="title">历史工单</p></div>'
      })

      // 辅助文本
      chart.guide().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">${_self.total}</span>单</div>`,
        alignX: 'middle',
        alignY: 'middle'
      });

      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
        formatter: function formatter(val, item) {
          return item.point.item + ': ' + val;
        },
        textStyle: {
          fill: '#a4b6c5', // 文本的颜色
          fontSize: '12' // 文本大小
        }
      }).tooltip('item*percent', function(item, percent) {
        // percent = percent * 100 + '%';
        window.console.log('------>', _self.data, item)
        return {
          name: item,
          value: _self.data.filter(({ item: it }) => (it == item))[0].count,
        };
      });

      chart.render();
      // interval.setSelected(this.data[0]);
    }
  }
}
</script>

<style lang="scss">
#node1 {
  .g2-guide-html {
    color: #a4b6c5;
    .title {
      text-align: "ceter";
    }
    .value {
      text-align: center;
    }
  }
  .g2-guide-title {
    color: #a4b6c5;
    .title {
      font-size: 16px;
    }
  }
}
</style>
