<template>
	<div class="home-container">

		<!-- 添加英雄联盟数据可视化部分 -->
		<el-row :gutter="15" class="lol-data-section">
			<el-col :span="24">
				<div class="lol-container">
					<div class="head">
						<div class="weather">
							<span id="showTime"></span>
							<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
								<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
							</el-button>
							<el-button class="settings-btn" type="text" @click="openSettings">
								<el-icon><Setting /></el-icon>
							</el-button>
						</div>
						<h1>设备运维数据中心</h1>
					</div>

					<div class="mainbox">
						<ul class="clearfix">
							<li>
								<div v-if="panelSettings.deviceUtilization" class="boxall" :style="{ flex: !panelSettings.deviceRanking ? 3.5 : 2 }">
									<div class="alltitle">设备利用率趋势</div>
									<div class="navboxall" id="echart5" style="height: 95%;"></div>
								</div>
								<div v-if="panelSettings.deviceRanking" class="boxall" :style="{ flex: !panelSettings.deviceUtilization ? 3.5 : 1.5, overflow: 'hidden' }">
									<div class="alltitle">单台设备累计借用时长排名</div>
									<div class="navboxall">
										<div class="wraptit">
											<span>排名</span><span>设备名称</span><span>设备编号</span><span>借用时长</span>
										</div>
										<div class="wrap" style="height: 85%">
											<ul>
												<li v-for="(hero, index) in heroData" :key="index" style="width: 100%;">
													<div
														style="display: flex;justify-content: space-between; width: 100%;">
														<span>{{ index + 1 }}</span>
														<span>{{ hero.device_name }}</span>
														<span>{{ hero.device_code }}</span>
														<span>{{ hero.total_duration }}</span>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- <div class="boxall" style="height:260px; overflow: hidden;">
									<div class="alltitle">设备故障统计</div>
									<div class="navboxall" id="echart1" style="height: 95%;"></div>
								</div> -->
							</li>

							<li>
								<div v-if="panelSettings.coreMetrics" class="boxall" :style="{ height: !panelSettings.borrowTrend ? '700px' : '360px' }">
									<div class="alltitle">核心概览指标</div>
									<div class="clearfix navboxall" style="height: 100%">
										<div class="data-overview">
											<div class="data-card total-devices">
												<div class="card-content">
													<div class="card-title">设备总数</div>
													<div class="card-value">{{ devicedata?.total_devices ?? 0 }}<span
															class="card-unit">个</span></div>
												</div>
											</div>
											<div class="data-card borrowed">
												<div class="card-content">
													<div class="card-title">已借出</div>
													<div class="card-value">{{ devicedata?.borrowed_devices ?? 0 }}<span
															class="card-unit">个</span></div>
												</div>
											</div>
											<div class="data-card available">
												<div class="card-content">
													<div class="card-title">可用设备</div>
													<div class="card-value">{{ devicedata?.available_devices ?? 0 }}<span
															class="card-unit">个</span></div>
												</div>
											</div>
											<div class="data-card today-borrowed">
												<div class="card-content">
													<div class="card-title">今日归还</div>
													<div class="card-value">{{ devicedata?.today_returned ?? 0 }}<span
															class="card-unit">个</span></div>
												</div>
											</div>
											<div class="data-card today-returned">
												<div class="card-content">
													<div class="card-title">今日借出</div>
													<div class="card-value">{{ devicedata?.today_borrowed ?? 0 }}个</div>
												</div>
											</div>
											<div class="data-card total-borrows">
												<div class="card-content">
													<div class="card-title">累计借用次数</div>
													<div class="card-value">{{ devicedata?.total_borrows ?? 0 }}<span
															class="card-unit">个</span></div>
													<!-- <div class="card-subtitle">bobel (借出总数)</div> -->
												</div>
											</div>
										</div>
									</div>
								</div>
								<div v-if="panelSettings.borrowTrend" class="boxall" :style="{ height: !panelSettings.coreMetrics ? '700px' : '340px' }">
									<div class="alltitle">整体设备借用次数趋势</div>
									<div class="navboxall" id="echart3" style="height: 95%;"></div>
								</div>

								<!-- <div class="boxall" style="height:350px">
									<div class="alltitle">设备实时执行情况</div>
									<div class="navboxall" id="echart4" style="height: 95%;"></div>
								</div> -->

							</li>

							<li>

								<div class="timeselect" style="height:30px">
									<!-- 快捷时间选择 -->
									<el-radio-group class="transparent-radio" v-model="quickRange"
										@change="handleQuickRange">
										<el-radio-button label="day">今日</el-radio-button>
										<el-radio-button label="month">本月</el-radio-button>
										<el-radio-button label="year">今年</el-radio-button>
									</el-radio-group>
								</div>
								<div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '350px', overflow: 'hidden' }">
									<div class="alltitle">单台设备累计借用次数排名</div>
									<div class="navboxall">

										<div class="filter-bar"
											style="margin-bottom: 10px; display: flex; gap: 12px; align-items: center;">
											<!-- 借用类型筛选 -->
											<el-select class="transparent-select"  v-model="selectedType"
												placeholder="借用类型" @change="fetchRankings">
												<el-option label="全部" value="all" />
												<el-option label="常规借用" value="regular" />
												<el-option label="课堂借用" value="classroom" />
												<el-option label="特殊借用" value="special" />
											</el-select>


											<!-- 时间范围筛选 -->
											<el-date-picker v-model="dateRange" type="daterange"
												start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
												value-format="YYYY-MM-DD" @change="fetchRankings" />

												 <el-select clearable v-model="deviceTagId" placeholder="标签类型" 
													@change="fetchRankings">
													<el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" />
												</el-select>

										</div>

										<el-table :data="teamRankings" style="width: 100%;height: 75%;">
											<el-table-column type="index" label="排名" width="80" />
											<el-table-column prop="device_name" label="设备名称" />
											<!-- <el-table-column prop="device_code" label="设备编码" /> -->
											 <el-table-column prop="device_name" label="标签名">
												<template #default="scope">
													<span v-for="tag in scope.row.device_tags" :key="tag" :type="tag.type">{{' '+tag.name }}</span>
												</template>
											</el-table-column>
											<el-table-column prop="borrow_count" label="借用次数" />
										</el-table>

									</div>


								</div>


								<div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '320px' }">
									<div class="alltitle">活跃用户</div>
									<div class="navboxall">
										<div class="wraptit">
											<span>排名</span><span>用户名称</span><span>总借用次数</span>
										</div>
										<div class="wrap" style="height:85%;">
											<ul>
												<li v-for="(hero, index) in userList" :key="index" style="width: 100%;">
													<div
														style="display: flex;justify-content: space-between; width: 100%;">
														<span>{{ index + 1 }}</span>
														<span>{{ hero.user_name }}</span>
														<span>{{ hero.borrow_count }}</span>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- <div class="boxall" style="height:300px">
									<div class="alltitle">设备维修时间统计</div>
								</div> -->
							</li>
						</ul>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 设置弹窗 -->
		<el-dialog
			v-model="settingsDialogVisible"
			title="面板设置"
			width="500px"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<div class="panel-settings">
				<el-checkbox v-model="panelSettings.deviceUtilization">设备利用率趋势</el-checkbox>
				<el-checkbox v-model="panelSettings.deviceRanking">单台设备累计借用时长排名</el-checkbox>
				<el-checkbox v-model="panelSettings.coreMetrics">核心概览指标</el-checkbox>
				<el-checkbox v-model="panelSettings.borrowTrend">整体设备借用次数趋势</el-checkbox>
				<el-checkbox v-model="panelSettings.deviceBorrowRanking">单台设备累计借用次数排名</el-checkbox>
				<el-checkbox v-model="panelSettings.activeUsers">活跃用户</el-checkbox>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => state.settingsDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="saveSettings">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, onUnmounted, ref, watch, nextTick, onActivated, computed } 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 { useRouter } from 'vue-router';
import { request } from '/@/utils/service';
import dayjs from 'dayjs';
import { GetList } from '../devicelabel/api'
import { FullScreen, Aim, Setting } from '@element-plus/icons-vue'



// 定义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],
};

export default defineComponent({
	name: 'home',
	components: {
		FullScreen,
		Aim
	},
	setup() {

		const scrollOffset = ref(0)
		const isFullscreen = ref(false)

		// 切换全屏
		const toggleFullScreen = () => {
			const element = document.querySelector('.home-container') as HTMLElement;
			if (!element) return;

			if (!document.fullscreenElement) {
				element.requestFullscreen().then(() => {
					isFullscreen.value = true;
				}).catch(err => {
					console.error(`全屏错误: ${err.message}`);
				});
			} else {
				document.exitFullscreen().then(() => {
					isFullscreen.value = false;
				}).catch(err => {
					console.error(`退出全屏错误: ${err.message}`);
				});
			}
		};
		let intervalId: number | null = null
		const rowHeight = 50
		const visibleRows = 6



		const selectedType = ref('all');
		const dateRange = ref<[string, string] | null>(null);
		const deviceTagId=ref('')
		const quickRange = ref('');
		const labelType=ref([])

		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({
			devicedata: {
				total_devices: 0,
				borrowed_devices: 0,
				available_devices: 0,
				today_borrowed: 0,
				today_returned: 0,
				total_borrows: 0
			},
			panelSettings: {
				deviceUtilization: true, // 设备利用率趋势
				deviceRanking: true,    // 单台设备累计借用时长排名
				coreMetrics: true,      // 核心概览指标
				borrowTrend: true,      // 整体设备借用次数趋势
				deviceBorrowRanking: true, // 单台设备累计借用次数排名
				activeUsers: true,      // 活跃用户
			},
			settingsDialogVisible: false,
			homeOne: [],
			homeThree: [],
			myCharts: [],
			charts: {
				theme: '',
				bgColor: '',
				color: '#303133',
			},
			apiData: null as ApiData | null,

			heroData: [],
			userList: [],/* 用户统计列表 */
			teamRankings: []
		});
		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: ['使用率'], right: 0 },
				grid: { top: 70, right: 80, bottom: 30, left: 80 },
				xAxis: [
					{
						type: 'category',
						data: [],
						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}' },
					}
				],
				series: [
					{
						name: '使用率',
						type: 'line',
						smooth: true,
						showSymbol: true,
						data: [],
						itemStyle: { color: '#91cc75' }
					}
				],
			};
			(<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);
		};


		let scrollTimer: number | null = null
		const scrollSpeed = 1 // px per frame
		const scrollStep = () => {
			scrollOffset.value += scrollSpeed
			const scrollInner = document.querySelector('.scroll-inner')
			const scrollBody = document.querySelector('.scroll-body')

			if (scrollInner && scrollBody) {
				const maxScroll = scrollInner.scrollHeight - scrollBody.clientHeight
				if (scrollOffset.value >= maxScroll) {
					scrollOffset.value = 0 // 重置回顶部
				}
			}
		}

		const startScroll = () => {
			if (!scrollTimer) {
				scrollTimer = window.setInterval(scrollStep, 20) // 控制速度
			}
		}

		const stopScroll = () => {
			if (scrollTimer) {
				clearInterval(scrollTimer)
				scrollTimer = null
			}
		}
			const getList = async () => {
			const res = await GetList({
				page: 1,
				page_size: 20,
			})
			if (res.code === 2000) {
				labelType.value = res.data
			}
			}
		// 页面加载时
		onMounted(() => {
			fetchApiData();
			initEchartsResize();
			initTime(); // 初始化时间显示
			// initHeroScroll(); // 添加英雄数据轮播初始化
			getList();
			// 从本地存储加载面板设置
			const savedSettings = localStorage.getItem('dashboardPanelSettings');
			if (savedSettings) {
				state.panelSettings = JSON.parse(savedSettings);
			}
			nextTick(() => {

			});
		});
		// 由于页面缓存原因，keep-alive
		onActivated(() => {
			initEchartsResizeFun();
		});
		onUnmounted(() => {
			// if (intervalId) clearInterval(intervalId)
			// stopScroll();
		});
		// 监听 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,
			}
		);

		/* const userList = ref([]) */
		// 获取API数据
		const fetchApiData = async () => {
			try {
				const res = await api.GetOverviewList();
				if (res.code === 2000) {
					// state.apiData = res.data;
					// updateHomeData(res.data);
					state.devicedata = res.data;
					updateZbCharts(res.data);
				}
				const drres = await api.GetDeviceRankList();
				if (res.code === 2000) {
					state.teamRankings = [...drres.data.borrow_count_ranking].sort(
						(a, b) => b.borrow_count - a.borrow_count
					);
					state.heroData = [...drres.data.borrow_duration_ranking].sort((a, b) => Number(b.total_duration) - Number(a.total_duration))

					console.log("state.heroData:::", state.heroData)

				}
				const ulres = await api.GetUtilizationList();
				if (ulres.code === 2000) {
					//clos
					console.log("ulres:::", ulres)
					updateMonthlyUtilizationChart(ulres.data.trends)
				}
				const btres = await api.GetBorrowTrends();
				if (btres.code === 2000) {
					//clos
					updateBorrowTrendChart(btres.data.trends)
				}
				const acres = await api.GetActiveUsers();
				if (acres.code === 2000) {
					//clos
					/* updateActiveUserChart(acres.data.active_users) */
					state.userList = acres.data.active_users
				}



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





		};


		const handleQuickRange = (range: string) => {
			const today = dayjs();
			if (range === 'day') {
				dateRange.value = [today.format('YYYY-MM-DD'), today.format('YYYY-MM-DD')];
			} else if (range === 'month') {
				dateRange.value = [today.startOf('month').format('YYYY-MM-DD'), today.endOf('month').format('YYYY-MM-DD')];
			} else if (range === 'year') {
				dateRange.value = [today.startOf('year').format('YYYY-MM-DD'), today.endOf('year').format('YYYY-MM-DD')];
			}
			fetchRankings();
		};

		const fetchRankings = async () => {
			try {
				const params = {
					type: selectedType.value,
					start_date: dateRange.value?.[0],
					end_date: dateRange.value?.[1],
					tag_id:deviceTagId.value
				};
				const res = await api.GetBorrowRanking(params);
				if (res.code === 2000) {
					state.teamRankings = [...res.data.borrow_count_ranking].sort((a, b) => b.borrow_count - a.borrow_count);
				}
			} catch (err) {
				console.error('获取设备排名失败:', err);
			}
		};


		//更新活跃用户数据
		const updateActiveUserChart = (userData: Array<{ user_name: string; total_quantity: number }>) => {
			const echart2 = echarts.init(document.getElementById('echart2'));
			if (!echart2) return;

			const option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center',
					textStyle: {
						color: '#fff'
					}
				},
				series: [
					{
						name: '借用总量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							formatter: '{b}: {c}件'
						},
						data: userData.map(user => ({
							value: user.total_quantity,
							name: user.user_name
						}))
					}
				]
			};

			echart2.setOption(option);
		};



		const groupByMonth = (data: Array<{ date: string; borrow_count: number; total_duration: number }>) => {
				const map = new Map<string, { borrow_count: number; total_duration: number }>()

				data.forEach(item => {
					const month = dayjs(item.date).format('YYYY-MM')
					if (!map.has(month)) {
					map.set(month, { borrow_count: 0, total_duration: 0 })
					}
					const current = map.get(month)!
					current.borrow_count += item.borrow_count
					current.total_duration += item.total_duration
				})

				return Array.from(map.entries()).map(([month, values]) => ({
					date: month, // 保持字段名为 date，兼容原图表逻辑
					borrow_count: values.borrow_count,
					total_duration: values.total_duration
				}))
		}




		// 更新首页数据
		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 updateBorrowTrendChart = (trendData: Array<{ date: string; borrow_count: number; total_duration: number }>) => {
			const monthlyData = groupByMonth(trendData) 
			const echart3 = echarts.init(document.getElementById('echart3'));
			if (!echart3) return;

			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: { color: '#57617B' }
					}
				},
				legend: {
					data: ['借用次数', '借用时长'],
					top: '0',
					textStyle: { color: '#fff' },
					itemGap: 20
				},
				grid: {
					left: '0',
					right: '20',
					top: '10',
					bottom: '20',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						show: true,
						textStyle: {
							color: 'rgba(255,255,255,1)',
							fontSize: 11
						}
					},
					axisLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					},
					// data: trendData.map(item => item.date.substring(5))
					data: monthlyData.map(item => item.date)
				}],
				yAxis: [{
					axisLabel: {
						show: true,
						textStyle: { color: 'rgba(255,255,255,.6)' }
					},
					axisLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					},
					splitLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					}
				}],
				series: [
					{
						name: '借用次数',
						type: 'line',
						smooth: true,
						// data: trendData.map(item => item.borrow_count)
						data: monthlyData.map(item => item.borrow_count)
					},
					{
						name: '借用时长',
						type: 'line',
						smooth: true,
						// data: trendData.map(item => item.total_duration)
						data: monthlyData.map(item => item.total_duration)
					}
				]
			};

			echart3.setOption(option);
		};


		//更新利用趋势图
		const updateMonthlyUtilizationChart = (monthlyData: Array<{ month: string; rate: number }>) => {
			const echart5 = echarts.init(document.getElementById('echart5'));
			if (!echart5) return;

			const option = {
				xAxis: {
					type: 'category',
					data: monthlyData.map(item => item.date),
					axisLabel: { color: '#fff' }
				},
				yAxis: {
					type: 'value',
					axisLabel: { color: '#fff' }
				},
				series: [
					{
						name: '月度利用率',
						type: 'line', // 或 'bar'，看你想要什么样的图
						data: monthlyData.map(item => item.utilization_rate),
						smooth: true,
						itemStyle: { color: '#91cc75' }
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: { type: 'line' }
				},
				legend: {
					data: ['月度利用率'],
					textStyle: { color: '#fff' }
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				}
			};

			echart5.setOption(option);
		};

		//更新设备信息
		const updateZbCharts = (devicedata: {
			total_devices: number;
			borrowed_devices: number;
			available_devices: number;
			today_borrowed: number;
			today_returned: number;
			total_borrows: number;
		}) => {
			// 移除图表初始化代码

			// 不再需要图表相关代码

		};

		// 更新折线图数据
		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);
		};
		// 添加卡片点击跳转功能
		const handleCardClick = (index: number) => {
			const routes = [
				'/JobApplication/list/index', // 申请总数
				'/position/list',    // 职位总数
				'/questionBank/list',    // 问题总数
				'/JobApplication/list/index'       // 报告总数
			];

			if (index >= 0 && index < routes.length) {
				router.push(routes[index]);
			}
		};

		// 初始化时间显示
		const initTime = () => {
			const showTime = () => {
				const dt = new Date();
				const y = dt.getFullYear();
				const mt = dt.getMonth() + 1;
				const day = dt.getDate();
				const h = dt.getHours();
				const m = dt.getMinutes();
				const s = dt.getSeconds();
				document.getElementById("showTime")!.innerHTML =
					y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
			};
			showTime();
			setInterval(showTime, 1000);
		};
		//
		/* function echarts_3() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart3'));

		option3 

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	} */

		// 初始化英雄数据轮播
		const initHeroScroll = () => {
			const wrap = document.querySelector('.wrap') as HTMLElement;
			if (!wrap) return;

			const ul = wrap.querySelector('ul') as HTMLElement;
			if (!ul) return;

			// 克隆列表项用于无缝滚动
			const cloneItems = ul.innerHTML;
			ul.innerHTML = cloneItems + cloneItems;

			let scrollHeight = 0;
			const itemHeight = 32; // 每个列表项的高度
			const totalItems = state.heroData.length;

			const scroll = () => {
				scrollHeight++;
				if (scrollHeight >= totalItems * itemHeight) {
					scrollHeight = 0;
					ul.style.transition = 'none';
					ul.style.transform = `translateY(0)`;
					// 强制回流
					ul.offsetHeight;
					ul.style.transition = 'transform 0.5s linear';
				} else {
					ul.style.transform = `translateY(-${scrollHeight}px)`;
				}
			};

			// 每3秒滚动一次
			setInterval(() => {
				scroll();
			}, 3000);
		};



		const settingsDialogVisible = computed(() => state.settingsDialogVisible);
		const panelSettings = computed(() => state.panelSettings);

		return {
			homeLineRef,
			homePieRef,
			homeBarRef,
			selectedType,
			dateRange,
			labelType,
			deviceTagId,
			quickRange,
			handleCardClick,
			handleQuickRange,
			fetchRankings,
			scrollOffset,
			devicedata: computed(() => state.devicedata),
			heroData: computed(() => state.heroData),
			userList: computed(() => state.userList),
			teamRankings: computed(() => state.teamRankings),
			settingsDialogVisible,
			panelSettings,
			isFullscreen,
			toggleFullScreen,
			// 打开设置弹窗
			openSettings: () => {
				state.settingsDialogVisible = true;
			},
			// 保存设置
			saveSettings: () => {
				state.settingsDialogVisible = false;
				// 可以在这里添加保存到本地存储的逻辑
				localStorage.setItem('dashboardPanelSettings', JSON.stringify(state.panelSettings));
			},
		};
	},
});








</script>


<style scoped lang="scss">
.scroll-body {
	height: 300px;
	overflow: hidden;
	position: relative;
}

.scroll-inner {
	transition: transform 0.2s linear;
}



.scroll-table-wrapper {
	height: 300px;
	overflow: hidden;
	position: relative;
}

.scroll-table {
	transition: transform 0.5s linear;
}


.transparent-radio ::v-deep(.el-radio-button__inner) {
	background-color: transparent;
	border-color: transparent;
	color: #ede6e6;
	box-shadow: none;
}

.transparent-radio ::v-deep(.el-radio-button.is-active .el-radio-button__inner) {
	background-color: rgba(64, 158, 255, 0.1);
	border-color: #409EFF;
	color: #409EFF;
}

/* Select组件样式 */
:deep(.el-select__wrapper) {
	color: #fff !important;
	background-color: transparent !important;
	border-color: transparent !important;
	.el-input__wrapper {
		background-color: transparent !important;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
		
		&:hover {
			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
		}
		
		&.is-focus {
			box-shadow: 0 0 0 1px #409EFF !important;
		}
	}
	
	.el-input__inner {
		color: #fff !important;
		
		&::placeholder {
			color: rgba(255, 255, 255, 0.5) !important;
		}
	}
}

/* Select下拉框样式 */
:deep(.el-select__popper) {
	background-color: #001d6e !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	
	.el-select-dropdown__item {
		color: #fff !important;
		
		&.hover, &:hover {
			background-color: rgba(64, 158, 255, 0.1) !important;
		}
		
		&.selected {
			background-color: rgba(64, 158, 255, 0.2) !important;
			color: #409EFF !important;
		}
	}
}
:deep(.el-date-editor) {
	color: #fff !important;
	background-color: transparent !important;
	border-color: transparent !important;
}

$homeNavLengh: 8;

.home-container {
	overflow: hidden;
	height: 100%;
	
	&:fullscreen {
		background: #000d4a;
		height: 100vh;
		width: 100vw;
		
		.lol-data-section {
			height: 100vh;
			margin: 0;
			
			.el-col {
				padding: 0 !important;
			}
			
			.lol-container {
				height: 100vh;
				border-radius: 0;
			}
		}
	}

	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-one-title {
			padding: 20px 0px;
			color: #808080;
			font-size: 14px;
			letter-spacing: 3px;
		}

		.home-card-item {
			width: 100%;
			height: 130px;
			border-radius: 16px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}

			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;

				i {
					color: var(--el-text-color-placeholder);
				}
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}

	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}
	}

	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;

			.home-monitor {
				height: 100%;

				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;

					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}

					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}

	.home-right {
		.home-card-item {
			height: 500px;
			border-radius: 16px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			.home-card-item-content {
				display: flex;
			}

			::v-deep(.el-collapse-item__header) {
				border: none;
			}

			::v-deep(.el-collapse-item__wrap) {
				border: none;
			}

			::v-deep(.el-collapse-item__content) {
				padding: 0;
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
				border-bottom: 1px solid var(--next-border-color-light);
				padding-bottom: 10px;
				margin-bottom: 10px;
			}

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
		}
	}

	// 响应式处理
	@media screen and (max-width: 1200px) {
		.el-col-18 {
			width: 100%;
		}

		.el-col-6 {
			width: 100%;
			margin-top: 15px;
		}

		.home-right .home-card-item {
			height: auto;
			min-height: 300px;
		}
	}

	.todo-list {
		padding: 10px 20px;
		margin-top: 15px;
		margin-left: 50px;

		.todo-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 0;
			border-bottom: 1px solid var(--next-border-color-light);

			.todo-item-left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.todo-tag {
					margin-right: 10px;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			.todo-date {
				color: var(--el-text-color-secondary);
				font-size: 13px;
			}

			:deep(.el-checkbox__label) {
				color: var(--el-text-color-primary);
			}
		}
	}

	.score-list {
		padding: 10px 0;

		.score-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 15px;
			margin: 5px 0;
			background: var(--el-fill-color-light);
			border-radius: 4px;

			.score-name {
				font-size: 14px;
				color: var(--el-text-color-primary);
			}

			.score-value {
				font-size: 14px;
				color: var(--el-color-primary);
				font-weight: 500;
			}
		}
	}

	// 添加英雄联盟数据可视化样式
	.lol-data-section {


		.lol-container {
			border-radius: 16px;

			color: #fff;
			background: #000d4a; // url(/@/assets/img/bg.png) center top

			.head {
				height: 105px;
				background: url(/@/assets/img/head_bg.png) no-repeat center center;
				text-align: center;
				position: relative;

				h1 {
					font-size: 24px;
					color: #fff;
					line-height: 90px;
					text-align: center;
				}

				.weather {
					position: absolute;
					right: 20px;
					top: 0;
					line-height: 85px;
					display: flex;
					align-items: center;
					gap: 15px;

					.fullscreen-btn {
						color: #fff;
						font-size: 20px;
						padding: 0;
						margin-left: 10px;

						&:hover {
							color: #409EFF;
						}
					}
				}
			}

			.mainbox {
				height: calc(100vh - 105px);
				padding: 10px 20px;
				display: flex;
				flex-direction: column;

				.boxall {
					border: 1px solid rgba(25, 186, 139, 0.17);
					padding: 15px;
					background: rgba(255, 255, 255, 0.04);
					margin-bottom: 15px;
					border-radius: 8px;

					// 添加表格透明样式
					:deep(.el-table) {
						background-color: transparent;

						&::before {
							display: none;
						}

						tr {
							background-color: transparent;
						}

						th {
							background-color: transparent;
							border-bottom-color: rgba(255, 255, 255, 0.1);
							color: #fff;
						}

						td {
							background-color: transparent;
							border-bottom-color: rgba(255, 255, 255, 0.1);
							color: #fff;
						}

						.el-table__cell {
							background-color: transparent;
						}

						// 添加表头背景透明
						.el-table__header {
							background-color: transparent;

							tr {
								background-color: transparent;
							}

							th.el-table__cell {
								background-color: transparent !important;
							}
						}

						// 添加表体背景透明
						.el-table__body {
							background-color: transparent;

							tr {
								background-color: transparent !important;

								&:hover>td.el-table__cell {
									background-color: rgba(255, 255, 255, 0.1) !important;
								}
							}
						}
					}

					.alltitle {
						font-size: 16px;
						color: #fff;
						padding-left: 12px;
						margin-bottom: 10px;
						position: relative;
					}

					.alltitle:before {
						width: 5px;
						height: 20px;
						top: 2px;
						position: absolute;
						content: "";
						background: #49bcf7;
						border-radius: 20px;
						left: 0;
					}
				}

				ul.clearfix {
					display: flex;
					justify-content: space-between;
					margin: 0;
					padding: 0;
					list-style: none;
					height: 100%;

					li {
						width: 32%;
						display: flex;
						flex-direction: column;
						
						.boxall {
							flex: 1;
							display: flex;
							flex-direction: column;
							
							.navboxall {
								flex: 1;
								display: flex;
								flex-direction: column;
							}
						}
				}

				.wrap {
					height: 200px;
					overflow: auto;

					ul {
						list-style: none;
						padding: 0;
						margin: 0;
						transition: transform 0.5s linear;

						li {
							line-height: 32px;
							font-size: 14px;

							p {
								display: flex;
								justify-content: space-between;
								margin: 0;
								padding: 0 10px;
								color: #fff;

								span {
									flex: 1;
									text-align: center;

									&:first-child {
										text-align: left;
									}
								}
							}

							&:hover {
								background: rgba(255, 255, 255, 0.1);
							}
						}
					}
				}

				.wrap::-webkit-scrollbar {
					display: none;
					/* 隐藏滚动条 */
				}

				.wraptit {
					display: flex;
					justify-content: space-between;

					padding: 0 10px;
					margin-bottom: 10px;
					color: #fff;
					font-weight: bold;


					span {
						flex: 1;
						text-align: center;

						&:first-child {
							text-align: center;
						}
					}
				}

				.wrap {
					span {
						flex: 1;
						text-align: center;

						&:first-child {
							text-align: center;
						}
					}
				}

				.data-overview {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 15px;
					padding: 10px;
					height: 100%;

					.data-card {
						background: rgba(255, 255, 255, 0.1);
						border-radius: 8px;
						position: relative;
						overflow: hidden;
						transition: all 0.3s ease;
						height: 120px;
						border: none;

						&:hover {
							transform: translateY(-5px);
							box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
							background: rgba(255, 255, 255, 0.15);
						}

						.card-content {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							position: relative;
							z-index: 1;
							height: 100%;
							padding: 15px;

							.card-title {
								font-size: 16px;
								color: rgba(255, 255, 255, 0.9);
								margin-bottom: 20px;
							}

							.card-value {
								font-size: 48px;
								font-weight: bold;
								color: #fff;
								line-height: 1;
								margin-bottom: 10px;
							}

							.card-unit {
								font-size: 16px;
								color: rgba(255, 255, 255, 0.7);
								margin-left: 5px;
							}

							.card-subtitle {
								font-size: 14px;
								color: rgba(255, 255, 255, 0.6);
								margin-top: 5px;
							}
						}

						.chart-container {
							height: 60px;
							margin-top: 10px;
						}

						// 为不同卡片设置不同的背景色
						&.total-devices {
							background: #1e3799;
						}

						&.borrowed {
							background: #ff7f50;
						}

						&.available {
							background: #2ecc71;
						}

						&.today-borrowed {
							background: #0984e3;
						}

						&.today-returned {
							background: #9b59b6;
						}

						&.total-borrows {
							background: #8e44ad;
						}
					}
				}

				// .zhibiao > div {
				// 	width: 32%;
				// 	margin-bottom: 10px;
				// }
			}
		}
	}
	}
}

.panel-settings {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 20px;

	.el-checkbox {
		margin-right: 0;
		color: #606266;
	}
}
</style>
