<template>
  <div ref="pieChart" class="echarts" />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
import { useEcharts } from '@/hooks/chart.js';
import { getCategory } from "@/api/largeScreen/largeScreen.js"


const pieChart = ref(null);
const color = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#fc8452',
];
const chartOption = ref({
  color,
  series: [
    {
      type: 'pie',
      height: '80%',
      label: {
        normal: {
          formatter: '{bg|}{title|{b}}\n{text|{@value}%}',
          rich: {
            bg: {
              width: 10,
              height: 10,
              borderRadius: 50,
            },
            title: {
              color: '#fbffff',
              lineHeight: 16,
              padding: [0, 0, 0, 4],
            },
            text: {
              color: '#fbffff',
              opacity: 0.5,
              lineHeight: 16,
              padding: [0, 0, 0, 14],
            },
          },
          textStyle: {
            color: '#fbffff',
            fontSize: 12,
          },
        },
      },
      data: [],
    },
  ],
});
const { setOption } = useEcharts(pieChart);
const pollingInterval = ref(null);
onMounted(() => {
  pollingInterval.value = setInterval(fetchData(), 5000);
});
function fetchData() {
  getCategory().then(res => {
    chartOption.value.series[0].data = res.data.map((el, idx) => {
      return {
        value: el.scale,
        name: el.name,
        label: { rich: { bg: { backgroundColor: color[idx % color.length] } } },
      };
    });
    setOption?.(chartOption.value);
  }).catch(error => {
    console.error(error);
    clearInterval(pollingInterval.value);
  });
  return fetchData
}
</script>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  margin-top: 12px;
}
</style>
