<template>
  <el-menu v-if="permissionStore.isRoutesGenerated" 
    :default-active="route.path" 
    class="nav-menu" 
    background-color="#04285C" 
    text-color="#bfcbd9"
    active-text-color="#409EFF" 
    @select="handleSelect" 
    :collapse="isCollapse"
    unique-opened>
    <recursive-menu-item
      v-for="routeItem in menuRoutes"
      :key="routeItem.path"
      :route-item="routeItem"
      :base-path="routeItem.path"
    />
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePermissionStore } from '@/stores/permission'
import RecursiveMenuItem from './recursiveMenuItem.vue'

const route = useRoute()
const router = useRouter()
const permissionStore = usePermissionStore()

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

// 过滤出需要显示在菜单中的路由
const menuRoutes = computed(() => {
  return permissionStore.routes.filter(route => {
    return !route.meta?.hidden && (route.children?.length > 0 || route.meta?.title)
  })
})

// 菜单选择事件
const handleSelect = (index) => {
  try {
    router.push(index)
      .then(() => {
        // console.log('Navigation successful to:', index)
      })
      .catch(() => {
        // console.error('Navigation failed:', error)
        router.push('/home')
      })
  } catch (error) {
    console.error('Navigation error:', error)
  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.nav-menu {
  height: 100%;
  border-right: none;
  background: #0A397D;

  :deep(.el-menu-item) {
    &.is-active {
      background-color: #04285C;
    }
  }

  .el-menu-item,
  .el-sub-menu__title {
    &:hover {
      background-color: #103261;
    }
  }
}

.layout_menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>