<template>
  <div id="aclassOne-chart" />
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AclassOneChart',
  props: ['less', 'used', 'avaliable'],
  data() {
    return {
      e: event,
      index: 0,

      mockdata: {
        pieNumData: [
          { value: this.used, name:  this.$t("serviceDriveAuth['固定分配數']")},
          { value: this.less, name: this.$t("serviceDriveAuth['動態分配數']") },
          { value: this.avaliable - this.less - this.used, name: this.$t("serviceDriveAuth['剩餘分配數']") }
        ]
      }
    }
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData)
  },
  watch: {
    realTimePieNumData: function(val) {
      if (val !== 0) {
        this.mockdata = {
          pieNumData: [
            { value: this.serviceList[0].staUsed, name: this.$t("serviceDriveAuth['固定分配數']") },
            { value: this.serviceList[0].dynUsed, name: this.$t("serviceDriveAuth['動態分配數']") },
            { value: this.serviceList[0].avaliable - this.serviceList[0].dynUsed - this.serviceList[0].staUsed, name: this.$t("serviceDriveAuth['剩餘分配數']") }
          ]
        }
        this.drawLine(this.mockdata.pieNumData)
      }
    }
  },
  computed: {
    ...mapGetters({
      serviceList: 'serviceDriveAuth/getServiceList'
    }),
    realTimePieNumData: function() {
      if (this.serviceList !== undefined || this.serviceList !== null) {
        return this.serviceList
      } else return 0
    }
  },

  methods: {
    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例

      let myChart = this.$echarts.init(document.getElementById('aclassOne-chart')) //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          show: false,
          orient: 'horizontal',
          icon: 'circle',

          textStyle: {
            color: 'white'
          },

          left: 20,
          bottom: 0
        },
        color: ['#00f492', '#f862bb', 'gray'],

        series: [
          {
            type: 'pie',
            radius: ['45%', '100%'],
            top: 20,
            right: 10,
            left: 0,
            bottom: 10,
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center',
              formatter: '{percent|{d}% }\n {b}',
              lineHeight: 20,

              rich: {
                percent: {
                  color: 'white',
                  fontSize: 20,
                  lineHeight: 30,
                  padding: [0, 0, 0, 10]
                }
              }
            },
            startAngle: 90,
            emphasis: {
              label: {
                show: false,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: '#2b2a2f',
              borderWidth: 0
            },
            data: this.mockdata.pieNumData
          }
        ]
      })
    }
  }
}
</script>

<style>
#aclassOne-chart {
  width: 120%;
  height: 70px;
  margin-top: -20px;
  margin-left: -33%;
}
</style>
