<template>
  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"
        :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"
        mode="vertical" :class="sideTheme">
        <sidebar-item v-for="(route, index) in menuShowData" :key="route.id || route.path + index" :item="route"
          :base-path="route.path" />
        <!-- <div v-for="(route, index) in processedRouters">{{ route.path }}</div> -->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import { computed } from 'vue'

const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
// 转换接口数据为组件需要的格式
const processedRouters = computed(() => {
  return permissionStore.sidebarRouters
})

// 菜单类型获取
const navType = computed(() => {
  const navStatus = appStore.navStatus
  const type = navStatus.type === 'project' ? '2' : '1'
  return type
})

// 菜单显示数据
const menuShowData = computed(() => {
  const list = processedRouters.value.filter(item => {
    if (navType.value === '1') {
      if (navType.value === item.type || !item.type) {
        return true
      } else {
        return false
      }
    } else {
      if (navType.value === item.type) {
        return true
      } else {
        return false
      }
    }
  })
  return list
})

const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)

// 获取菜单背景色
const getMenuBackground = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-bg)'
  }
  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
})

// 获取菜单文字颜色
const getMenuTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-text)'
  }
  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
})

const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
</script>

<style lang="scss" scoped>
/* 保持原有样式不变 */
</style>