<template>
  <div id="circleChart" class="chart-view"></div>
</template>

<script>
import theme from '../../../styles/element-ui.scss';
import elementResizeDetectorMaker from 'element-resize-detector'
import * as echarts from 'echarts'
export default {
  name: "CircleChart",
  props: {
    chartData: {
      type: Object,
      default: () => ({
        usedConnectorCount: 0,
        unusedConnectorCount: 0,
        allConnectorCount: 1
      })
    }
  },
  data() {
    return {
      chart: null,
      resize: 0
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.setOptions();
        })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('circleChart'), element => {
      const s = this.resize + 1;
      this.resize = s;
      setTimeout(() => {
        this.resizeChart(s);
      }, 50);
    })
  },
  methods: {
    resizeChart(p) {
      if (p == this.resize) {
        if (this.chart) {
          this.resize = 0;
          this.chart.resize()
        }
      }
    },
    initChart() {
      console.log(echarts);
      this.chart = echarts.init(document.getElementById('circleChart'), 'macarons')
      this.setOptions()
    },
    setOptions() {
      let percent = 0;
      if (this.chartData.allConnectorCount) {
        percent = (this.chartData.usedConnectorCount * 100 / this.chartData.allConnectorCount).toFixed(0);
      }
      const data =[{ 
        value: this.chartData.usedConnectorCount,
        name: 'In Use',
        itemStyle: {
          color: theme.colorAccent
        }
      }, {
        value: this.chartData.unusedConnectorCount,
        name: 'Unused',
        itemStyle: {
          color: "#001489"
        }
      }]
      if (!this.chartData.usedConnectorCount) {
        data[0].value = undefined;
      }
      this.chart.setOption({
        title: {
          text: percent + "%",
          left: "center",
          bottom: "41%",
          textStyle: {
            color: "#333",
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth: 14,
          selectedMode: false
        },
        series: [ {
          name: 'Connector',
          type: 'pie',
          radius: ['55%', '70%'],
          avoidLabelOverlap: false,
          stillShowZeroSum: true,
          label: {
            show: false,
            position: 'center'
          },
          startAngle: -90,
          center: ['50%', '46%'],
          emphasis: {
            scale: false,
            label: {
              show: false
            }
          },
          labelLine: {
            show: false
          },
          data: data,
          showEmptyCircle: true,
          emptyCircleStyle: {
            color: "#A0A0A0"
          },
          animationDuration: 2800,
          animationEasing: 'quadraticInOut'
        }]
      })
    }
  }
}
</script>

<style scoped>
.chart-view {
  min-width: 200px;
  min-height: 200px;
  text-align: center;
  padding-bottom: 10px;
  pointer-events: auto;
}
</style>