<template>
  <dashboard-item-container title="排班时长统计">
    <template #right-menu>
      <div class="dashboard-right-menu">
        <span>今日</span>
        <span>本周</span>
        <span class="active">本月</span>
      </div>
    </template>
    <div ref="barChart" 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 barChart = ref(null);
  const chartOption = ref({
    color: ['#165DFF'],
    xAxis: {
      type: 'category',
      axisLabel: {
        rotate: 20,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
    },
    series: [{ type: 'bar', data: [] }],
  });
  const { setOption } = useEcharts(barChart);

  onMounted(() => {
    executeSqlByKeyAndParam('overtime_hours_statistics', {}).then(res => {
      chartOption.value.xAxis.data = res.data.map(el => el.dept_name);
      chartOption.value.series[0].data = res.data.map(el => el.over_duration_hour);
      setOption?.(chartOption.value);
    });
  });
</script>

<style lang="less" scoped>

</style>