<template>
	<div class="system-dashboard">
		<el-container>
			<el-header class="header">
				<el-row style="display: flex; overflow: hidden;flex-wrap: nowrap;justify-content: space-between;">
					<div   class="logo" style="min-width: 250px; display: flex;">
						<div><img src="../assets/logo2.png" /></div>
						<div>
							<div style="font-size: 16px;">演示医院</div>
							<div>演示医院</div>
						</div>
					</div>
					<div   style="display: flex;align-items: center;justify-content: center;">
						<div>统一预约管理系统</div>
					</div>
					<div  class="top_right" style=" display: flex;align-items: center;">
						<div>
							<el-switch v-model="isDark" inline-prompt active-color="var(--el-fill-color-dark)"
								inactive-color="var(--el-color-primary)" active-action-icon="Moon"
								inactive-action-icon="Sunny" @change="toggleDark" />
						</div>
						<div>
							<el-popover placement="bottom" :width="150" trigger="hover">
								<template #reference>
									<div class="top_user">
										<div style="margin-top: 7px;">
											<el-avatar :size="40" src="../assets/logo2.png" />
										</div>
										<div>{{BaseUserInfo.cn_name}}</div>
									</div>

								</template>
								<div style="display: flex; cursor: pointer;" @click="to('login')">
									<div style="margin-top: 2px;margin-right: 5px;"><el-icon>
											<SwitchButton />
										</el-icon> </div>
									<div> 退出</div>
								</div>
							</el-popover>
						</div>

					</div>

				</el-row>

			</el-header>
			<el-main>
				<div :gutter="20" class="system-grid">
					<div v-for="system in systems" :key="system.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="app_row">
						<el-card shadow="hover" class="system-card" @click="navigateTo(system)">
							<div class="card-content">
								<div class="icon-wrapper">
									<component :is="system.icon" class="system-icon"   />
								</div>
								
								<span class="system-title">{{ system.title }}</span>
							</div>
						</el-card>
						<div v-for="(item2,index2) in system.zi_list" :key="index2" class="zi_button"  @click="navigateTo(item2)">{{item2.title}} </div>
					</div>
				</div>
			</el-main>
		</el-container>
		<div style="position: absolute;bottom: 10px;right: 10px;font-size: 12px;color:#333;">系统时间：{{currentTime}}</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,onUnmounted,
		watch
	} from 'vue';
	import {
		DataAnalysis,
		Calendar,
		HomeFilled,
		EditPen,
		Tickets,
		Operation,
		User,
		Monitor,
		Message,
		House,
	} from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus'
	import {

		GetBaseAdminUserInfo,

	} from '@/api/api.js'
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()
	import {
		useToggle
	} from '@vueuse/shared'
	import {
		useDark
	} from "@vueuse/core";
	import userjpg from '@/assets/user.jpg'
	let isCollapse = ref(false)
	const isDark = useDark()
	const toggleDark = () => useToggle(isDark)
	// 定义系统列表
	const systems = [{
			id: 'medical-tech',
			title: '医技系统',
			icon: Monitor,
			url: './#/dashboard',
			zi_list:[
				{
					title:"项目预约",
					url: './#/dashboard',
				},
				{
					title:"智能资源排期",
					url: './#/appointmentmngr/planmodel',
				},
				{
					title: '号源系统',		 
					url: './#/appointmentmngr/planlist',
				},{
					title: '检查项目设置',		 
					url: './#/yewu/CheckItemConfig',
				},
				{
					title: '时间段管理',		 
					url: './#/appointmentmngr/timeperiodmngr',
				},
				{
					title: '渠道比例',		 
					url: './#/appointmentmngr/ratio',
				},
				{
					title: '参数设置',		 
					url: './#/systemMngr/systemConfig',
				}
			]
		},
		{
			id: 'surgery-booking',
			title: '手术预约系统',
			icon: Operation,
			url: null,
			zi_list:[
				{
					title:"预约",
					url: null,
				},
				{
					title:"手术资源排期",
					url: null,
				}
			]
		}, {
			id: 'surgery-booking',
			title: '床位预约系统',
			icon: Tickets,
			url: null,
			zi_list:[
				{
					title:"床位预约",
					url: null,
				},
				
				{
					title: '床位管理',		 
					url: null,
				}
			]
		},
		 
		{
			id: 'patient-data',
			title: '资源趋势分析',
			icon: DataAnalysis,
			url: './#/baobiao',
			zi_list:[
				{
					title:"手术预约",
					url: null,
				},
				
				{
					title: '床位预约',		 
					url: null,
				},
				{
					title: '医技预约',		 
					url: './#/baobiao?type=tech',
				}
			]
		},
		{
			id: 'questionnaire',
			title: '满意度调查',
			icon: EditPen,
			url: 'https://qhdzyy-wj.lkali.hoho.fun/mana/#/autologin?t=eyJhIjoiYWRtaW4iLCJwIjoiMTIzNDU2In0%3D',
			zi_list:[
				{
					title:"问卷管理",
					url: 'https://qhdzyy-wj.lkali.hoho.fun/mana/#/autologin?t=eyJhIjoiYWRtaW4iLCJwIjoiMTIzNDU2In0%3D',
				},
				
				{
					title:"问卷记录",
					url: 'https://qhdzyy-wj.lkali.hoho.fun/mana/#/autologin?t=eyJhIjoiYWRtaW4iLCJwIjoiMTIzNDU2In0%3D',
				},
			]
		},
		{
			id: 'msg-send',
			title: '消息推送管理',
			icon: Message,
			url: './#/sendMsgMngr',
			zi_list:[
				{
					title:"消息模板",
					url: null,
				},
				
				{
					title:"消息列表",
					url: null,
				},
			]
		},
		// {
		//   id: 'user-center',
		//   title: '用户中心',
		//   icon: User,
		//   url: '/user-center',
		// },
	]

	// 跳转逻辑（可替换为 router.push 或 window.open）
	const navigateTo = (system) => {
	 
		if (system.url === null) {
			ElMessage.error("暂未对接")
			return false
		}
		// 示例：使用 Vue Router
		//router.push(system.url)

		// 或新开页面

		window.open(system.url, '_blank')
	}
	const to = (url) => {
		if (url == 'login') {
			sessionStorage.clear()
		}

		window.location.href = "./#/" + url
	}
	let BaseUserInfo = ref({
	
	})
	const getBaseAdminUserInfo = () => {
		GetBaseAdminUserInfo().then(res => {
			BaseUserInfo.value = res.info[0]
			sessionStorage.setItem('LoginUserInfo', JSON.stringify(res.info[0]))
			BaseUserInfo.value.img = import.meta.env.VITE_APP_FILE + BaseUserInfo.value.img
			 
		})
	}
	// 新增：定义响应式变量存储当前时间
		const currentTime = ref('');
		// 新增：定时器标识
		let timeInterval = null;
	
		// 格式化时间函数
		const formatTime = (date) => {
		  const year = date.getFullYear();
		  const month = String(date.getMonth() + 1).padStart(2, '0');
		  const day = String(date.getDate()).padStart(2, '0');
		  const hours = String(date.getHours()).padStart(2, '0');
		  const minutes = String(date.getMinutes()).padStart(2, '0');
		  const seconds = String(date.getSeconds()).padStart(2, '0');
		  
		  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		};
	
		// 新增：更新时间的函数
		const updateCurrentTime = () => {
			currentTime.value = formatTime(new Date());
		};
	onMounted(() => {

		getBaseAdminUserInfo()
// 启动定时器，每秒更新一次
		timeInterval = setInterval(updateCurrentTime, 1000);

	})
	onUnmounted(() => {
			clearInterval(timeInterval);
		});
</script>

<style scoped>
	.system-dashboard {
		height: 100vh;
		background-color: #f5f7fa;
	}

	.header {
		background-color: #98c1ff;
		color: white;
		text-align: center;

		font-size: 24px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.system-grid {
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.system-card {
		height: 120px;
		cursor: pointer;
		transition: transform 0.2s, box-shadow 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200px;
		padding: 0px;
		margin-bottom: 4px;
		border-radius: 8px;
	}

	.system-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
	}

	.card-content {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.system-icon {
		font-size: 14px;
		color: #409eff;
	}

	.system-title {
		font-size: 14px;
		font-weight: 500;
		color: var(--color-text);
	}

	.top_user {
		display: flex;
		cursor: pointer;
		align-items: center;
		font-size: 14px;
	}

	.top_user div {
		margin-left: 10px;
	}

	.top_right {
		display: flex;
		justify-content: flex-end;
		padding-right: 20px;
	}

	.top_right div {
		margin-left: 10px;
	}

	.offOn {
		cursor: pointer;
	}

	.offOn:hover {
		color: #409eff;
	}

	.logo {
		font-size: 18px;
		font-weight: 700;
		color: var(--color-text);
	}

	.logo img {
		margin-top: 10px;
		margin-right: 10px;
		width: 40px;
	}
	.icon-wrapper {
	  width: 40px;
	  height: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.app_row{
		display: flex;
		align-items: center;
	}
	.zi_button{
		width: 120px;
		height: 50px;
		background-color: #fff;
		border-radius: 8px;
		text-align: center;
		line-height: 50px;
		cursor: pointer;
		margin-left: 20px;
	}
	.zi_button:hover {
		background-color: #f0f7ff;
		border: 1px solid #dbe9ff;
	}
</style>