<template>
  <a-menu
    :default-selected-keys="[currentRoute]"
    :default-open-keys="openKeys"
    mode="inline"
    theme="dark"
    :inline-collapsed="collapsed"
    @click="handleMenuClick"
    @openChange="handleOpenChange"
  >
    <template v-for="item in menuItems" :key="item.key">
      <a-menu-item v-if="!item.children" :key="item.key">
        <component :is="item.icon" />
        <span>{{ item.title }}</span>
      </a-menu-item>
      
      <a-sub-menu v-else :key="item.key">
        <template #title>
          <component :is="item.icon" />
          <span>{{ item.title }}</span>
        </template>
        <a-menu-item 
          v-for="child in item.children" 
          :key="child.key"
        >
          {{ child.title }}
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores'
import { getMenuItems } from '@/router/routes'
import routes from '@/router/routes'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 当前路由
const currentRoute = computed(() => route.name)

// 展开的菜单项
const openKeys = ref([])

// 菜单项
const menuItems = computed(() => {
  try {
    const userRole = userStore.getUserRoleName() || 'user'
    return getMenuItems(routes, userRole)
  } catch (error) {
    console.error('获取菜单项失败:', error)
    return []
  }
})

// 处理菜单点击
const handleMenuClick = ({ key }) => {
  try {
    const menuItem = findMenuItem(menuItems.value, key)
    if (menuItem && menuItem.path) {
      router.push(menuItem.path)
    }
  } catch (error) {
    console.error('菜单点击处理失败:', error)
  }
}

// 处理子菜单展开/收起
const handleOpenChange = (keys) => {
  openKeys.value = keys
}

// 查找菜单项
const findMenuItem = (items, key) => {
  try {
    if (!Array.isArray(items)) {
      return null
    }
    
    for (const item of items) {
      if (item && item.key === key) {
        return item
      }
      if (item && item.children) {
        const found = findMenuItem(item.children, key)
        if (found) return found
      }
    }
    return null
  } catch (error) {
    console.error('查找菜单项失败:', error)
    return null
  }
}

// 监听路由变化，自动展开对应的子菜单
watch(
  () => route.path,
  (newPath) => {
    try {
      if (!newPath) return
      
      const pathSegments = newPath.split('/').filter(Boolean)
      if (pathSegments.length > 1) {
        const parentKey = pathSegments[0]
        if (parentKey && !openKeys.value.includes(parentKey)) {
          openKeys.value = [parentKey]
        }
      }
    } catch (error) {
      console.error('路由监听处理失败:', error)
    }
  },
  { immediate: true }
)
</script>

<style scoped>
/* 完全重置菜单样式 - 确保从顶部开始 */
.ant-menu {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.ant-menu-root {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ant-menu-vertical {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ant-menu-inline {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 强制移除所有菜单容器的空白 */
.ant-menu ul {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.ant-menu li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.ant-menu li:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* 菜单项样式重置 */
.ant-menu-item {
  margin: 0 !important;
  padding: 0 16px !important;
  height: 48px !important;
  line-height: 48px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}

.ant-menu-item:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.ant-menu-submenu-title {
  margin: 0 !important;
  padding: 0 16px !important;
  height: 48px !important;
  line-height: 48px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}

/* 确保菜单项图标和文字正确对齐 */
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  margin-right: 8px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.ant-menu-item span,
.ant-menu-submenu-title span {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ant-menu::-webkit-scrollbar {
  width: 6px;
}

.ant-menu::-webkit-scrollbar-track {
  background: #001529;
}

.ant-menu::-webkit-scrollbar-thumb {
  background: #1890ff;
  border-radius: 3px;
}

.ant-menu::-webkit-scrollbar-thumb:hover {
  background: #40a9ff;
}

.ant-menu-item,
.ant-menu-submenu-title {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  margin: 0 !important;
  padding: 0 16px !important;
}

.ant-menu-item:first-child,
.ant-menu-submenu:first-child .ant-menu-submenu-title {
  margin-top: 0 !important;
}

.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  margin-right: 8px;
  font-size: 16px;
}

.ant-menu-item-selected {
  background-color: #1890ff !important;
}

.ant-menu-item-selected::after {
  display: none;
}

.ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: #1890ff;
}

.ant-menu-submenu-open > .ant-menu-submenu-title {
  color: #1890ff;
}

/* 折叠状态下的样式优化 */
.ant-menu-inline-collapsed .ant-menu-item {
  padding: 0 24px;
  text-align: center;
}

.ant-menu-inline-collapsed .ant-menu-submenu-title {
  padding: 0 24px;
  text-align: center;
}

.ant-menu-inline-collapsed .ant-menu-item .anticon,
.ant-menu-inline-collapsed .ant-menu-submenu-title .anticon {
  margin-right: 0;
}
</style>