<template>
	<!-- 主内容区域 -->
	<el-main>
		<!-- 面包屑导航组件，动态绑定标题 -->
		<bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
		<!-- 路由视图，用于显示当前路由对应的组件 -->
		<router-view class="router-view"></router-view>
	</el-main>
</template>

<script>
	import menu from "@/utils/menu"; // 导入菜单工具模块

	export default {
		data() {
			return {
				menuList: [], // 存储菜单列表数据
				role: "", // 当前用户角色
				currentIndex: -2, // 当前选中菜单的索引
				itemMenu: [], // 当前菜单项的子菜单数据
				title: '' // 当前面包屑导航的标题
			};
		},
		mounted() {
			let menus = menu.list(); // 获取菜单列表
			this.menuList = menus; // 将菜单列表赋值给组件数据
			this.role = this.$storage.get("role"); // 从存储中获取当前用户角色
		},
		methods: {
			// 菜单点击事件处理函数
			menuHandler(menu) {
				this.$router.push({ name: menu.tableName }); // 路由跳转到指定名称的页面
				this.title = menu.menu; // 更新面包屑导航的标题
			},
			// 菜单标题改变时的处理函数
			titleChange(index, menus) {
				this.currentIndex = index; // 更新当前选中菜单的索引
				this.itemMenu = menus; // 更新当前菜单项的子菜单数据
				console.log(menus); // 打印子菜单数据到控制台（调试用）
			},
			// 返回首页时的处理函数
			homeChange(index) {
				this.itemMenu = []; // 清空子菜单数据
				this.title = ""; // 清空面包屑导航的标题
				this.currentIndex = index; // 更新当前选中菜单的索引
				this.$router.push({ name: 'home' }); // 路由跳转到首页
			},
			// 进入个人中心时的处理函数
			centerChange(index) {
				this.itemMenu = [ // 设置个人中心的子菜单数据
					{
						"buttons": ["新增", "查看", "修改", "删除"], // 按钮权限
						"menu": "修改密码", // 子菜单名称
						"tableName": "updatePassword" // 对应的路由名称
					},
					{
						"buttons": ["新增", "查看", "修改", "删除"], // 按钮权限
						"menu": "个人信息", // 子菜单名称
						"tableName": "center" // 对应的路由名称
					}
				];
				this.title = ""; // 清空面包屑导航的标题
				this.currentIndex = index; // 更新当前选中菜单的索引
				this.$router.push({ name: 'home' }); // 路由跳转到首页
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 样式部分 */
	a {
		text-decoration: none; /* 去掉链接下划线 */
		color: #555; /* 设置链接文字颜色 */
	}

	a:hover {
		background: #00c292; /* 鼠标悬停时的背景颜色 */
	}

	.nav-list {
		width: 100%; /* 宽度占满父容器 */
		margin: 0 auto; /* 居中对齐 */
		text-align: left; /* 文本左对齐 */
		margin-top: 20px; /* 设置顶部外边距 */

		.nav-title {
			display: inline-block; /* 设置为行内块元素 */
			font-size: 15px; /* 设置字体大小 */
			color: #333; /* 设置文字颜色 */
			padding: 15px 25px; /* 设置内边距 */
			border: none; /* 去掉边框 */
		}

		.nav-title.active {
			color: #555; /* 设置激活状态的文字颜色 */
			cursor: default; /* 设置鼠标样式为默认 */
			background-color: #fff; /* 设置激活状态的背景颜色 */
		}
	}

	.nav-item {
		margin-top: 20px; /* 设置顶部外边距 */
		background: #FFFFFF; /* 设置背景颜色 */
		padding: 15px 0; /* 设置上下内边距 */

		.menu {
			padding: 15px 25px; /* 设置内边距 */
		}
	}

	.el-main {
		background-color: #F6F8FA; /* 设置主内容区域的背景颜色 */
		padding: 0 24px; /* 设置左右内边距 */
		// padding-top: 60px; /* 设置顶部内边距 */
	}

	.router-view {
		padding: 10px; /* 设置内边距 */
		margin-top: 10px; /* 设置顶部外边距 */
		background: #FFFFFF; /* 设置背景颜色 */
		box-sizing: border-box; /* 使用标准盒模型 */
	}

	.bread-crumbs {
		width: 100%; /* 宽度占满父容器 */
		// border-bottom: 1px solid #e9eef3; /* 设置底部边框 */
		// border-top: 1px solid #e9eef3; /* 设置顶部边框 */
		margin-top: 10px; /* 设置顶部外边距 */
		box-sizing: border-box; /* 使用标准盒模型 */
	}
</style>
