<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import type { EchartsUIType } from '@vben/plugins/echarts';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import {
  WorkbenchHeader,
  AnalysisChartsTabs
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import {
	salaryList
} from '#/api/biz/salary';
import type { SalaryForm, SalaryChart } from '#/api/biz/salary/model';

import AnalyticsTrends from '../analytics/analytics-trends.vue';

const userStore = useUserStore();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

// 根据小时自动生成问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour >= 5 && hour < 9) return '早上好'
  if (hour >= 9 && hour < 12) return '上午好'
  if (hour >= 12 && hour < 18) return '下午好'
  return '晚上好'
})

const router = useRouter();

const salaryData = ref<SalaryForm[]>([]);
const chartDatas = ref<SalaryChart>();

// --- 获取数据 ---
async function getList() {
	try {
		const res = await salaryList({ pageNum: 1, pageSize: 1000, userId: -1 });
		
		if (res.rows.length>0){
			const datas = [];
			const months = [];
			for (var i = res.rows.length; i > 0; i--) {
				const item = res.rows[i-1];
				datas.push(item.actualSalary);
				months.push(item.salaryYearMonth);
			}
			chartDatas.value = {data: datas, month: months };
		}
		renderEcharts({
		  grid: {
		    bottom: 0,
		    containLabel: true,
		    left: '1%',
		    right: '1%',
		    top: '2 %',
		  },
		  series: [
		    {
		      areaStyle: {},
		      data: chartDatas.value.data,
		      itemStyle: {
		        color: '#5ab1ef',
		      },
		      smooth: true,
		      type: 'line',
		    },
		  ],
		  tooltip: {
		    axisPointer: {
		      lineStyle: {
		        color: '#019680',
		        width: 1,
		      },
		    },
		    trigger: 'axis',
		  },
		  xAxis: {
		    axisTick: {
		      show: false,
		    },
		    boundaryGap: false,
		    data: chartDatas.value.month,
		    splitLine: {
		      lineStyle: {
		        type: 'solid',
		        width: 1,
		      },
		      show: true,
		    },
		    type: 'category',
		  },
		  yAxis: [
		    {
		      axisTick: {
		        show: false,
		      },
		      splitArea: {
		        show: true,
		      },
		      splitNumber: 4,
		      type: 'value',
		    },
		  ],
		});
		
	} catch (error) {
		console.error('获取工资明细失败', error);
	} 
}
	
const chartTabs: TabOption[] = [
  {
    label: '历史工资趋势',
    value: 'trends',
  },
];

onMounted(() => {
	getList();
});
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        {{ greeting }}, {{ userStore.userInfo?.realName }}！
      </template>
    </WorkbenchHeader>

	<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
	  <template #trends>
		<EchartsUI ref="chartRef" />
	  </template>
	</AnalysisChartsTabs>
    
  </div>
</template>
