<template>
	<div class="home">
		<el-affix :offset="0">
			<div class="header">
				<div class="header_left">
					<div class="logo"></div>
					<div>消息中心业务服务平台</div>
				</div>
				<div class="header_right">
					<el-badge is-dot>
						<el-icon style="font-size: 25px;cursor: pointer;"><BellFilled color="#fff"  /></el-icon>
					</el-badge>
					<el-icon style="font-size: 25px;cursor: pointer;"><QuestionFilled color="#fff" /></el-icon>
					<el-dropdown>
						<div class="dropdownBox">
							<div class="avatar"></div>
							<el-icon>
								<CaretBottom color="#fff" />
							</el-icon>
						</div>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="goLogin">退出系统</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<span style="color: #fff;">{{ userName }}</span>
				</div>
			</div>
		</el-affix>
		<el-row style="height: calc(100% - 50px);">
			<el-col :span="4">
				<el-menu
					:default-active="default_active"
					:router="true" 
					style="height: 100%;"    
					class="side-menu"
				>
					<TreeNode
						v-for="item in menuTree"
						:key="item.id"
						:menu="item"
					/>
				</el-menu>
			</el-col>
			<el-col :span="20" style="padding: 6px;">
				<RouterView />
			</el-col>
		</el-row>
		
	</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { CaretBottom, Platform, QuestionFilled, Menu, InfoFilled, HelpFilled, WarningFilled, Briefcase, Promotion, Comment, Tools, Grid, BellFilled, Management } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { RouterView, useRouter, useRoute } from 'vue-router';
// import { logout, getRouters } from "@/api/login";
import TreeNode from '@/components/TreeNode.vue';

const router = useRouter();
const route = useRoute();
const default_active = ref('');
const menuTree = ref([]);
const userName = ref('');

onMounted(() => {
	userName.value = JSON.parse(localStorage.getItem('userInfo')).loginName;
	getMenu();
})
// 监听路由变化
watch(
	() => route.path, // 监听 path 变化
	(newPath, oldPath) => {
		default_active.value = newPath.split('/')[1];
	}
);
const goLogin = () => {
	// logout().then(res => {
	// 	if(res.code == '0000') {
	// 		ElMessage({
	// 			message: '退出成功!',
	// 			type: 'success',
	// 		})
	// 		localStorage.removeItem('userInfo')
	// 		router.push('/')
	// 	}
	// })
}
const getMenu = () => {
	// getRouters().then(res => {
	// 	if(res.code == '0000') {
	// 		const result = buildCleanTree(res.result);
	// 		menuTree.value = result;
	// 		default_active.value = route.name;
	// 	}
	// })
}
//剔除菜单数据中的按钮数据
const buildCleanTree = source => {
	return source
    .filter(node => Object.prototype.hasOwnProperty.call(node, 'path')) // 剔除无 path
    .map(node => {
      // 先递归处理子节点
      const children = Array.isArray(node.children)
        ? buildCleanTree(node.children)
        : undefined;

      // 如果子节点为空数组，就不带 children；否则带上
      return children?.length
        ? { ...node, children }
        : (({ children: _, ...rest }) => rest)(node); // 去掉空 children
    });
}
const handleOpen = (key, keyPath) => {

}
</script>
<style scoped>
	.home{
		height: 100vh;
	}
	.dropdownBox{
		padding-top: 2px;
		cursor: pointer;
		display: flex;
		align-items: flex-end;
	}
	.dropdownBox:focus-visible{
		outline: none;
	}
	.avatar{
		width: 22px;
		height: 22px;
		background-color: #fff;
		border-radius: 22px;
		margin-right: 2px;
	}
	.logo{
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 30px;
		margin-right: 10px;
	}
	.header{
		height: 50px;
		background-color: #409EFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30px;
	}
	.header_left{
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: bold;
	}
	.header_right{
		display: flex;
		align-items: flex-start;
		width: 10%;
    	justify-content: space-between;
	}
	.el-menu--vertical {
		--el-menu-item-height: 40px;
		--el-menu-sub-item-height: 40px;
	}
</style>
