<template>
	<div class="home-container">
		<!-- 第一行 -->
		<el-row :gutter="15" class="home-row">
		<el-col :span="8">
			<StatusCards :statusData="pendingItems" />
		</el-col>
		<el-col :span="16">
			<InfoCards  :summaryData="dataSummary" />
		</el-col>
		</el-row>

		<el-row :gutter="15" class="home-row">
		<el-col :span="12">
			<BorrowRankingList/>
		</el-col>
		<el-col :span="12">
			<BorrowTrendsChart />
		</el-col>
		</el-row>
	</div>
  </template>
  
  

<script lang="ts" setup  name="screenconsole">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import * as api from './api';
// import { GetList } from './api';
// import { useRouter } from 'vue-router';

import StatusCards from './component/StatusCards.vue';
import InfoCards from './component/InfoCards.vue';
import InboundOrders from './component/InboundOrders.vue';
import StockAlerts from './component/StockAlerts.vue';
import DeviceRanking from './component/DeviceRanking.vue'
import DeviceBorrowCountChart from './component/DeviceBorrowCountChart.vue'
import DeviceBorrowDurationChart from './component/DeviceBorrowDurationChart.vue'
import UtilizationTrend from './component/UtilizationTrend.vue'
import BorrowTrendsChart from './component/BorrowTrendsChart.vue'
import ActiveUsersPie from './component/ActiveUsersPie.vue'
import BorrowRankingList from './component/BorrowRankingList.vue'
// import test from './component/test.vue'
// import test1 from './component/test1.vue'


const pendingItems = ref({
  pending_approval: 0,
  pending_return: 0,
  pending_overdue: 0,
  pending_maintenance: 0,
  pending_restock: 0,
  pending_warehousing: 0,
  pending_inventory_check: 0
})

// const dataSummary = ref({
//   total_borrows: 0,
//   device_cabinets: 0,
//   total_applications: 0,
//   total_students: 0,
//   total_inventory_checks: 0,
//   total_devices: 0,
//   total_warehouses: 0,
//   storage_locations: 0,
//   total_admins: 0,
//   total_maintenances: 0
// })

const dataSummary = ref({
	total_devices: 0,
	borrowed_devices: 0,
	available_devices: 0,
	today_borrowed: 0,
	today_returned: 0,
	total_borrows: 0,
	total_borrowers: 0,
})

// const apiData = ref({
//   code: 2000,
//   data: {
//     borrow_count_ranking: [],
//     borrow_duration_ranking: []
//   },
//   msg: ""
// })


onMounted(async () => {
  try {
    const res = await api.GetList()
    if (res.code === 2000) {
      pendingItems.value = res.data.pending_items
    //   dataSummary.value = res.data.data_summary
    }
	const ress = await api.GetOverviewList()
    if (ress.code === 2000) {
      dataSummary.value = ress.data
    }
	// const resss = await api.GetDeviceRankList()
    // if (resss.code === 2000) {
	// 	console.log("ressss:::",resss)
	// 	// apiData.value = resss
	// 	borrowCountData.value = resss.data.borrow_count_ranking
	// 	borrowDurationData.value = resss.data.borrow_duration_ranking
    // }

  } catch (error) {
    console.error('获取数据失败:', error)
  }
})


// 定义API数据接口
interface ApiData {
	total_applications: number;
	total_positions: number;
	total_questions: number;
	total_reports: number;
	application_trend: Array<{
		date: string;
		count: number;
	}>;
}

let global: any = {
	homeChartOne: null,
	homeChartTwo: null,
	homeCharThree: null,
	dispose: [null, '', undefined],
};


const homeLineRef = ref();
const homePieRef = ref();
const homeBarRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);


// const state = reactive({
// 			homeOne: [
// 				{
// 					num1: '0',
// 					num2: '0',
// 					num3: '申请总数',
// 					num4: 'fa fa-meetup',
// 					color1: '#6690F9',
// 					color2: '--next-color-primary-lighter',
// 					color3: '--el-color-primary',
// 				},
// 				{
// 					num1: '0',
// 					num2: '0',
// 					num3: '职位总数',
// 					num4: 'iconfont icon-ditu',
// 					color1: '#6690F9',
// 					color2: '--next-color-success-lighter',
// 					color3: '--el-color-success',
// 				},
// 				/* {
// 					num1: '0',
// 					num2: '0',
// 					num3: '问题总数',
// 					num4: 'iconfont icon-zaosheng',
// 					color1: '#6690F9',
// 					color2: '--next-color-warning-lighter',
// 					color3: '--el-color-warning',
// 				}, */
// 				{
// 					num1: '0',
// 					num2: '0',
// 					num3: '报告总数',
// 					num4: 'fa fa-github-alt',
// 					color1: '#6690F9',
// 					color2: '--next-color-danger-lighter',
// 					color3: '--el-color-danger',
// 				},
// 			],
// 			homeThree: [
// 				{
// 					icon: 'iconfont icon-yangan',
// 					label: '浅粉红',
// 					value: '2.1%OBS/M',
// 					iconColor: '#F72B3F',
// 				},
// 				{
// 					icon: 'iconfont icon-wendu',
// 					label: '深红(猩红)',
// 					value: '30℃',
// 					iconColor: '#91BFF8',
// 				},
// 				{
// 					icon: 'iconfont icon-shidu',
// 					label: '淡紫红',
// 					value: '57%RH',
// 					iconColor: '#88D565',
// 				},
// 				{
// 					icon: 'iconfont icon-shidu',
// 					label: '弱紫罗兰红',
// 					value: '107w',
// 					iconColor: '#88D565',
// 				},
// 				{
// 					icon: 'iconfont icon-zaosheng',
// 					label: '中紫罗兰红',
// 					value: '57DB',
// 					iconColor: '#FBD4A0',
// 				},
// 				{
// 					icon: 'iconfont icon-zaosheng',
// 					label: '紫罗兰',
// 					value: '57PV',
// 					iconColor: '#FBD4A0',
// 				},
// 				{
// 					icon: 'iconfont icon-zaosheng',
// 					label: '暗紫罗兰',
// 					value: '517Cpd',
// 					iconColor: '#FBD4A0',
// 				},
// 				{
// 					icon: 'iconfont icon-zaosheng',
// 					label: '幽灵白',
// 					value: '12kg',
// 					iconColor: '#FBD4A0',
// 				},
// 				{
// 					icon: 'iconfont icon-zaosheng',
// 					label: '海军蓝',
// 					value: '64fm',
// 					iconColor: '#FBD4A0',
// 				},
// 			],
// 			myCharts: [],
// 			charts: {
// 				theme: '',
// 				bgColor: '',
// 				color: '#303133',
// 			},
// 			apiData: null as ApiData | null,
// 		});
// // const router = useRouter();
// // 折线图
// const initLineChart = () => {
// 	if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
// 	global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
// 	const option = {
// 		backgroundColor: state.charts.bgColor,
// 		title: {
// 			text: '申请趋势',
// 			x: 'left',
// 			textStyle: { fontSize: '15', color: state.charts.color },
// 		},
// 		grid: { top: 70, right: 20, bottom: 30, left: 30 },
// 		tooltip: { trigger: 'axis' },
// 		legend: { data: ['申请数量'], right: 0 },
// 		xAxis: {
// 			data: state.apiData?.application_trend?.map((item: {date: string; count: number}) => item.date.substring(5)) || 
// 				['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 		},
// 		yAxis: [
// 			{
// 				type: 'value',
// 				name: '数量',
// 				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
// 			},
// 		],
// 		series: [
// 			{
// 				name: '申请数量',
// 				type: 'line',
// 				symbolSize: 6,
// 				symbol: 'circle',
// 				smooth: true,
// 				data: state.apiData?.application_trend?.map((item: {date: string; count: number}) => item.count) || 
// 					[0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
// 				lineStyle: { color: '#fe9a8b' },
// 				itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
// 				areaStyle: {
// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 						{ offset: 0, color: '#fe9a8bb3' },
// 						{ offset: 1, color: '#fe9a8b03' },
// 					]),
// 				},
// 			}
// 		],
// 	};
// 	(<any>global.homeChartOne).setOption(option);
// 	(<any>state.myCharts).push(global.homeChartOne);
// }
// // 饼图
// const initPieChart = () => {
// 	if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
// 	global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
// 	var getname = ['申请总数', '职位总数', '问题总数', '报告总数'];
// 	var getvalue = [];
	
// 	if (state.apiData) {
// 		getvalue = [
// 			state.apiData.total_applications,
// 			state.apiData.total_positions,
// 			state.apiData.total_questions,
// 			state.apiData.total_reports
// 		];
// 	} else {
// 		getvalue = [34.2, 38.87, 17.88, 9.05];
// 	}
	
// 	var data = [];
// 	for (var i = 0; i < getname.length; i++) {
// 		data.push({ name: getname[i], value: getvalue[i] });
// 	}
// 	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
// 	const option = {
// 		backgroundColor: state.charts.bgColor,
// 		title: {
// 			text: '数据统计',
// 			x: 'left',
// 			textStyle: { fontSize: '15', color: state.charts.color },
// 		},
// 		tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
// 		graphic: {
// 			elements: [
// 				{
// 					type: 'image',
// 					z: -1,
// 					style: {
// 						image: themeConfig.value.isIsDark
// 							? ''
// 							: 'data:image/png;base64,[encoded data, 9848 characters]',
// 						width: 230,
// 						height: 230,
// 					},
// 					left: '16.5%',
// 					top: 'center',
// 				},
// 			],
// 		},
// 		legend: {
// 			type: 'scroll',
// 			orient: 'vertical',
// 			right: '0%',
// 			left: '65%',
// 			top: 'center',
// 			itemWidth: 14,
// 			itemHeight: 14,
// 			data: getname,
// 			textStyle: {
// 				rich: {
// 					name: {
// 						fontSize: 14,
// 						fontWeight: 400,
// 						width: 200,
// 						height: 35,
// 						padding: [0, 0, 0, 60],
// 						color: state.charts.color,
// 					},
// 					rate: {
// 						fontSize: 15,
// 						fontWeight: 500,
// 						height: 35,
// 						width: 40,
// 						padding: [0, 0, 0, 30],
// 						color: state.charts.color,
// 					},
// 				},
// 			},
// 		},
// 		series: [
// 			{
// 				type: 'pie',
// 				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
// 				center: ['32%', '50%'],
// 				itemStyle: {
// 					color: function (params: any) {
// 						return colorList[params.dataIndex];
// 					},
// 				},
// 				label: { show: false },
// 				labelLine: { show: false },
// 				data: data,
// 			},
// 		],
// 	};
// 	(<any>global.homeChartTwo).setOption(option);
// 	(<any>state.myCharts).push(global.homeChartTwo);
// }
// // 柱状图
// const initBarChart = () => {
// 	if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
// 	global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
// 	const option = {
// 		backgroundColor: state.charts.bgColor,
// 		title: {
// 			text: '地热开发利用',
// 			x: 'left',
// 			textStyle: { fontSize: '15', color: state.charts.color },
// 		},
// 		tooltip: { trigger: 'axis' },
// 		legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
// 		grid: { top: 70, right: 80, bottom: 30, left: 80 },
// 		xAxis: [
// 			{
// 				type: 'category',
// 				data: ['1km', '2km', '3km', '4km', '5km', '6km'],
// 				boundaryGap: true,
// 				axisTick: { show: false },
// 			},
// 		],
// 		yAxis: [
// 			{
// 				name: '供回温度(℃）',
// 				nameLocation: 'middle',
// 				nameTextStyle: { padding: [3, 4, 50, 6] },
// 				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
// 				axisLine: { show: false },
// 				axisTick: { show: false },
// 				axisLabel: { color: state.charts.color, formatter: '{value} ' },
// 			},
// 			{
// 				name: '压力值(Mpa)',
// 				nameLocation: 'middle',
// 				nameTextStyle: { padding: [50, 4, 5, 6] },
// 				splitLine: { show: false },
// 				axisLine: { show: false },
// 				axisTick: { show: false },
// 				axisLabel: { color: state.charts.color, formatter: '{value} ' },
// 			},
// 		],
// 		series: [
// 			{
// 				name: '供温',
// 				type: 'line',
// 				smooth: true,
// 				showSymbol: true,
// 				// 矢量画五角星
// 				symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
// 				symbolSize: 12,
// 				yAxisIndex: 0,
// 				areaStyle: {
// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 						{ offset: 0, color: 'rgba(250,180,101,0.3)' },
// 						{ offset: 1, color: 'rgba(250,180,101,0)' },
// 					]),
// 					shadowColor: 'rgba(250,180,101,0.2)',
// 					shadowBlur: 20,
// 				},
// 				itemStyle: { color: '#FF8000' },
// 				// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
// 				data: [
// 					{ value: 1, stationName: 's1' },
// 					{ value: 3, stationName: 's2' },
// 					{ value: 4, stationName: 's3' },
// 					{ value: 9, stationName: 's4' },
// 					{ value: 3, stationName: 's5' },
// 					{ value: 2, stationName: 's6' },
// 				],
// 			},
// 			{
// 				name: '回温',
// 				type: 'line',
// 				smooth: true,
// 				showSymbol: true,
// 				symbol: 'emptyCircle',
// 				symbolSize: 12,
// 				yAxisIndex: 0,
// 				areaStyle: {
// 					color: new echarts.graphic.LinearGradient(
// 						0,
// 						0,
// 						0,
// 						1,
// 						[
// 							{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
// 							{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
// 						],
// 						false
// 					),
// 				},
// 				itemStyle: {
// 					color: '#3bbc86',
// 				},
// 				data: [
// 					{ value: 31, stationName: 's1' },
// 					{ value: 36, stationName: 's2' },
// 					{ value: 54, stationName: 's3' },
// 					{ value: 24, stationName: 's4' },
// 					{ value: 73, stationName: 's5' },
// 					{ value: 22, stationName: 's6' },
// 				],
// 			},
// 			{
// 				name: '压力值(Mpa)',
// 				type: 'bar',
// 				barWidth: 30,
// 				yAxisIndex: 1,
// 				itemStyle: {
// 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 						{ offset: 0, color: 'rgba(108,80,243,0.3)' },
// 						{ offset: 1, color: 'rgba(108,80,243,0)' },
// 					]),
// 					//柱状图圆角
// 					borderRadius: [30, 30, 0, 0],
// 				},
// 				data: [
// 					{ value: 11, stationName: 's1' },
// 					{ value: 34, stationName: 's2' },
// 					{ value: 54, stationName: 's3' },
// 					{ value: 39, stationName: 's4' },
// 					{ value: 63, stationName: 's5' },
// 					{ value: 24, stationName: 's6' },
// 				],
// 			},
// 		],
// 	};
// 	(<any>global.homeCharThree).setOption(option);
// 	(<any>state.myCharts).push(global.homeCharThree);
// }

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			setTimeout(() => {
				(<any>state.myCharts[i]).resize();
			}, i * 1000);
		}
	});
}
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
}
// 页面加载时
onMounted(() => {
	fetchApiData();
	initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {
		initEchartsResizeFun();
	}
);
// 监听 vuex 中是否开启深色主题
watch(
	() => themeConfig.value.isIsDark,
	(isIsDark) => {
		nextTick(() => {
			state.charts.theme = isIsDark ? 'dark' : '';
			state.charts.bgColor = isIsDark ? 'transparent' : '';
			state.charts.color = isIsDark ? '#dadada' : '#303133';
			setTimeout(() => {
				initLineChart();
			}, 500);
			setTimeout(() => {
				initPieChart();
			}, 700);
			setTimeout(() => {
				initBarChart();
			}, 1000);
		});
	},
	{
		deep: true,
		immediate: true,
	}
);
// 获取API数据
const fetchApiData = async () => {
	/* try {
		const res = await GetList({});
		if (res.code === 2000) {
			state.apiData = res.data;
			updateHomeData(res.data);
		}
	} catch (error) {
		console.error('获取统计数据失败:', error);
	} */
}
// 更新首页数据
const updateHomeData = (data: ApiData) => {
	// 更新顶部卡片数据
	state.homeOne[0].num1 = data.total_applications.toString();
	state.homeOne[1].num1 = data.total_positions.toString();
	state.homeOne[2].num1 = data.total_questions.toString();
	state.homeOne[3].num1 = data.total_reports.toString();
	
	// 更新折线图数据
	updateLineChart(data.application_trend);
}
// 更新折线图数据
const updateLineChart = (trendData: Array<{date: string; count: number}>) => {
	if (!global.homeChartOne) return;
	
	const option = {
		xAxis: {
			data: trendData.map((item: {date: string; count: number}) => item.date.substring(5)), // 只显示月-日
		},
		series: [
			{
				name: '申请数量',
				data: trendData.map((item: {date: string; count: number}) => item.count),
			}
		]
	};
	
	(<any>global.homeChartOne).setOption(option);
}

</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
}
.home-row {
  margin-bottom: 20px;
}
.home-col-table{
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	flex-wrap: wrap;
}

</style>
