<template>
  <div :id="'chartPie' + id" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  name: "ChartPie",
  data() {
    return {
      myChart: null,
      timer1: null
    }
  },
  props: {
    id: {
      type: String,
      default: () => '0'
    },
    text: {
      type: String,
      default: () => '今日报警总量'
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // data: {
    //   handler(newVal) {
    //     if(newVal) {
    //       console.log('watch')
    //       this.myChart.clear()
    //       this.init();
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    init() {
      var that = this;
      let arr = [];
      let num = 0;
      let data = this.data;
      data.forEach(item => {
        num+= Number(item.value)
      })
      data.forEach(item => {
        arr.push({ name: item.name, percent: (parseFloat(item.value) / num * 100).toFixed(2) + '%', number: item.value})
      })
      let minAngle = 10;// 最小扇形区域为30
      for ( let i = 0; i < data.length; i++ ) { //某项数据为0时，最小扇形区域为0
        if ( data[ i ].value < 1 ) {
          minAngle = 0;
          break;
        }
      }
      const pieValue1 = data.map( v => {
        return v.value;
      })
      const max = Math.max(...pieValue1);
      const len = max.toString().length;
      let diff = len - 3;
      let pieValue = [];
      if(diff > 0) {
        pieValue = data.map( v => {
          return v.value / (diff * 10);
        })
      } else {
        pieValue = data.map( v => {
          return v.value;
        })
      }
      const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和
        return prev + cur;
      }, 0 );
      const sum2 = pieValue.reduce( ( prev, cur ) => {
        if ( cur < sum / 36 && cur > 0 ) {//某个值大于0小于总和的1/12即30时，按30计算和
          return prev + sum / 36;
        }
        return prev + cur;
      }, 0 );
      let initPieValue = pieValue[ 0 ];// 初始值
      if ( initPieValue < sum / 36 && initPieValue > 0 ) {
        initPieValue = sum / 36;
      }


      let options = {
        grid: {
          x: 100
        },
        color: ['#3AA0FF', '#4DCB73', '#5470C6', '#9A60B4'],
        tooltip: {
          trigger: 'item',
          position: function() {
            return [ '60%', '30%'];
          },
          formatter: function ({name, value, percent}) {
            var str = '';
            str = '<div style="padding: 20px; text-align: center">'+
                '<p style="font-size: 18px; margin: 0; line-height: 20px; color: white">' + name + '</p>' +
                '<p style="font-size: 16px; margin: 0; color: white">' + '条数：' +  value + '条' +'</p>' +
                '<p style="font-size: 16px; margin: 0; color: white">' + '占比：' +  percent + '%' +'</p>'
                + '</div>'
            return str
            // return name + '：' + value + '条&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
          }
        },
        // legend: {
        //   top: '30%',
        //   left: '55%',
        //   orient: 'vertical',
        //   icon: "circle",
        //   selectedMode: false, // 取消右侧项选中
        //   itemGap: 20, // 各项间隔
        //   textStyle: {
        //     fontSize: 13,
        //     color: '#666'
        //   },
        //   formatter: function (name) {
        //     var legendIndex = 0;
        //     // var clientLabels = [
        //     //   { name: '环境报警', percent: parseFloat(0.16)*100 + '%', number: 2 },
        //     //   { name: '断电报警', percent:  parseFloat(0.16)*100 + '%', number: 2 },
        //     //   { name: '人员违规', percent:  parseFloat(0.16)*100 + '%', number: 2 },
        //     //   { name: '环境监测', percent:  parseFloat(0.16)*100 + '%', number: 2 },
        //     //   { name: '污水排放', percent:  parseFloat(0.16)*100 + '%', number: 2 },
        //     //   { name: '设备异常', percent:  parseFloat(0.16)*100 + '%', number: 2 },
        //     // ]
        //     var clientLabels = arr
        //     clientLabels.forEach(function (value, i) {
        //       if (value.name == name) {
        //         legendIndex = i;
        //       }
        //     });
        //     return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '条' + ") ";
        //   }
        // },
        graphic: [
          {
            type: 'text',
            left: '20%',
            top: '45%',
            style: {
              text: this.text,
              fontSize: 15,
              fill: 'rgb(192, 188, 189)'
            }
          },
          {
            type: 'text',
            left: '21%',
            top: '55%',
            style: {
              text: num + '条',
              fontSize: 22,
              fontWeight: 700,
              fill: 'rgb(192, 188, 189)'
            }
          }
        ],
        series: [
          {
            name: '报警类型',
            type: 'pie',
            radius: ['60%', '80%'], // 半径
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            clockWise: false,
            clickable: false,
            startAngle: 360,
            minAngle: minAngle,
            label: {
              show: false,
              // position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: false,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     formatter: "{a} \n{b}: {c} ({d}%)",
            //     color: '#fff',
            //     fontWeight: 'bold',
            //     fontSize: 18
            //   }
            // },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['#3AA0FF', '#4DCB73', '#5470C6', '#9A60B4']
                  return colorList[colors.dataIndex]
                },
                borderWidth: 2, // 设置各项空隙
                borderColor: '#fff',
                borderRadius: 5,
              }
            },
            data: data
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };

      this.myChart.setOption(options)

      this.myChart.dispatchAction( { type: 'highlight', seriesIndex: 0, dataIndex: 0 } );
      this.myChart.dispatchAction( { type: 'showTip',  seriesIndex: 0, dataIndex: 0 } )
      let preDataIndex = 0;
      // 开始循环
      this.timer1 = setInterval(() => {
        if(preDataIndex > pieValue.length - 1 ) {
          preDataIndex = 0;
        }
        const sum1 = pieValue.reduce( ( prev, cur, index ) => {
          if ( index < preDataIndex ) {
            if ( cur < sum / 36 && cur > 0 ) {
              return prev + sum / 36; // 饼图的扇形最小角度设置为30，占圆的1/12
            }
            return prev + cur;
          }
          return prev;
        }, 0 );
        let curPieValue = pieValue[ preDataIndex ];
        if ( curPieValue < sum / 36 && curPieValue > 0 ) {
          curPieValue = sum / 36;
        }
        this.myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
        this.myChart.dispatchAction({ type: 'hideTip'  })
        options.series[ 0 ].startAngle = 360 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
        this.myChart.setOption( options );
        window.setTimeout( () => {
          this.myChart.dispatchAction( {
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: preDataIndex
          } );
          this.myChart.dispatchAction({
            type: 'showTip',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            // 可选，数据的 index
            dataIndex: preDataIndex,
          })
          preDataIndex++;

        }, 1500);
      }, 8000)
      this.myChart.on('mouseover', (v) => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
        });
        preDataIndex = v.dataIndex;
        this.myChart.dispatchAction( {
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: preDataIndex
        });
        clearInterval(that.timer1);
      })

      this.myChart.on('mouseout', () => {
        this.timer1 = setInterval(() => {
          if(preDataIndex > pieValue.length - 1  ) {
            preDataIndex = 0;
          }
          const sum1 = pieValue.reduce( ( prev, cur, index ) => {
            if ( index < preDataIndex ) {
              if ( cur < sum / 12 && cur > 0 ) {
                return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12

              }

              return prev + cur;

            }

            return prev;

          }, 0 );

          let curPieValue = pieValue[ preDataIndex ];

          if ( curPieValue < sum / 12 && curPieValue > 0 ) {
            curPieValue = sum / 12;
          }
          this.myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
          });
          options.series[ 0 ].startAngle = 360 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
          //
          this.myChart.setOption( options );

          window.setTimeout( () => {
            this.myChart.dispatchAction( {
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: preDataIndex
            } );
            this.myChart.dispatchAction({
              type: 'showTip',
              // 可选，系列 index，可以是一个数组指定多个系列
              seriesIndex: 0,
              // 可选，数据的 index
              dataIndex: preDataIndex,
            })
            preDataIndex++;

          }, 1500);
        }, 8000)
      })
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartPie' + this.id));
    let that = this;
    window.addEventListener("resize", function () {
      that.myChart.resize()
    })
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.timer1);
    this.timer1 = null;
  }
}
</script>

<style scoped>

</style>
