<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 color = {
    NORMAL: 'rgb(144, 238, 144)',
    OTHER: 'rgb(255, 255, 102)',
    LEAVE_ABSENCE: 'rgb(173, 216, 230)',
    LEAVE_COMPENCOMPENSATORY: 'rgb(135, 206, 250)',
    LEAVE_ANNUAL: 'rgb(255, 165, 0)',
    LEAVE_SICK: 'rgb(255, 0, 0)',
    LATE: 'rgb(255, 99, 71)',
    EARLY: 'rgb(255, 127, 80)',
    ABSENTEE: 'rgb(128, 0, 0)',
  };
  const pieChart = ref(null);
  const chartOption = ref({
    legend: {
      orient: 'vertical',
      right: 10,
      top: '20%',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      textStyle: {
        color: '#fbffff',
      },
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'pie',
        center: ['30%', '50%'],
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disable: false,  //是否关闭扇区高亮效果
          scale: false,    //扇区是否缩放
          scaleSize: 0,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const { setOption } = useEcharts(pieChart);

  onMounted(() => {
    executeSqlByKeyAndParam('attendance_status_distribution', {}).then(res => {
      chartOption.value.series[0].data = res.data.map(el => {
        return {
          itemStyle: { color: color[el.status] },
          value: el.count,
          name: el.dict_label + ' ' + el.count + '人　' + el.percentage + '%',
        };
      });
      setOption?.(chartOption.value);
    });
  });
</script>

<style lang="less" scoped>

</style>