<template>
	<div>
		<el-container class="content">
			<el-header>
				<el-row>
					<el-col :span="3" class="logo" style="min-width: 250px;">
						<div><img :src="configInfo.站点图片"/></div>
						<div>
							<div style="font-size: 16px;">演示医院</div>
							<div>{{configInfo.站点名称}}</div>
						</div>
					</el-col>
					<el-col :span="3">
						<el-icon size="30" color="#5f5f5f" class="offOn" v-if="isCollapse==true"
							@click="isCollapse=false">
							<Expand />
						</el-icon>
						<el-icon size="30" color="#5f5f5f" class="offOn" v-if="isCollapse==false"
							@click="isCollapse=true">
							<Fold />
						</el-icon>
					</el-col>
					<el-col :offset="7" :span="10" class="top_right">
						<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="BaseUserInfo.img" />
										</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>

					</el-col>

				</el-row>
			</el-header>
			<el-container>
				<el-aside>
					<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-active="activeMenu"  
						:collapse="isCollapse" >
						<el-menu-item index="2-222" @click="to('dashboard')" style="display: none;">
							<el-icon>
								<Menu />
							</el-icon>
							<span>面板</span>
						</el-menu-item>
						<el-sub-menu v-for="(item,i) in menuFuList" :key="i" :index="item.url+i+''">
							<template #title>
								<el-icon>
									<component :is="item.icon"></component>
								</el-icon>
								<span>{{item.name}}</span>
							</template>
							<el-menu-item v-for="(item2,i2) in item.zi" :key="i2" :index="'/'+item2.url"
								@click="to(item2.url)">
								<el-icon>
									<component :is="item2.icon"></component>
								</el-icon>
								<span>{{item2.name}}</span>
							</el-menu-item>

						</el-sub-menu>
						<el-menu-item index="2-222" @click="to('adminChangPwd')">
							<el-icon>
								<UserFilled />
							</el-icon>
							<span>个人中心</span>
						</el-menu-item>
						<!-- <el-menu-item index="3" disabled>
							<el-icon>
								<document />
							</el-icon>
							<span>Navigator Three</span>
						</el-menu-item>
						<el-menu-item index="4">
							<el-icon>
								<setting />
							</el-icon>
							<span>Navigator Four</span>
						</el-menu-item> -->
					</el-menu>
				</el-aside>
				<el-main>
					<div class="out_k">
						<div class="cout_k_title">{{$route.meta['title']}}</div>
						<RouterView />
					</div>

				</el-main>
			</el-container>
		</el-container>
	</div>

</template>

<script setup>
	import {
		ref,
		onMounted,watch 
	} from 'vue';
	import {
		usePinia
	} from '@/stores/index.js'
	import {
		GetAdminBaseMenuList,
		GetBaseAdminUserInfo,
		GetConfigInfo
	} from '@/api/api.js'
	import {
		useToggle
	} from '@vueuse/shared'
	import {
		useDark
	} from "@vueuse/core";
import userjpg from '@/assets/user.jpg'

	import { useRoute,useRouter  } from "vue-router"
	const route = useRoute()
	const router = useRouter()
	 
 
watch(()=>router.currentRoute.value,(newVal,oldVal)=>{
 
   activeMenu.value=newVal.path
   console.log( activeMenu.value)
})


	const isDark = useDark()
	const toggleDark = () => useToggle(isDark)


	let menuFuList = ref([])
	let isCollapse = ref(false)
	const handleOpen = (key, keyPath) => {
		console.log(key, keyPath)
	}
	const handleClose = (key, keyPath) => {
		console.log(key, keyPath)
	}

	const to = (url) => {
		if(url=='login'){
		 sessionStorage.clear()
		}
		console.log(url)
		activeMenu.value=url
		window.location.href = "./#/" + url
	}
	const menuList = () => { //获取菜单列表
		GetAdminBaseMenuList().then(res => {
			var fulist = []
			var zilist = []
			var i = 0
			var menulist = res.list

			menulist.forEach((item, index) => {
				if (item.pid == '' || item.pid == null) {
					fulist.push(item)
					menulist.forEach((item2, index2) => {
						if (item2.pid == item.id) {
							zilist.push(item2)
						}
					})
					fulist[i].zi = zilist
					zilist = []
					i++
				}
			})
			menuFuList.value = fulist
			console.log(menuFuList.value)
 
		})
	}
	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
			console.log(route.path)
			let BingQu=[2]; //跳转住院主工作列表
			let QiTa=[3];   //跳转普通主工作列表
			let Guanli=[1,5];//管理员
			if(QiTa.includes(res.info[0].group)  && route.path=='/dashboard'){
				window.location.href = "./#/yewu/mainList"
			}
			if(BingQu.includes(res.info[0].group)  && route.path=='/dashboard'){
				window.location.href = "./#/yewu/MainList_ZhuYuan"
			}
			if(Guanli.includes(res.info[0].group)  && route.path=='/dashboard'){
				window.location.href = "./#/yewu/departmentResources"
			}
		})
	}
	let configInfo=ref('');
	const GetConfig=()=>{
		GetConfigInfo().then(res => {
		 if(res.status){
			 configInfo.value=res.data
			 configInfo.value.站点图片=import.meta.env.VITE_APP_FILE+configInfo.value.站点图片
		 }
		})
	}
	 let activeMenu=ref('');
	onMounted(() => {
		menuList()
		GetConfig()
		getBaseAdminUserInfo()
		activeMenu.value=router.currentRoute.value.path
		
	})
</script>

<style scoped>
	.content {
		/* border: 1px solid red; */
		height: 100vh;
	}

	.el-header {
		/* line-height: 60px; */
		border-bottom: 1px solid var(--color-border1);
		overflow: hidden;
		background-color: var(--color-background2);


	}

	.el-header .el-row {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.el-header .el-col {
		display: flex;
		align-items: center;
	}

	.el-aside {
		height: 100%;
		border-right: 1px solid var(--color-border1);
		width: auto;
		background-color: var(--color-background2);
	}

	.el-main {
		padding: 30px 20px 2px 20px;
		background-color: var(--color-background);
	}

	.out_k {
		border: 1px solid var(--color-border1);
		/* height: 100%; */
		position: relative;
		padding: 20px;
		background-color: var(--color-background2);
	}

	.cout_k_title {
		margin-left: 20px;
		padding: 0 10px;
		font-size: 20px;
		font-weight: 300;
		position: absolute;
		top: -17px;
		left: 8px;
		color: var(--color-text);
		background-color: var(--color-background2);

	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 250px;

	}

	.el-menu {
		border-right: 0px;
	}

	.top_user {
		display: flex;
		cursor: pointer;
		align-items: center;
	}

	.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;
	}
</style>
<style>
	.el-table th.el-table__cell {

		background-color: var(--color-table-th-background);

	}
</style>