<template>
  <div class="alarmRate" :id="id" />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const props = defineProps({
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: () => 0
    },
    colors: {
      type: Array,
      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
    }
  })

  const { id, chart, setOption } = useEchart()

  let params = null

  let defaultCofig = {
    color: [],
    legend: {
      orient: 'vertical',
      y: 'center',
      left: '50%',
      itemWidth: fitChartSize(12),
      itemHeight: fitChartSize(12),
      itemGap: fitChartSize(6),
      formatter: (name) => {
        let obj = props.dataList.find((item) => item.name == name)
        let total = getTotal();
        if(total==0){
          return `{name|${name}} {value|0}{value|%}`
        }else{
          let value = ((obj?.value/total).toFixed(4)*100).toFixed(2);
          return `{name|${name}} {value|${value}}{value|%}`
        }

      },
      textStyle: {
        rich: {
          name: {
            color: '#fff',
            fontSize: fitChartSize(12)
          },
          value: {
            color: '#fff',
            fontSize: fitChartSize(12)
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        center: ['24%', '50%'],
        radius: ['35%', '50%'],
        itemStyle: {
          borderWidth: fitChartSize(4),
          borderColor: '#093672'
        },
        label: {
          show: true,
          position: 'center',
          fontWeight: 'bold',
          rich: {
            value: {
              color: '#fff',
              fontSize: fitChartSize(16),
              fontWeight: 'bold',
              padding: [0, 0, 5, 0]
            },
            name: {
              color: '#fff',
              fontSize: fitChartSize(12)
            }
          }
        },
        labelLine: {
          show: false
        },
        data: []
      }
    ]
  }

  let getTotal = () => {
    return props.dataList.reduce((per, cur) => {
      return per + cur.value
    }, 0)
  }

  watch(
    () => props.dataList,
    () => {
      if (props.dataList.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  const init = () => {
    if (!params) {
      defaultCofig.color = props.colors
      defaultCofig.series[0].data = props.dataList
      defaultCofig.series[0].label.formatter = () => {
        return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
      }
      params = {
        ...defaultCofig,
        ...props.config
      }
    } else {
      params.series[0].data = props.dataList
      params.series[0].label.formatter = () => {
        return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
      }
    }
    const changeChart = setOption(params)
    changeChart.off('legendselectchanged');
    changeChart.on('legendselectchanged', function (e) {
      var echartsArr = [];
      for (let key in e.selected) {
        if (e.selected[key]) {
          echartsArr.push(key)
        }
      }
      var echartsNum = 0;
      props.dataList.forEach(item => {
        if(echartsArr.includes(item.name)){
          echartsNum += parseFloat(item.value)
        }
      })
      params.series[0].label.formatter = () => {
        return `{value|${echartsNum}}` + '\n' + `{name|告警总数}`
      }
      setOption(params)
    });
  }
</script>

<style scoped lang="scss">
  .alarmRate {
    width: vw(380);
    height: vh(180);
  }
</style>
