<template>
  <dashboard-item-container title="请假类型占比">
    <div ref="pieChart" style="width: 100%; height: 100%" />
  </dashboard-item-container>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { useEcharts } from '@/hooks/chart.js';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import DashboardItemContainer from '@/views/dataBigScreen/dashboard/components/DashboardItemContainer.vue';

  const pieChart = ref(null);
  const chartOption = ref({
    color: ['#00B42A', '#722ED1', '#F53F3F', '#165DFF', '#FF7D00'],
    legend: {
      bottom: 10,
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      textStyle: {
        color: '#fbffff',
      },
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'pie',
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disable: false,  //是否关闭扇区高亮效果
          scale: false,    //扇区是否缩放
          scaleSize: 0,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const { setOption } = useEcharts(pieChart);

  onMounted(() => {
    executeSqlByKeyAndParam('proportion_of_leave_types', {}).then(res => {
      chartOption.value.series[0].data = res.data.map(el => {
        return {
          value: el.count,
          name: el.dict_label,
        };
      });
      setOption?.(chartOption.value);
    });
  });
</script>