<script setup lang="ts">
/**
 * 业务 / 基础设施任务量占比
 */
import { nextTick, ref, watch } from 'vue';

import {
  EchartsUI,
  type EchartsUIType,
  useEcharts,
} from '@vben/plugins/echarts';

const props = defineProps<{
  data: Array<{ category_txt: string; total: number; failed: number }>;
}>();

const chartRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(chartRef);

async function renderChart() {
  await renderEcharts({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    series: [
      {
        name: '任务量',
        type: 'pie',
        radius: ['42%', '68%'],
        avoidLabelOverlap: true,
        itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
        label: { formatter: '{b}\n{c}' },
        data: props.data.map((i) => ({
          name: i.category_txt,
          value: i.total,
        })),
      },
    ],
  });
  await nextTick();
  resize();
}

watch(() => props.data, renderChart, { deep: true, immediate: true });
</script>

<template>
  <EchartsUI ref="chartRef" class="h-[320px] w-full" />
</template>
