<script setup lang="ts">
import { ref } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';

defineOptions({
  name: 'RingChart'
});

const props = defineProps<{ data?: { name: string; value: number; money: number; rate: number }[]; colors?: string[]; range?: string }>();

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '0%',
    top: 'center',
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemStyle: {
      borderWidth: 0
    },
    textStyle: {
      rich: {
        name: {
          width: 50,
        },
        count: {
          width: 80,
          align: 'right',
          fontWeight: 600,
        },
        rate: {
          align: 'left',
        },
        money: {
          width: 80,
          align: 'right',
          fontWeight: 600,
        },
      }
    },
    formatter: function (name: string) {
      var info = props.data?.find((item: { name: string }) => item.name === name);
      if(info){
        return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.money)+' 万元}';
      }else{
        return name;
      }
    }
  },
  title: {
    text: `{a|19}\n{b|已验收}`,
    textStyle: {
      rich: {
        a: {
          fontSize: 24,
          color: '#333',
          fontWeight: 800,
          align: 'center',
          verticalAlign: 'middle',
        },
        b: {
          fontSize: 12,
          color: '#999',
          align: 'center',
          verticalAlign: 'middle',
          fontWeight: 500,
          padding: [5, 0, 0, 0]
        }
      }
    },
    left: '32%',
    top: '35%',
  },
  series: [
    {
      type: 'pie',
      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
      radius: ['50%', '70%'],
      center: ['35%', '45%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'outside',
        formatter: '{b}\n{c} ({d}%)',
        fontSize: 12,
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 10
      },
      data: [] as { name: string; value: number }[]
    }
  ]
}));

function init() {
  updateOptions(opts => {
    opts.series[0].data = props.data || [];
    opts.series[0].color = props.colors || [];
    return opts;
  });
}

init();
</script>

<template>
  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
</template>

<style scoped></style>
