<template>
	<el-menu router :default-active="$route.path" :collapse="false" unique-opened background-color="#304156"
		text-color="#bfcbd9" active-text-color="#409EFF">
		<!-- 一级菜单 -->
		<el-sub-menu v-for="item in filteredMenuData" :key="item.path" :index="item.path">
			<template #title>
				<el-icon>
					<component :is="item.icon" />
				</el-icon>
				<span>{{ item.title }}</span>
			</template>

			<!--  二级菜单 -->
			<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
				{{ child.title }}
			</el-menu-item>
		</el-sub-menu>
	</el-menu>
</template>

<script setup lang="ts">
import { shallowRef, computed, onMounted, watch } from 'vue'
import { Document as DocIcon, Setting, User, Message, ShoppingCart, Shop, Connection, Notebook, Box, TrendCharts, HomeFilled, Monitor } from '@element-plus/icons-vue'
import { hasPermission, getUserPermissions } from '@/utils/permission'

const menuData = shallowRef([
	{
		title: '系统管理',
		path: '/system',
		icon: Setting,
		children: [
			{
				title: '配置列表',
				path: '/SettledConfig/list',
				permission: 'settled:config:list'
			},
			{
				title: '会员开通记录',
				path: '/SettledConfig/memberRecord',
				permission: 'settled:member:record'
			},
			{
				title: '用户列表',
				path: '/user/list',
				permission: 'user:list:view'
			},
			{
				title: '角色管理',
				path: '/user/role',
				permission: 'user:role:manage'
			},
			{
				title: '权限管理',
				path: '/user/permission',
				permission: 'user:permission:manage'
			},
			{
				title: '邀请列表',
				path: '/invitation/list',
				permission: 'invitation:list:view'
			},
			{
				title: '运行日志',
				path: '/log/runningLog/list',
				permission: 'log:running:view'
			}
		]
	},
	{
		title: '店铺管理',
		path: '/shop',
		icon: Shop,
		children: [
			{
				title: '店铺列表',
				path: '/shop/list',
				permission: 'shop:list:view'
			},
			{
				title: '价格模板',
				path: '/shop/priceTemplate'
			},
			{
				title: '发布商品数据',
				path: '/shop/shopPublishedData'
			},,
			{
				title: '店铺商品',
				path: '/shop/pddGoods'
			}
		]
	},
	{
		title: '书品管理',
		path: '/book',
		icon: Notebook,
		children: [
			{
				title: '选品中心',
				path: '/book/selection/center',
				permission: 'book:selection:view'
			},
			{
				title: '自营书品',
				path: '/book/shopGoods',
				// permission: 'book:shopGoods:view'
			},
			{
				title: '书品中心',
				path: '/book/shopGoodsAll',
				// permission: 'book:shopGoodsAll:view'
			},
			{
				title: '过滤设置',
				path: '/book/filterSet',
				// permission: 'book:filterSet:view'
			},
			{
				title: '已发布书品管理',
				path: '/book/shopGoodsPublished'
				// permission: 'book:shopGoodsPublished:view'
			},
			{
				title: '书品导入任务列表',
				path: '/book/excelTask'
			}
		]
	},
	{
		title: '仓储管理',
		path: '/warehouse',
		icon: Box,
		children: [
			{
				title: '货区管理',
				path: '/warehouse/depot/list',
				permission: 'warehouse:depot:view'
			},
			{
				title: '物流模板',
				path: '/warehouse/logistics'
			},
			{
				title: '快递打单账号管理',
				path: '/account/management'
			},
			{
				title: '仓库订单信息',
				path: '/depotOrder/information'
			}
		]
	},
	{
		title: '订单中心',
		path: '/order',
		icon: Box,
		children: [
			{
				title: '订单信息',
				path: '/order/shopOrder'
				// 移除权限要求，让所有用户都能看到
			}
		]
	},
	{
		title: '工具管理',
		path: '/tools',
		icon: DocIcon,
		children: [
			{
				title: '卡密列表',
				path: '/tools/cards/list',
				permission: 'cards:list:view'
			},
			{
				title: '活跃卡密列表',
				path: '/tools/cards/activeCardsList',
				permission: 'cards:active:view'
			}
		]
	},
	{
		title: '审核管理',
		path: '/examine',
		children: [
			{
				title: '违规列表',
				path: '/examine/violation/list'
			},
			{
				title: '图书审核管理',
				path: '/bookAudit'
			}
		]
	},
	{
		title: '任务管理',
		path: '/task',
		icon: TrendCharts,
		children: [
			{
				title: '任务列表',
				path: '/task/list',
				permission: 'task:list:view'
			}
		]
	},
	{
		title: '功能模块',
		path: '/useModule',
		children: [
			{
				title: '服务列表',
				path: '/useModule/vas/list',
				permission: 'vas:list:view'
			}
		]
	},
	{
		title: '钱包',
		path: '/purse',
		icon: TrendCharts,
		children: [
			{
				title: '用户充值',
				path: '/purse/userRecharge',
				// permission: 'purse:userRecharge:view'
			}
		]
	},
	{
		title: '申请入驻',
		path: '/audit',
		children: [
			{
				title: '审核',
				path: '/audit/audit',
			}
		]
	},
	{
		title: '升级完整版',
		path: '/NewUser',
		children: [
			{
				title: '升级完整版',
				path: '/NewUser'
			}
		]
	},
	{
		title: '监控中心',
		path: '/monitor',
		icon: Monitor,
		children: [
			{
				title: '监控大屏',
				path: '/monitor/dashboard',
				permission: 'monitor:dashboard:view'
			}
		]
	}
])

// 过滤菜单数据，只显示有权限的菜单项
const filteredMenuData = computed(() => {
	const permissions = getUserPermissions()
	console.log('当前用户权限:', permissions)

	return menuData.value.map(menu => {
		// 过滤子菜单
		const filteredChildren = menu.children.filter(child => {
			// 如果子菜单有权限要求，检查权限
			if (child.permission) {
				const hasAuth = hasPermission(child.permission)
				console.log(`菜单权限检查: ${child.title} (${child.permission}) = ${hasAuth}`)
				return hasAuth
			}
			// 没有权限要求的菜单项默认显示
			return true
		})

		// 返回新的菜单对象，避免修改原始数据
		return {
			...menu,
			children: filteredChildren
		}
	}).filter(menu => {
		// 只显示有子菜单的父菜单
		return menu.children.length > 0
	})
})

// 监听权限变化
watch(() => getUserPermissions(), (newPermissions) => {
	console.log('权限数据更新:', newPermissions)
}, { deep: true })
</script>

<style scoped>
.el-menu {
	height: 100%;
	border-right: none;
}

.el-menu-item.is-active {
	background-color: #263445 !important;
}

:deep(.el-menu) {
	border-right: none;
}

:deep(.el-sub-menu.is-opened) {

	>.el-sub-menu__title,
	.el-menu-item {
		background-color: #1a1a1a !important;
	}
}

:deep(.el-menu-item):hover,
:deep(.el-sub-menu__title):hover {
	background-color: #1a1a1a !important;
}

:deep(.el-menu-item.is-active) {
	background-color: #1a1a1a !important;
	color: var(--el-menu-active-color);
}

:deep(.el-menu-item.is-active + .el-sub-menu .el-sub-menu__title),
:deep(.el-menu-item.is-active)~.el-sub-menu .el-sub-menu__title {
	background-color: #1a1a1a !important;
}

:deep(.el-sub-menu) {
	&.is-active {
		>.el-sub-menu__title {
			background-color: #1a1a1a !important;
		}
	}
}
</style>
