<!-- 拥堵次数占比 -->
<template>
	<div style="position: relative;">
		<div class="jam-count" :style="{
			opacity:list.length?1:0,
		}" :id="id" />
		<div v-if="condShow==0" class="nYong-du">加载中...</div>
		<div v-if="condShow==1" class="nYong-du">{{text}}</div>
	</div>

</template>

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

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

  const { id, setOption } = useEchart()

  let params = null
  const colorList = ['#FDC40A', '#FF5232', '#50F0A6']
  let condShow = ref(0)
  let aIndex = 1
  watch(
    () => props.list,
    (val) => {
		aIndex+=1
		if(aIndex>=3&&!val.length){
		   condShow.value = 1
		}
      if (val.length > 0) {
        setTimeout(() => {
			condShow.value = 2
          init()
        }, 1000)
      }
    },
    {
      immediate: true
    }
  )

  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        name: item.name,
        value: parseFloat(item.count)
      }
    })
  }
  const calcCount = () => {
    return props.list.reduce((total, currentValue) => {
      return total + parseFloat(currentValue.count)
    }, 0)
  }
  const init = () => {
    if (!params) {
      params = {
        color: colorList,
        grid: {
          left: '4%',
          right: '4%',
          top: '4%',
          bottom: '4%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
          bottom: '-3%',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(6),
          formatter: (name) => {
            let obj = props.list.find((item) => item.name == name)
			console.log(obj,'5555555555555555555')
            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
          },
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: fitChartSize(12)
              },
              value: {
                color: '#00D5F6',
                fontSize: fitChartSize(12)
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['45%', '60%'],
            itemStyle: {
              borderWidth: fitChartSize(4),
              borderColor: '#093672'
            },
            label: {
              show: true,
              position: 'center',
              fontWeight: 'bold',
              formatter: function (o) {
                return `{label|拥堵次数}` + '\n' + `{value|${calcCount()}}`
              },
              rich: {
                label: {
                  color: '#7894A8',
                  padding: [0, 0, 5, 0],
                  fontSize: fitChartSize(12)
                },
                value: {
                  color: '#fff',
                  fontSize: fitChartSize(16),
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: getSeriesData()
          }
        ]
      }
    } else {
      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 = `{label|拥堵次数}` + '\n' + `{value|${echartsNum}}`;
      setOption(params);
    });
  }

  onMounted(() => {})
</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;
	}
  .jam-count {
    width: vw(250);
    height: vh(150);
  }
</style>
