<template>
  <dashboard-item-container title="主管平均工作时长">
    <template #right-menu>
      <div class="dashboard-right-menu">
        <span class="active">今日</span>
        <span>本周</span>
        <span>本月</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'],
    grid: [{ bottom: '20' }, { top: '50' }],
    legend: {
      icon: 'circle',
      textStyle: {
        color: '#fbffff',
      },
    },
    xAxis: {
      type: 'category',
      gridIndex: 1,
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
    },
    yAxis: {
      gridIndex: 1,
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
    },
    dataset: {
      source: [],
    },
    series: [
      { type: 'bar' },
    ],
  });
  const { setOption } = useEcharts(barChart);

  onMounted(() => {
    executeSqlByKeyAndParam('attendance_statistics_of_departments', {}).then(res => {
      chartOption.value.dataset.source = res.data.map(el => {
        return [el.dept_name, el.pass_count];
      });
      setOption?.(chartOption.value);
    });
  });
</script>

<style lang="less" scoped>

</style>