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

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SpaceStatusChart',

  data() {
    return {
      currentColor: '#fff',
      e: event,
      index: 0
    }
  },

  mounted() {
      this.drawLine(this.pieNumData);
  },
  computed: {
    ...mapGetters({
      pieNumData: "spaceAuth/getPieNumData",
    })
  },
  watch: {
    pieNumData: {
      handler(val) {
        if (val !== null) {
			  this.drawLine(val);
        }
      },
      deep: true
    }
  },

  methods: {
    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例
      let _this = this
      let myChart = this.$echarts.init(document.getElementById('spaceStatus-chart')) //绘制图表
      myChart.setOption({
        tooltip: {
          position: [130, 90],
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.9)',
          borderColor: '#8D8D8D',
          borderWidth: 1,
          formatter: function(v) {
            if (v.color != '#48474c') _this._data.currentColor = v.color
            else _this._data.currentColor = 'white'

            return `
            <div class='chart-toolTip'> 
             <p id='color-title'>
             ${v.data.name}</p>
            <p class='value'>${v.data.value}&nbsp;GB (${v.percent}%)</p>
             </div> 
            `
          }
        },

        color: ['#eb974e', '#fb62bb', '#00f492'],

        series: [
          {
            type: 'pie',
            radius: ['50%', '90%'],
            //right: 100,
            avoidLabelOverlap: true,
            hoverOffset: 0, //調整餅圖凸顯時的高度
            label: {
              show: false,
              position: 'center',

              formatter: '{title1|{b}空間數}\n{num|{c}}{chracter|GB}\n\n{title2|空間占比}\n {percent|{d}}{chracter|%}',
              align: 'left',
              rich: {
                title1: { fontWeight: 'bold', padding: [2, 15, 2, 0] },
                title2: { fontWeight: 'bold', padding: [2, 63, 2, 0] },
                chracter: {
                  fontSize: 10,
                  color: 'white',
                  padding: [0, 0, 10, 3]
                },
                picon: {
                  color: 'white'
                },
                percent: {
                  color: 'white',
                  fontSize: 30,
                  fontWeight: 'bold'
                },
                num: {
                  color: 'white',
                  fontSize: 30,
                  fontWeight: 'bold',
                  padding: [2, 0, 2, -20]
                }
              }
            },
            startAngle: 90,
            emphasis: {
              label: {
                show: false, //把餅圖中間預設顯示各類圖例的效果關掉
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: '#2b2a2f',
              borderWidth: 3
            },
            data: this.pieNumData
          }
        ]
      })

      // Set the default selected highlights
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 7
      })
      myChart.on('mousemove', function(e) {
        //在滑動時修改提示框樣式時的方法！！！
        document.getElementById('color-title').style.color = _this._data.currentColor
      })

      myChart.on('mouseover', function(e) {
        //Highlight the hovering piece
        document.getElementById('color-title').style.color = _this._data.currentColor
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: 0
        })

        if (e.dataIndex == 0) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
          })
        }
        if (e.dataIndex != this.index) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.index
          })
        }
      })
      myChart.on('mouseout', function(e) {
        this.index = e.dataIndex
        document.getElementById('color-title').style.color = _this._data.currentColor
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.index
        })
      })
      //自適應
      setTimeout(function() {
        window.onresize = function() {
          myChart.resize()
        }
      }, 200)
    }
  }
}
</script>

<style lang="less">
#spaceStatus-chart {
  position: relative;
  height: 150px;
  margin-top: 20px;

  margin-bottom: 40px;
  z-index: 22;
  .chart-toolTip {
    position: relative;
    z-index: 99;
    padding: 10px;
    #color-title {
      font-weight: bolder;
    }
    .title {
      font-size: 10px;
      color: gray;
      font-weight: bolder;
    }
    .value {
      font-weight: bolder;
      color: white;
    }
  }
}
</style>
