<template>
  <aside class="site-sidebar">
    <!-- 侧边栏容器 -->
    <div class="menu-mod">
      <!-- 左侧菜单滚动容器 -->
      <el-scrollbar class="menu-left">
        <!-- 首页菜单项 -->
        <ul>
          <li>
            <div
              :class="{
                'menu-left-active': selectLeftId === '',  // 当没有选中左侧菜单时激活首页样式
                'menu-left-item1': 'language' === 'English', // 如果语言是英文则使用不同的样式
                'menu-left-item': 'language' !== 'English' // 如果语言不是英文则使用默认样式
              }"
              @click="toHome()"
            >
            <svg-icon
              icon-class="icon-shouye"
            style="font-size: 16px; margin-right: 3px !important"
            />
            <span style="font-size: 14px">首页</span>
    </div>
    </li>
    </ul>

    <!-- 动态生成的菜单列表 -->
    <ul>
      <template
        v-for="menu in menuList"
      :key="menu.menuId"
      >
      <li
        v-if="!menu.hidden"
      :class="{ 'menu-left-active': selectLeftId === menu.menuId }"
      >
      <!-- 如果菜单有子菜单，则显示可展开的菜单项 -->
      <div
        v-if="menu.list"
        :class="[
                  'menu-left-item',
                  {'menu-left-active': selectLeftId === menu.menuId} // 根据是否选中设置激活样式
                ]"
        @click="expandMenu(menu)"
      >
      <svg-icon
        v-if="menu.icon"
        :icon-class="`icon-${menu.icon}`"
      style="font-size: 16px; margin-right: 3px !important"
      />
      <span
        class="item-text"
        :title="menu.name.length > 4 ? menu.name : ''"
      style="font-size: 14px"
      >{{ menu.name }}</span> // 显示菜单名称
      </div>

      <!-- 如果菜单没有子菜单，则直接链接到目标页面 -->
      <div
        v-else
        :class="{
                  'menu-left-active': selectLeftId === menu.menuId, // 根据是否选中设置激活样式
                  'menu-left-item1': '语言' === 'English', // 如果语言是英文则使用不同的样式
                  'menu-left-item': '语言' !== 'English' // 如果语言不是英文则使用默认样式
                }"
        @click="gotoRouteHandle(menu)"
      >
      <svg-icon
        v-if="menu.icon"
        :icon-class="menu.icon || ''"
      style="font-size: 16px; margin-right: 3px !important"
      class="site-sidebar__menu-icon"
      />
      <span
        class="item-text"
        :title="menu.name.length > 4 ? menu.name : ''"
      style="font-size: 14px"
      >{{ menu.name }}</span> // 显示菜单名称
      </div>
      </li>
</template>
</ul>
</el-scrollbar>

<!-- 右侧子菜单组件，仅当侧边栏未折叠时显示 -->
<SubMenu
  v-if="!sidebarFold"
:key="selectLeftId"
class="menu-right-con"
:expand-menu="expandMenuList"
/>
</div>
</aside>
</template>
<script setup>
import SubMenu from './main-sidebar-sub-menu.vue'             // 导入子菜单组件

// 从 Vue 和 Vuex 中导入必要的函数和模块
import { useRoute, useRouter } from 'vue-router'
import { computed, ref, onBeforeMount } from 'vue'
import { useCommonStore } from '@/store'

// 初始化路由对象和 Vuex store 实例
const route = useRoute()                                      // 获取当前路由信息
const router = useRouter()                                    // 获取路由导航器实例
const commonStore = useCommonStore()                          // 获取通用状态管理实例

// 定义响应式变量
const dynamicMenuRoutes = ref([])                             // 动态菜单路由列表
const expandMenuList = ref([])                                // 展开的菜单列表

// 计算属性：获取侧边栏折叠状态
const sidebarFold = computed(() => commonStore.sidebarFold)

// 计算属性：获取和设置菜单列表
const menuList = computed({
  get: () => commonStore.menuList,                            // 从 store 获取菜单列表
  set: val => commonStore.updateMenuList(val)                 // 更新 store 中的菜单列表
})

// 计算属性：获取并处理选中的左侧菜单 ID
const selectLeftId = computed({
  get: () => {
    handleRightRoute(commonStore.selectLeftId)
    return commonStore.selectLeftId || ''
  }
})

// 在组件挂载之前执行的钩子函数
onBeforeMount(() => {
  // 从 sessionStorage 中恢复菜单列表和动态菜单路由
  menuList.value = JSON.parse(sessionStorage.getItem('menuList') || '[]')
  dynamicMenuRoutes.value = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')

  // 处理当前路由
  routeHandle(route)

  // 如果有选中的左侧菜单 ID，则处理右侧路由
  if (selectLeftId.value) {
    handleRightRoute(selectLeftId.value)
  }
})

// 处理右侧路由展开逻辑
const handleRightRoute = selectLeftId => {
  menuList.value.forEach(item => {
    if (selectLeftId === item.menuId) {
      expandMenu(item, true)                                  // 展开对应的菜单项
    }
  })
}

// 跳转到首页
const toHome = () => {
  router.push({ name: 'home' })                               // 跳转到首页
  expandMenuList.value = []                                   // 清空展开菜单列表
  sessionStorage.setItem('isExpand', '0')                     // 设置展开状态为关闭
  commonStore.updateSidebarFold(true)                         // 折叠侧边栏
  commonStore.updateSelectLeftId('')                          // 清空选中的左侧菜单 ID
  commonStore.updateSelectRightId('')                         // 清空选中的右侧菜单 ID
}

// 处理路由变化
const routeHandle = route => {
  if (route.name === 'home') {
    expandMenuList.value = []
    sessionStorage.setItem('isExpand', '0')
    commonStore.updateSelectLeftId('')
    commonStore.updateSelectRightId('')
  }
}

// 跳转到指定菜单项的路由
const gotoRouteHandle = menu => {
  // 如果当前路由已经是目标路由，则进行一些清理操作
  if (router.history.current.name === menu.url) {
    expandMenuList.value = []
    commonStore.updateSidebarFold(true)
    sessionStorage.setItem('isExpand', '0')
    commonStore.updateSelectRightId('')
    commonStore.updateSelectLeftId(menu.menuId || '')
    return
  }

  // 特殊处理消息菜单项
  if (menu.name === '消息' || menu.name === 'Message') {
    sessionStorage.setItem('isExpand', '0')
    window.open(location.href.split('#')[0] + '#/imBox', '_blank', 'noopener,noreferrer')
  } else {
    // 对于普通菜单项，更新状态并跳转到目标路由
    expandMenuList.value = []
    commonStore.updateSidebarFold(true)
    sessionStorage.setItem('isExpand', '0')
    commonStore.updateSelectRightId('')
    commonStore.updateSelectLeftId(menu.menuId || '')
    router.push({ name: menu.url })
  }
}

// 展开或收起菜单项
const expandMenu = menu => {
  expandMenuList.value = menu.list || []                      // 更新展开的菜单列表
  commonStore.updateSidebarFold(menu.list === null)           // 根据菜单是否有子项决定是否折叠侧边栏
  const id1 = commonStore.selectLeftId                        // 记录当前选中的左侧菜单 ID
  commonStore.updateSelectLeftId(menu.menuId || '')           // 更新选中的左侧菜单 ID
  const id2 = commonStore.selectLeftId                        // 再次记录选中的左侧菜单 ID（更新后）

  if (menu.list) {
    sessionStorage.setItem('isExpand', '1')                   // 设置展开状态为展开
  }

  // 如果左侧菜单 ID 发生变化，则根据菜单项跳转路由
  if (id1 !== id2) {
    routeJump(menu)
  }
}

// 根据菜单项跳转路由
const routeJump = menu => {
  const routes = menu.list
  for (let i = 0; i < routes.length; i++) {
    // 如果找到第一个非隐藏且无子项的路由，则跳转到该路由
    if (!routes[i].hidden && !routes[i].list) {
      router.push({ name: routes[i].url })
      break
    } else if (routes[i].list) {
      let flag = false
      for (let j = 0; j < routes[i].list.length; j++) {
        // 如果找到第一个非隐藏的子项路由，则跳转到该路由
        if (!routes[i].list[j].hidden) {
          router.push({ name: routes[i].list[j].url })
          flag = true
          break
        }
      }
      if (flag) {
        break
      }
    }
  }
}
</script>

<style scoped>
/* 定义菜单模块的整体布局 */
.menu-mod {
  display: flex; /* 使用 Flexbox 布局，使子元素可以灵活排列 */
}

/* 定义右侧内容容器的位置和层级 */
.menu-right-con {
  position: absolute; /* 设置为绝对定位 */
  z-index: 1;         /* 设置堆叠顺序，确保在其他元素之上 */
  left: 100px;        /* 左边距为 100px */
}

/* 定义左侧菜单栏样式 */
.menu-left {
  background: #222222; /* 背景颜色为深灰色 */
  color: #ffffff !important; /* 文本颜色为白色，并使用 !important 确保优先级 */
  width: 100px;           /* 固定宽度为 100px */
  height: calc(100vh - 50px); /* 高度为视口高度减去 50px（通常用于顶部导航栏） */
  overflow-y: auto;      /* 当内容超出容器高度时启用垂直滚动条 */
}

/* 定义左侧菜单项的基本样式 */
.menu-mod .menu-left-item {
  width: 100%;          /* 占满整个父容器宽度 */
  height: 100%;         /* 占满整个父容器高度 */
  display: flex;        /* 使用 Flexbox 布局 */
  align-items: center;  /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
}

/* 定义左侧菜单项的另一种样式（可能是不同状态或类型的菜单项） */
.menu-mod .menu-left-item1 {
  width: 100%;          /* 占满整个父容器宽度 */
  height: 100%;         /* 占满整个父容器高度 */
  display: flex;        /* 使用 Flexbox 布局 */
  align-items: center;  /* 水平居中对齐 */
  text-align: left;     /* 文本左对齐 */
  padding-left: 12px;   /* 左内边距为 12px */
}

/* 定义左侧菜单的无序列表样式 */
.menu-mod .menu-left ul {
  list-style-type: none; /* 移除默认的列表样式 */
  margin: 0;             /* 移除外边距 */
  padding: 0;            /* 移除内边距 */
  width: 100px;          /* 固定宽度为 100px */
  text-align: center;    /* 文本居中对齐 */
}

/* 定义右侧菜单的无序列表样式 */
.menu-mod .menu-right ul {
  list-style-type: none; /* 移除默认的列表样式 */
  margin: 0;             /* 移除外边距 */
  padding: 0;            /* 移除内边距 */
  width: 130px;          /* 固定宽度为 130px */
  text-align: center;    /* 文本居中对齐 */
}

/* 定义左侧菜单项的样式 */
.menu-left li {
  background: #222222;  /* 背景颜色为深灰色 */
  color: #fff;          /* 文本颜色为白色 */
  height: 40px;         /* 固定高度为 40px */
  cursor: pointer;      /* 鼠标悬停时显示指针样式 */
  font-size: 14px;      /* 字体大小为 14px */
  stroke: #fff !important; /* SVG 图标颜色为白色，并使用 !important 确保优先级 */
}

/* 定义右侧菜单项的样式 */
.menu-right li {
  height: 40px;         /* 固定高度为 40px */
  display: flex;        /* 使用 Flexbox 布局 */
  align-items: center;  /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  cursor: pointer;      /* 鼠标悬停时显示指针样式 */
  font-size: 14px;      /* 字体大小为 14px */
  color: #333333;       /* 文本颜色为深灰色 */
}

/* 定义左侧菜单项悬停时的样式 */
.menu-left li:hover {
  background-color: #ffffff; /* 背景颜色变为白色 */
  color: #155bd4;            /* 文本颜色变为蓝色 */
  stroke: #155bd4 !important;/* SVG 图标颜色变为蓝色，并使用 !important 确保优先级 */
}

/* 定义右侧菜单项悬停时的样式 */
.menu-right li:hover {
  background-color: rgba(21, 91, 212, 0.1); /* 背景颜色变为浅蓝色透明 */
  color: #155bd4;                           /* 文本颜色变为蓝色 */
}

/* 冗余定义，应删除 */
.menu-right li:hover {
  background-color: rgba(21, 91, 212, 0.1);
  color: #155bd4;
}

/* 定义左侧菜单项激活状态的样式 */
.menu-left-active {
  background-color: #ffffff; /* 背景颜色变为白色 */
  color: #155bd4;            /* 文本颜色变为蓝色 */
  stroke: #155bd4 !important;/* SVG 图标颜色变为蓝色，并使用 !important 确保优先级 */
}

/* 定义菜单项文本的样式 */
.item-text {
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 溢出部分用省略号表示 */
  white-space: nowrap;       /* 强制在同一行显示 */
  display: inline-block;     /* 显示为内联块元素 */
  max-width: 70px;           /* 最大宽度为 70px */
}
</style>
