<template>
  <div
    :class="[
      'flat-menu',
      {
        'flat-menu--collapsed': isCollapsed
      }
    ]"
  >
    <!-- 二级及以上菜单容器 -->
    <div v-show="shouldShowSecondary" class="flat-menu__secondary-container-modal"></div>
    <!-- 一级菜单 -->
    <div class="flat-menu__primary">
      <!-- 调试信息 -->
      <div
        v-for="item in filteredMenuItems"
        :key="generateUniqueKey(item, 'primary')"
        :class="[
          'flat-menu-item',
          'flat-menu-item--primary',
          {
            'flat-menu-item--active': isActive(item),
            'flat-menu-item--hover': hoveredItem === item
          }
        ]"
        @mouseenter="handlePrimaryHover(item)"
        @mouseleave="() => handlePrimaryLeave(item)"
        @click="handlePrimaryClick(item)"
      >
        <Icon v-if="item.meta?.icon" :icon="item.meta.icon" class="flat-menu-item__icon" />
        <span v-show="!isCollapsed" class="flat-menu-item__title">{{
          getMenuTitle(item.meta)
        }}</span>
        <!-- 右箭头图标 -->
        <ElIcon v-show="!isCollapsed" v-if="hasChildren(item)" class="flat-menu-item__arrow">
          <ArrowRight />
        </ElIcon>
      </div>
    </div>
    <div
      v-show="shouldShowSecondary"
      class="flat-menu__secondary-container"
      @mouseenter="keepSecondaryVisible"
      @mouseleave="handleSecondaryContainerLeave"
    >
      <!-- 二级菜单 -->
      <div v-if="getSecondaryItems(hoveredItem).length > 0" class="flat-menu__secondary-scrollview">
        <div class="flat-menu__secondary">
          <div
            v-for="secondaryItem in getSecondaryItems(hoveredItem)"
            :key="generateUniqueKey(secondaryItem, 'secondary', hoveredItem.path)"
            :class="[
              'flat-menu-item',
              'flat-menu-item--secondary',
              {
                'flat-menu-item--active': isActive(secondaryItem),
                'flat-menu-item--hover': hoveredSecondaryItem === secondaryItem
              }
            ]"
            @mouseenter="handleSecondaryHover(secondaryItem)"
            @mouseleave="() => handleSecondaryLeave(secondaryItem)"
            @click="handleSecondaryClick(secondaryItem)"
          >
            <div v-if="secondaryItem.meta?.icon" class="flat-menu-item__icon-wrapper">
              <Icon :icon="secondaryItem.meta.icon" class="flat-menu-item__icon" />
            </div>
            <span class="flat-menu-item__title">{{ getMenuTitle(secondaryItem.meta) }}</span>
            <!-- 右箭头图标 -->
            <ElIcon v-if="hasChildren(secondaryItem)" class="flat-menu-item__arrow">
              <ArrowRight />
            </ElIcon>
          </div>
        </div>
      </div>

      <!-- 三级菜单容器 -->
      <div
        v-if="hoveredSecondaryItem && hasChildren(hoveredSecondaryItem)"
        class="flat-menu__tertiary-container"
        @mouseenter="keepTertiaryVisible"
        @mouseleave="handleTertiaryContainerLeave"
      >
        <!-- 三级菜单 -->
        <div v-if="getTertiaryItems(hoveredSecondaryItem).length > 0" class="flat-menu__tertiary">
          <!-- 父级菜单标题 -->
          <div class="flat-menu__tertiary-parent-title">
            {{ getMenuTitle(hoveredSecondaryItem?.meta) }}
          </div>
          <div class="flat-menu__tertiary-scrollview">
            <div
              v-for="tertiaryItem in getTertiaryItems(hoveredSecondaryItem)"
              :key="generateUniqueKey(tertiaryItem, 'tertiary', hoveredSecondaryItem.path)"
              @mouseenter="handleTertiaryHover(tertiaryItem)"
              @mouseleave="() => handleTertiaryLeave(tertiaryItem)"
              :style="{ display: hasChildren(tertiaryItem) ? 'block' : 'inline-block' }"
            >
              <!-- 有子菜单的三级菜单项保持原有布局 -->
              <div v-if="hasChildren(tertiaryItem)" class="flat-menu__tertiary-group">
                <div
                  :class="[
                    'flat-menu-item',
                    'flat-menu-item--tertiary',
                    'noLF_padding',
                    {
                      'flat-menu-item--active': isActive(tertiaryItem),
                      'flat-menu-item--hover': hoveredTertiaryItem === tertiaryItem
                    }
                  ]"
                >
                  <Icon
                    v-if="tertiaryItem.meta?.icon"
                    :icon="tertiaryItem.meta.icon"
                    class="flat-menu-item__icon"
                  />
                  <span class="flat-menu-item__title" style="font-size: 13px">
                    {{ getMenuTitle(tertiaryItem.meta) }}
                  </span>
                </div>

                <!-- 四级菜单项 -->
                <div class="flat-menu__quaternary-merged">
                  <div class="flat-menu__quaternary-merged-items">
                    <div
                      v-for="quaternaryItem in getQuaternaryItems(tertiaryItem)"
                      :key="generateUniqueKey(quaternaryItem, 'quaternary', tertiaryItem.path)"
                      :class="[
                        'flat-menu-item',
                        'flat-menu-item--quaternary-merged',
                        {
                          'flat-menu-item--active': isActive(quaternaryItem),
                          'flat-menu-item--hover': hoveredQuaternaryItem === quaternaryItem
                        }
                      ]"
                      @mouseenter="handleQuaternaryHover(quaternaryItem)"
                      @mouseleave="() => handleQuaternaryLeave(quaternaryItem)"
                      @click="handleMenuClick(quaternaryItem)"
                    >
                      <!-- 小圆点 -->
                      <span class="flat-menu-item__dot"></span>
                      <span class="flat-menu-item__title">{{
                        getMenuTitle(quaternaryItem.meta)
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 无子菜单的三级菜单项 - 改为inline-block样式，可直接点击跳转 -->
              <div
                v-else
                :class="[
                  'flat-menu-item',
                  'flat-menu-item--tertiary-inline',
                  {
                    'flat-menu-item--active': isActive(tertiaryItem),
                    'flat-menu-item--hover': hoveredTertiaryItem === tertiaryItem
                  }
                ]"
                @mouseenter="() => handleTertiaryHover(tertiaryItem)"
                @mouseleave="() => handleTertiaryLeave(tertiaryItem)"
                @click="handleMenuClick(tertiaryItem)"
              >
                <Icon
                  v-if="tertiaryItem.meta?.icon"
                  :icon="tertiaryItem.meta.icon"
                  class="flat-menu-item__icon"
                />
                <span class="flat-menu-item__title" style="font-size: 13px">
                  {{ getMenuTitle(tertiaryItem.meta) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ElIcon } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import Icon from '@/components/Icon/src/Icon.vue'
import { useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
import { useAppStore } from '@/store/modules/app'
import { useI18n } from '@/hooks/web/useI18n'
import { isUrl } from '@/utils/is'
import { getAccessToken } from '@/utils/auth'
import { pathResolve } from '@/utils/routerHelper'
import type { AppRouteRecordRaw } from '@/types'

interface Props {
  menuSelect?: (index: string) => void
}

const props = withDefaults(defineProps<Props>(), {
  menuSelect: undefined
})

const router = useRouter()
const permissionStore = usePermissionStore()
const { t } = useI18n()
const appStore = useAppStore()

// 获取菜单标题，支持国际化
const getMenuTitle = (meta?: any): string => {
  if (!meta) return 'Please set title'
  const title = meta.title || 'Please set title'
  return t(title as string)
}

// 响应式状态
const isCollapsed = computed(() => appStore.getCollapse)
const activeMenu = computed(() => {
  const { meta, path } = router.currentRoute.value
  if (meta?.activeMenu) {
    return meta.activeMenu as string
  }
  return path
})

// 菜单数据
// 处理菜单数据，将meta为空对象或没有meta但有children的菜单项的children提升为一级菜单
const processedMenuItems = computed(() => {
  const routers = permissionStore.getRouters
  const result: AppRouteRecordRaw[] = []

  routers.forEach((item) => {
    const hasValidMeta = item.meta && Object.keys(item.meta).length > 0

    if (!hasValidMeta && item.children && item.children.length > 0) {
      // meta为空对象或没有meta但有children，将children提升为一级菜单
      item.children.forEach((child) => {
        // 拼接完整路径
        const fullPath = item.path ? `${item.path}/${child.path}` : child.path
        result.push({
          ...child,
          path: fullPath,
          children: child.children // 保持原有的子菜单结构
        })
      })
    } else if (!item.meta?.hidden) {
      // 正常情况的菜单项（有有效meta或没有children）
      result.push(item)
    }
  })

  return result
})

// 过滤后的菜单项（只显示一级菜单）
const filteredMenuItems = computed(() => {
  const items = processedMenuItems.value.map((item) => ({
    ...item,
    children: item.children || []
  }))
  // 调试信息
  console.log('Filtered Menu Items:', items)
  return items
})

// 二级菜单显示条件
const shouldShowSecondary = computed(() => {
  const show = hoveredItem.value && hasChildren(hoveredItem.value)
  return show
})

// 悬停状态
const hoveredItem = ref<AppRouteRecordRaw | null>(null)
const hoveredSecondaryItem = ref<AppRouteRecordRaw | null>(null)
const hoveredTertiaryItem = ref<AppRouteRecordRaw | null>(null)
const hoveredQuaternaryItem = ref<AppRouteRecordRaw | null>(null)

// 鼠标离开的定时器
let leaveTimer: NodeJS.Timeout | null = null
let secondaryLeaveTimer: NodeJS.Timeout | null = null
let tertiaryLeaveTimer: NodeJS.Timeout | null = null

// 清除定时器
const clearLeaveTimer = () => {
  if (leaveTimer) {
    clearTimeout(leaveTimer)
    leaveTimer = null
  }
}

const clearSecondaryLeaveTimer = () => {
  if (secondaryLeaveTimer) {
    clearTimeout(secondaryLeaveTimer)
    secondaryLeaveTimer = null
  }
}

const clearTertiaryLeaveTimer = () => {
  if (tertiaryLeaveTimer) {
    clearTimeout(tertiaryLeaveTimer)
    tertiaryLeaveTimer = null
  }
}

let quaternaryLeaveTimer: NodeJS.Timeout | null = null

const clearQuaternaryLeaveTimer = () => {
  if (quaternaryLeaveTimer) {
    clearTimeout(quaternaryLeaveTimer)
    quaternaryLeaveTimer = null
  }
}

// 清除所有定时器
const clearAllTimers = () => {
  clearLeaveTimer()
  clearSecondaryLeaveTimer()
  clearTertiaryLeaveTimer()
  clearQuaternaryLeaveTimer()
}

// 判断是否有子菜单
const hasChildren = (item: AppRouteRecordRaw | null) => {
  if (!item) return false
  return item.children && item.children.length > 0
}

// 生成唯一的 key
const generateUniqueKey = (item: AppRouteRecordRaw, level: string, parentPath?: string) => {
  const itemKey = item.path || item.meta?.title || 'unknown'
  const parentKey = parentPath || 'root'
  return `${level}-${itemKey}-${parentKey}` // 移除随机数部分
}

// 获取二级菜单项
const getSecondaryItems = (primaryItem: AppRouteRecordRaw | null) => {
  if (!primaryItem || !hasChildren(primaryItem)) return []
  const items = (primaryItem.children || []).filter((item) => !item.meta?.hidden)
  // 调试信息
  console.log('Get Secondary Items:', {
    parentTitle: primaryItem.meta?.title,
    hasChildren: hasChildren(primaryItem),
    children: primaryItem.children,
    filteredItems: items,
    itemsCount: items.length
  })
  return items
}

// 获取三级菜单项
const getTertiaryItems = (secondaryItem: AppRouteRecordRaw | null) => {
  if (!secondaryItem || !hasChildren(secondaryItem)) return []
  return (secondaryItem.children || []).filter((item) => !item.meta?.hidden)
}

// 获取四级及以下菜单项
const getQuaternaryItems = (tertiaryItem: AppRouteRecordRaw | null) => {
  if (!tertiaryItem || !hasChildren(tertiaryItem)) return []
  return (tertiaryItem.children || []).filter((item) => !item.meta?.hidden)
}

// 检查路径是否匹配或为子路径
const isPathActive = (itemPath: string, currentPath: string): boolean => {
  // 如果是URL，直接比较
  if (isUrl(itemPath)) {
    return itemPath === currentPath
  }

  // 标准化路径
  const normalizedItemPath = pathResolve('/', itemPath)
  const normalizedCurrentPath = pathResolve('/', currentPath)

  // 完全匹配
  if (normalizedItemPath === normalizedCurrentPath) {
    return true
  }

  // 检查是否为父路径（当前路径以item路径开头，且后面有内容或斜杠）
  if (normalizedCurrentPath.startsWith(normalizedItemPath)) {
    const remainingPath = normalizedCurrentPath.slice(normalizedItemPath.length)
    // 确保是真正的父子关系（要么没有剩余路径，要么剩余路径以/开头）
    return !remainingPath || remainingPath.startsWith('/')
  }

  return false
}

// 判断是否为激活状态
const isActive = (item: AppRouteRecordRaw) => {
  const currentPath = activeMenu.value

  // 检查当前项是否激活
  if (isPathActive(item.path, currentPath)) {
    return true
  }

  // 检查子菜单是否激活（用于处理提升的children情况）
  if (item.children && item.children.length > 0) {
    return item.children.some((child) => {
      const childPath = item.path ? `${item.path}/${child.path}` : child.path
      return isPathActive(childPath, currentPath)
    })
  }

  return false
}

// 一级菜单悬停
const handlePrimaryHover = (item: AppRouteRecordRaw) => {
  clearAllTimers()
  hoveredItem.value = item
  hoveredSecondaryItem.value = null
  hoveredTertiaryItem.value = null
  hoveredQuaternaryItem.value = null

  // 调试信息
  console.log('Primary Hover:', {
    title: item.meta?.title,
    path: item.path,
    hasChildren: hasChildren(item),
    children: item.children,
    hoveredItem: hoveredItem.value?.meta?.title
  })
  console.log(
    'hoveredItem',
    hoveredItem.value,
    hasChildren(hoveredItem.value),
    getSecondaryItems(hoveredItem.value).length
  )

  // 强制触发Vue的响应式更新
  nextTick(() => {
    console.log('NextTick - hoveredItem:', hoveredItem.value?.meta?.title)
    console.log('NextTick - 条件检查:', hoveredItem.value && hasChildren(hoveredItem.value))
  })
}

// 一级菜单离开
const handlePrimaryLeave = (item: AppRouteRecordRaw) => {
  clearLeaveTimer()
  leaveTimer = setTimeout(() => {
    if (hoveredItem.value === item) {
      hoveredItem.value = null
      hoveredSecondaryItem.value = null
      hoveredTertiaryItem.value = null
      hoveredQuaternaryItem.value = null
    }
  }, 300) // 300ms延迟，给用户时间移动到子菜单
}

// 保持二级菜单可见
const keepSecondaryVisible = () => {
  clearLeaveTimer()
  clearSecondaryLeaveTimer()
}

// 二级菜单悬停
const handleSecondaryHover = (item: AppRouteRecordRaw) => {
  clearSecondaryLeaveTimer()
  hoveredSecondaryItem.value = item
  hoveredTertiaryItem.value = null
  hoveredQuaternaryItem.value = null
}

// 二级菜单离开
const handleSecondaryLeave = (item: AppRouteRecordRaw) => {
  clearSecondaryLeaveTimer()
  secondaryLeaveTimer = setTimeout(() => {
    if (hoveredSecondaryItem.value === item) {
      hoveredSecondaryItem.value = null
      hoveredTertiaryItem.value = null
      hoveredQuaternaryItem.value = null
    }
  }, 300)
}

// 保持三级菜单可见
const keepTertiaryVisible = () => {
  clearSecondaryLeaveTimer()
  clearTertiaryLeaveTimer()
}

// 三级菜单悬停
const handleTertiaryHover = (item: AppRouteRecordRaw) => {
  clearTertiaryLeaveTimer()
  hoveredTertiaryItem.value = item
  // 不再需要清除hoveredQuaternaryItem，因为四级菜单现在在三级容器内显示
}

// 三级菜单离开
const handleTertiaryLeave = (item: AppRouteRecordRaw) => {
  clearTertiaryLeaveTimer()
  tertiaryLeaveTimer = setTimeout(() => {
    if (hoveredTertiaryItem.value === item) {
      hoveredTertiaryItem.value = null
      hoveredQuaternaryItem.value = null
    }
  }, 300)
}

// 四级菜单悬停
const handleQuaternaryHover = (item: AppRouteRecordRaw) => {
  clearQuaternaryLeaveTimer()
  hoveredQuaternaryItem.value = item
}

// 四级菜单离开
const handleQuaternaryLeave = (item: AppRouteRecordRaw) => {
  clearQuaternaryLeaveTimer()
  quaternaryLeaveTimer = setTimeout(() => {
    if (hoveredQuaternaryItem.value === item) {
      hoveredQuaternaryItem.value = null
    }
  }, 300)
}

// 二级菜单容器离开
const handleSecondaryContainerLeave = () => {
  clearSecondaryLeaveTimer()
  secondaryLeaveTimer = setTimeout(() => {
    hoveredItem.value = null
    hoveredSecondaryItem.value = null
    hoveredTertiaryItem.value = null
    hoveredQuaternaryItem.value = null
  }, 100)
}

// 三级菜单容器离开
const handleTertiaryContainerLeave = () => {
  clearTertiaryLeaveTimer()
  tertiaryLeaveTimer = setTimeout(() => {
    hoveredSecondaryItem.value = null
    hoveredTertiaryItem.value = null
    hoveredQuaternaryItem.value = null
  }, 100)
}

// 构建完整路由路径
const buildFullPath = (item: AppRouteRecordRaw, parentPath?: string): string => {
  if (isUrl(item.path)) {
    return item.path
  }

  // 如果已有父级路径，拼接路径
  if (parentPath && parentPath !== '/') {
    return `${parentPath}/${item.path.replace(/^\//, '')}`
  }

  return item.path
}

// 菜单点击处理
const handleMenuClick = (item: AppRouteRecordRaw, originalLevel?: string) => {
  console.log('---------当前点击的菜单---------', item)
  let fullPath = item.path

  // 根据不同的菜单级别构建完整路径
  if (hoveredQuaternaryItem.value === item) {
    // 四级菜单，根据传入的原始级别判断路径构建方式
    const parentPath = hoveredSecondaryItem.value?.path
    const grandPath = hoveredItem.value?.path
    const tertiaryPath = hoveredTertiaryItem.value?.path

    if (originalLevel === 'tertiary') {
      // 无子级的三级被当作四级处理，路径为：1级/2级/本身
      if (parentPath && grandPath) {
        fullPath = buildFullPath(item, `${grandPath}/${parentPath}`)
      } else if (parentPath) {
        fullPath = buildFullPath(item, parentPath)
      }
    } else {
      // 真正的四级菜单，路径为：1级/2级/3级/本身
      if (parentPath && grandPath && tertiaryPath) {
        fullPath = buildFullPath(item, `${grandPath}/${parentPath}/${tertiaryPath}`)
      } else if (parentPath && grandPath) {
        fullPath = buildFullPath(item, `${grandPath}/${parentPath}`)
      } else if (parentPath) {
        fullPath = buildFullPath(item, parentPath)
      }
    }
  } else if (hoveredTertiaryItem.value === item) {
    // 三级菜单，需要拼接一级和二级路径
    const parentPath = hoveredSecondaryItem.value?.path
    const grandPath = hoveredItem.value?.path
    if (parentPath && grandPath) {
      fullPath = buildFullPath(item, `${grandPath}/${parentPath}`)
    } else if (parentPath) {
      fullPath = buildFullPath(item, parentPath)
    }
  } else if (hoveredSecondaryItem.value === item) {
    // 二级菜单，需要拼接一级路径
    const parentPath = hoveredItem.value?.path
    if (parentPath) {
      fullPath = buildFullPath(item, parentPath)
    }
  }

  if (props.menuSelect) {
    props.menuSelect(fullPath)
  }

  // 自定义事件
  if (isUrl(fullPath)) {
    const a = fullPath.replace('_TOKEN_', getAccessToken())
    window.open(a)
  } else {
    router.push(fullPath)
  }

  // 点击后清除所有悬停状态
  clearAllTimers()
  hoveredItem.value = null
  hoveredSecondaryItem.value = null
  hoveredTertiaryItem.value = null
  hoveredQuaternaryItem.value = null
}

// 一级菜单点击处理
const handlePrimaryClick = (item: AppRouteRecordRaw) => {
  if (hasChildren(item)) {
    // 有子菜单时执行悬停操作，不跳转路由
    handlePrimaryHover(item)
  } else {
    // 无子菜单时执行路由跳转
    handleMenuClick(item)
  }
}

// 二级菜单点击处理
const handleSecondaryClick = (item: AppRouteRecordRaw) => {
  if (hasChildren(item)) {
    // 有子菜单时执行悬停操作，不跳转路由
    handleSecondaryHover(item)
  } else {
    // 无子菜单时执行路由跳转
    handleMenuClick(item)
  }
}

// 三级菜单点击处理
const handleTertiaryClick = (item: AppRouteRecordRaw) => {
  // 三级菜单直接执行路由跳转（因为四级菜单是直接展开的）
  handleMenuClick(item)
}

// 组件卸载时清理定时器
onUnmounted(() => {
  clearAllTimers()
})

// 鼠标离开整个菜单区域
onMounted(() => {
  const menuElement = document.querySelector('.flat-menu')
  if (menuElement) {
    menuElement.addEventListener('mouseleave', () => {
      clearAllTimers()
      hoveredItem.value = null
      hoveredSecondaryItem.value = null
      hoveredTertiaryItem.value = null
      hoveredQuaternaryItem.value = null
    })
  }
})
</script>

<style lang="scss" scoped>
.flat-menu {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  top: -50px;
  padding-top: 47px;
  background-color: transparent; /* 主容器使用透明背景，让一级菜单容器显示配置的颜色 */
  overflow: visible; // 确保子元素可以溢出显示
  z-index: 1999; // 提高基础z-index确保菜单层级高
  transform: translateZ(0); // 强制硬件加速
  border-top: 2px solid var(--left-menu-bg-color);
  &__primary {
    width: 200px; /* 直接使用固定值而不是CSS变量 */
    min-width: 64px;
    background-color: var(--left-menu-bg-color); /* 使用配置的颜色变量 */
    overflow-y: auto;
    overflow-x: visible; // 确保横向子菜单可以显示
    flex-shrink: 0;
    position: relative; // 为绝对定位的子元素提供定位上下文
    transition: width 0.3s ease; // 添加宽度过渡动画

    // 隐藏滚动条但保持滚动功能
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  &__secondary-container {
    position: absolute;
    top: 0;
    left: 199px;
    width: 200px;
    padding-top: 16px;
    height: 100vh; /* 占满整个屏幕高度 */
    background-color: var(--left-menu-bg-light-color);
    border: none; /* 移除边框 */
    box-shadow: none; /* 移除阴影 */
    z-index: 9999; /* 提高z-index确保在tab栏之上 */
    transition: left 0.3s ease; // 添加位置过渡动画
    overflow: visible; /* 允许三级菜单显示 */
  }

  &__tertiary-container {
    position: absolute;
    top: 0;
    left: 200px; /* 展开时从二级菜单右边缘开始 */
    width: 200px;
    height: 100vh; /* 占满整个屏幕高度 */
    background-color: var(--left-menu-bg-color); /* 背景色保持不透明 */
    border: none; /* 移除边框 */
    box-shadow: none; /* 移除阴影 */
    z-index: 10000; /* 确保在二级菜单之上 */
    transition: left 0.3s ease; // 添加位置过渡动画
    padding: 0 10px;
    overflow-y: auto; /* 添加Y轴滚动功能 */

    /* 隐藏滚动条但保留滚动功能 */
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    // 使用伪元素显示半透明背景图
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('@/assets/imgs/menuBg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.1; /* 背景图50%透明度 */
      z-index: -1; /* 确保背景图在内容下方 */
    }
  }

  &__secondary-scrollview {
    height: 100vh; /* 占满容器高度 */
    overflow-y: auto; /* 添加Y轴滚动功能 */

    /* 隐藏滚动条但保留滚动功能 */
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  &__secondary,
  &__tertiary {
    padding: 8px 0;
  }
  &__secondary {
    .flat-menu-item {
      padding: 12px;
    }
  }
  &__quaternary {
    &-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--left-menu-text-color);
      margin-bottom: 8px;
    }

    &-items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
  }

  &__quaternary-merged {
    &-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--left-menu-text-color);
      margin-bottom: 8px;
    }

    &-items {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
    }
  }

  &__tertiary-parent-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--left-menu-text-color);
    padding: 16px;
    padding-top: 32px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--left-menu-bg-light-color);
    z-index: 1;
  }

  &__tertiary-item {
    margin-bottom: 2px;
  }

  &__tertiary-group {
    margin-bottom: 8px;
    width: 100%; /* 确保有子菜单的三级菜单项占满宽度 */
    flex-shrink: 0; /* 防止在flex布局中收缩 */
  }

  .flat-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
    border-radius: 4px;
    position: relative;
    text-decoration: none;
    color: var(--left-menu-text-color);
    &__icon-wrapper {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      flex-shrink: 0;
      background-color: color-mix(
        in srgb,
        var(--left-menu-bg-light-color) 95%,
        white
      ); // 背景色浅一点
      border-radius: 4px;
      transition: background-color 0.2s ease;

      .flat-menu-item--secondary:hover & {
        background-color: var(--el-color-primary); // hover时改为主题色
      }
    }

    &__icon {
      font-size: 16px;
      color: var(--left-menu-text-color);
      transition: color 0.2s ease;

      .flat-menu-item--secondary:hover & {
        color: color-mix(
          in srgb,
          var(--left-menu-text-color) 75%,
          black
        ); // hover时和配置文字颜色一样但浓郁一点
      }
    }

    &__title {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    &__dot {
      width: 4px;
      height: 4px;
      background-color: var(--left-menu-text-color);
      border-radius: 50%;
      margin-right: 8px;
      flex-shrink: 0;
      display: inline-block;
    }

    &__arrow {
      margin-left: auto;
      font-size: 12px;
      color: var(--left-menu-text-color);
      flex-shrink: 0;
    }

    // 一级菜单样式
    &--primary {
      height: 40px;
      margin-bottom: 4px;
      background-color: transparent; // 使用透明背景
      .flat-menu-item__icon {
        margin-right: 10px;
      }
      &:hover {
        background-color: color-mix(in srgb, var(--left-menu-bg-color) 95%, white); // 配置色浅80%
        color: var(--el-color-primary);

        .flat-menu-item__icon,
        .flat-menu-item__arrow {
          color: var(--el-color-primary);
        }
      }

      &.flat-menu-item--active {
        background-color: var(--left-menu-bg-light-color);
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background-color: var(--el-color-primary);
        }
      }
    }

    // 二级菜单样式
    &--secondary {
      height: 48px;
      margin: 2px 0px;
      background-color: transparent; // 使用透明背景
      &:hover {
        color: var(--el-color-primary);

        .flat-menu-item__arrow {
          color: var(--el-color-primary);
        }
        // 移除 .flat-menu-item__icon 的颜色设置，让它使用单独的样式
        .flat-menu-item__icon-wrapper {
          background-color: var(--el-color-primary);
        }
      }

      &.flat-menu-item--active {
        color: var(--left-menu-text-active-color);
      }
    }

    // 三级菜单样式
    &--tertiary {
      height: 44px;
      margin: 2px 8px;
      font-weight: 600; /* 三级菜单名字加粗 */
      background-color: transparent; // 使用透明背景
      .flat-menu-item__icon {
        margin-right: 8px;
      }
      &.flat-menu-item--active {
        color: var(--left-menu-text-active-color);
      }
    }

    // 三级菜单inline样式（无子级时使用）
    &--tertiary-inline {
      display: flex;
      align-items: center;
      height: 36px;
      margin: 0 25px 2px 8px;
      padding: 8px 0px;
      font-weight: 600;
      background-color: transparent;
      border-radius: 4px;
      cursor: pointer;
      width: 160px;
      transition:
        background-color 0.2s ease,
        color 0.2s ease;
      .flat-menu-item__icon {
        margin-right: 8px;
        font-size: 16px;
      }
      .flat-menu-item__title {
        font-size: 13px;
        white-space: nowrap;
      }
      &:hover {
        color: var(--el-color-primary);
        .flat-menu-item__icon {
          color: var(--el-color-primary);
        }
      }
      &.flat-menu-item--active {
        color: var(--left-menu-text-active-color);
        .flat-menu-item__icon {
          color: var(--el-color-primary);
        }
      }
    }

    // 四级菜单样式（原有样式保持）
    &--quaternary {
      height: auto;
      min-width: 80px;
      padding: 8px 12px;
      margin: 0;
      background-color: transparent; /* 使用透明背景，让容器背景色显示 */
      border-radius: 4px;
      font-size: 13px;
      &:hover {
        color: var(--el-color-primary);

        .flat-menu-item__icon {
          color: var(--el-color-primary);
        }
      }

      &.flat-menu-item--active {
        color: var(--left-menu-text-active-color);
      }
    }

    // 合并后的四级菜单样式
    &--quaternary-merged {
      height: 36px;
      padding: 8px 16px;
      margin: 0 8px 2px 8px;
      background-color: transparent;
      border-radius: 4px;
      font-size: 13px;
      color: var(--left-menu-text-color);
      display: flex;
      align-items: center;

      &:hover {
        color: var(--el-color-primary);

        .flat-menu-item__dot {
          background-color: var(--el-color-primary);
        }
      }

      &.flat-menu-item--active {
        color: var(--left-menu-text-active-color);
      }
    }
  }

  // 折叠状态
  &--collapsed {
    .flat-menu__primary {
      width: 64px; /* 折叠时只显示图标宽度 */
    }

    .flat-menu__secondary-container {
      left: 64px; /* 折叠时二级菜单从64px位置开始 */
    }
  }

  // 确保非折叠状态下二级菜单可见
  &:not(.flat-menu--collapsed) {
    .flat-menu__secondary-container {
      display: block;
    }
  }
}
.flat-menu__secondary-container-modal {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 64px; /* 默认折叠状态下的宽度 */
  z-index: 9998; /* 确保在二级菜单容器下方 */
}

// 展开状态下调整遮罩的left值
.flat-menu:not(.flat-menu--collapsed) .flat-menu__secondary-container-modal {
  left: 200px; /* 展开状态下的一级菜单宽度 */
}
.noLF_padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.flat-menu__tertiary-scrollview {
  height: calc(100vh - 75px);
  overflow-y: auto;
  padding-top: 8px; /* 为inline-block元素提供上边距 */

  /* 隐藏滚动条但保留滚动功能 */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
