<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 init = () => {
    if (!params) {
      let center = ['25%', '50%']
      params = {
        color: ['#00B1FF', '#00FFFF', '#FF3737', '#DD5627', '#D3F0FE'],
        legend: {
          orient: 'vertical',
          right: 0,
          y: 'center',
          itemHeight: fitChartSize(8),
          itemWidth: fitChartSize(8),
          itemGap: fitChartSize(10),
          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(14)
              },
              value: {
                color: '#00D5F6',
                fontSize: fitChartSize(14)
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            clockwise: false,
            silent: true,
            center: center,
            radius: ['44%', '54%'],
            itemStyle: {
              borderColor: 'transparent',
              borderRadius: fitChartSize(2),
              borderWidth: fitChartSize(2)
            },
            label: {
              show: false,
              color: '#D3F0FE',
              fontSize: fitChartSize(12)
            },
            data: props.list || []
          },
          {
            type: 'pie',
            clockwise: false,
            silent: true,
            center: center,
            radius: ['44%', '48%'],
            itemStyle: {
              borderColor: 'transparent',
              borderRadius: fitChartSize(2),
              borderWidth: fitChartSize(2)
            },
            label: {
              show: false,
              color: '#D3F0FE',
              fontSize: fitChartSize(12)
            },
            data: props.list
          },
          {
            type: 'pie',
            clockwise: false,
            silent: true,
            center: center,
            radius: ['0', '40%'],
            itemStyle: {
              color: '#065EAD'
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            clockwise: false,
            silent: true,
            center: center,
            radius: ['0', '26%'],
            itemStyle: {
              color: '#0477D1'
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
    } else {
      params.series[0].data = props.list
    }
    setOption(params)
  }
  defineExpose({
    init
  })
</script>

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