<template>

  <div style="position: relative;">
  	<div
  	  :id="id"
  	  :style="{
  	    width: styleUtil.px2vw(width),
  	    height: styleUtil.px2vh(height),
		opacity:list.length?1:0,
  	  }"
  	/>
  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
  	<div v-if="condShow==1" class="nYong-du">{{text}}</div>
  </div>
</template>

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

  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    },
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: [String, Number],
      default: () => ''
    },
    subTitle: {
      type: [String, Number],
      default: () => ''
    },
	text:{
		type: String,
		default: '暂无数据'
	}
  })

  const { id, setOption } = useEchart()
	let condShow = ref(0)
	let aIndex = 1
  watch(
    () => props.list,
    (val) => {
		aIndex+=1
		if(aIndex>=3&&!val.length){
		   condShow.value = 1
		}
      if (props.list.length > 0) {
        setTimeout(() => {
			condShow.value = 2
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null

  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        ...item,
        value: item.count
      }
    })
  }

  const getTotal = () => {
    return props.list.reduce((per, cur) => {
      return per + cur.count
    }, 0)
  }

  const formatLabel = () => {
    return () => `{value|${getTotal()}}` + '\n' + `{name|${props.subTitle}}`
  }

  const init = () => {
    if (!params) {
      params = {
        color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
        legend: {
          x: 'left',
          y: 'bottom',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(10),
          formatter: function (name) {
            return '{name|' + name + '}'
          },
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: fitChartSize(14)
              },
              value: {
                color: '#00D5F6',
                fontSize: fitChartSize(14)
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['55%', '70%'],
            itemStyle: {
              borderWidth: fitChartSize(4),
              borderColor: '#093672'
            },
            label: {
              show: true,
              position: 'center',
              fontWeight: 'bold',
              formatter: formatLabel(),
              rich: {
                value: {
                  color: '#fff',
                  fontSize: fitChartSize(24),
                  fontWeight: 'bold',
                  padding: [0, 0, 5, 0]
                },
                name: {
                  color: '#fff',
                  fontSize: fitChartSize(12)
                }
              }
            },
            labelLine: {
              show: false
            },
            data: getSeriesData()
          }
        ]
      }
    } else {
      params.series[0].label.formatter = formatLabel()
      params.series[0].data = getSeriesData()
    }
    const chart = setOption(params);
    chart.on('legendselectchanged', function (e) {
      var echartsArr = [];
      for (let key in e.selected) {
        if (e.selected[key]) {
          echartsArr.push(key)
        }
      }
      var echartsNum = 0;
      props.list.forEach(item => {
        if(echartsArr.includes(item.name)){
          echartsNum += parseInt(item.count)
        }
      })
      params.series[0].label.formatter = `{value|${echartsNum}}` + '\n' + `{name|${props.subTitle}}`;
      setOption(params);
    });
  }
</script>

<style scoped lang="scss">

	.nYong-du{
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		font-size:vw(18);
		// color:#999;
		color:#02f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
