<template>
  <div :class="className" :style="{height: height, width: width}"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    normaldata: {
      type: Object,
      default: () => ([
        { value: 632, name: '不足三年' },
        { value: 323, name: '3~6年' },
        { value: 456, name: '6~10年' },
        { value: 810, name: '>10年' }])
    }
  },
  data() {
    return {
      chart: null,
      colorList: [
        'rgba(6, 194, 255, 1)',
        'rgba(255, 205, 40, 1)',
        'rgb(40,205,40)',
        'rgba(235,42,55,1)'
      ]
    }
  },
  computed: {
    colorList1() {
      const list = [];
      this.colorList.forEach(item => {
        list.push(item);
        list.push('');
      });
      return list;
    },
    colorList2() {
      const list = [];
      this.colorList.forEach(item => {
        list.push(item.replace(/,\s*\d+(\.\d+)?\)/, ", 0.3)"));
        list.push('');
      });
      return list;
    },
    valdata() {
      let sum = 0;
      const data = [];
      this.normaldata.forEach(item => sum += Number(item.value));
      this.normaldata.forEach(item => {
        data.push({value: item.value, name: item.name});
        data.push({
          name: '',
          value: sum / 100,
          itemStyle: {color: 'transparent'}
        });
      });
      return data;
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (!this.chart) return
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        // backgroundColor: '#243c54',
        legend: {
          orient: 'vertical',
          right: '5%',
          top:'center',
          icon: 'none',
          width: 450,
          itemWidth: 6,
          itemHeight: 6,
          formatter: (name) => `{iconName|}{name|${name}}`,
          textStyle: {
            color: '#FFF',
            fontSize: 20,
            rich: {
              name: {
                color: 'rgba(144, 178, 210, 1)',
                fontSize: 20,
                width: 100,
                padding: [0, 0, 0, 10]
              }
            }
          },
          data: this.normaldata.map((dItem, dIndex) => ({
            ...dItem,
            textStyle: {
              rich: {
                iconName: {
                  width: 8,
                  height: 8,
                  backgroundColor: this.colorList[dIndex % this.colorList.length]
                }
              }
            }
          }))
        },title: {
          text: '设备预估剩余寿命分成', // 标题内容
          top: '5%',
          left:'3%',    // 距离顶部5%
          textStyle: {     // 文字样式
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        series: [
          {
            type: 'pie',
            name: 'TypeB',
            radius: ['40%', '44.5%'],
            center: ['40%', '50%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {color: 'rgba(2, 131, 255, 0.35)'},
            label: {show: false},
            data: [100]
          },
          {
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['48%', '50%'],
            center: ['40%', '50%'],
            itemStyle: {
              color: (params) => this.colorList1[params.dataIndex % this.colorList1.length]
            },
            label: {
              padding: [0, -75],
              alignTo: 'labelLine',
              formatter: (params) => params.name
                  ? `{dot|}   {d|${params.name} ${params.percent}%}\n\n{c|${params.value}个}`
                  : ``,
              rich: {
                c: {color: '#fff', fontSize: 14, lineHeight: 20, margin: 20},
                d: {fontSize: 14, color: 'rgba(255,255,255,0.7)'},
                dot: {
                  backgroundColor: 'auto',
                  width: 0,
                  height: 0,
                  borderRadius: 3,
                  fontSize: 16,
                  padding: [3, -3, 3, -3]
                }
              }
            },
            labelLine: {length: 50, length2: 70,},
            data: this.valdata
          },
          // 其他系列配置...
          {
            type: 'pie', //最外圆圈
            radius: ['57%', '57.3%'],
            // radius: ['44%', '50%'],
            center: ['40%', '50%'],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,

            itemStyle: {
              normal: {
                shadowBlur: 1,
                shadowColor: 'rgba(15, 79, 150,0.61)',
                color: 'rgba(255,255,255,.3)'
                // borderColor: '#1f1e26',
                // borderWidth: 5,
              }
            },
            label: {
              show: false
            },
            data: [0]
            // data: labelData,
          },
          {
            type: 'pie', //点
            radius: ['57%', '57.9%'],
            center: ['40%', '50%'],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            color: ['#55c2e200', 'rgba(6, 192, 252, 1)', '#ff5a6100', 'ff5a6100'],
            label: {
              show: false
            },
            data: [30, 10, 240, 30]
            // data: [30,30,30,30,30,30],
          },
          {
            type: 'pie', //点
            radius: ['57%', '57.9%'],
            center: ['40%', '50%'],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
            label: {
              show: false
            },
            data: [170, 15, 240, 30]
            // data: [30,30,30,30,30,30],
          },
          {
            type: 'pie', //点
            radius: ['57%', '57.9%'],
            center: ['40%', '50%'],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
            label: {
              show: false
            },
            data: [250, 15, 130, 30]
            // data: [30,30,30,30,30,30],
          },
          {
            type: 'pie', //点
            radius: ['57%', '57.9%'],
            center: ['40%', '50%'],
            // radius: '90%',
            hoverAnimation: false,
            clockWise: false,
            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
            label: {
              show: false
            },
            data: [250, 10, 10, 20]
            // data: [30,30,30,30,30,30],
          }
        ]
      })
    },
    handleResize() {
      if (this.autoResize && this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>
