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

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

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

  const { id, setOption } = useEchart()
  let params = null

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

  const getSeriesData = () => {
    return props.list
  }
  const init = () => {
    if (!params) {
      const center = ['50%', '34%']
      params = {
        legend: {
          x: 'left',
          y: 'bottom',
          itemHeight: fitChartSize(5),
          itemWidth: fitChartSize(5),
          itemGap: fitChartSize(8),
          formatter: function (name) {
            let obj = props.list.find((item) => item.name == name)
            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
          },
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: fitChartSize(12)
              },
              value: {
                color: '#00D5F6',
                fontSize: fitChartSize(12)
              }
            }
          }
        },
		polar: {
		  center: ['50%', '40%']
		},
		angleAxis: {
		  max: 100,
		  show: false
		},
		radiusAxis: {
		  type: 'category',
		  show: true,
		  axisLabel: {
		    show: false
		  },
		  axisLine: {
		    show: false
		  },
		  axisTick: {
		    show: false
		  }
		},
        series: [
          {
            type: 'pie',
            silent: true,
            center: center,
            radius: ['40%', '50%'],
            itemStyle: {
              borderColor: 'transparent',
              borderRadius: fitChartSize(2),
              borderWidth: fitChartSize(2)
            },
            label: {
              show: false,
              color: '#D3F0FE',
              fontSize: fitChartSize(12)
            },
            data: getSeriesData()
          },
          {
            type: 'pie',
            silent: true,
            center: center,
            radius: ['34%', '38%'],
            itemStyle: {
              borderColor: 'transparent',
              borderRadius: fitChartSize(2),
              borderWidth: fitChartSize(2)
            },
            label: {
              show: false,
              color: '#D3F0FE',
              fontSize: fitChartSize(12)
            },
            data: getSeriesData()
          },
          {
            type: 'pie',
            silent: true,
            center: center,
            radius: ['0', '20%'],
            itemStyle: {
              color: '#065EAD'
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            silent: true,
            center: center,
            radius: ['0', '16%'],
            itemStyle: {
              color: '#0477D1'
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
    } else {
      params.series[0].data = getSeriesData()
      params.series[1].data = getSeriesData()
    }
    setOption(params)
  }
</script>

<style lang="scss" scoped>
  .age {
    width: vw(240);
    height: vh(280);
  }
</style>
