<!-- 拥堵次数占比 -->
<template>
  <div class="jam-count" :id="id" />
</template>

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

  const props = defineProps({
    list: {
      type: Array,
      default: () => []
    }
  })

  const { id, setOption } = useEchart()

  let params = null
  const colorList = ['#FDC40A', '#FF5232', '#50F0A6']

  watch(
    () => props.list,
    (val) => {
      if (val.length > 0) {
        setTimeout(() => {
          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)
            return '{name|' + name + '} {value|' + obj?.count + '}{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()
    }
    setOption(params)
  }

  onMounted(() => {
    init()
  })
</script>

<style scoped lang="scss">
  .jam-count {
    width: vw(250);
    height: vh(150);
  }
</style>
