<template>
  <dashboard-item-container title="出勤趋势分析">
    <div ref="lineChart" 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 lineChart = ref(null);
  const color = [
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#fc8452',
  ];
  const chartOption = ref({
    color: ['#00B42A'],
    xAxis: {
      type: 'category',
      data: [],
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
      axisLabel: {
        rotate: 60,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(251, 255, 255, .6)',
        },
      },
    },
    series: [
      {
        symbol: 'circle',
        symbolSize: 6,
        data: [],
        type: 'line',
      },
    ],
  });
  const { setOption } = useEcharts(lineChart);

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

<style lang="less" scoped>

</style>