<template>
  <div class="menu-mod">
    <!-- 如果 expandMenu 包含子菜单项 (list) -->
    <div v-if="expandMenu.list">
      <!-- 使用 el-sub-menu 创建一个可展开的菜单项 -->
      <el-sub-menu
        v-if="!item.hidden"
      :index="expandMenu.menuId + ''"
      >
      <template #title>
        <!-- 菜单项标题 -->
        <span
          style="font-size: 14px"
        :title="expandMenu.name.length > 4 ? expandMenu.name : ''"
        >{{ expandMenu.name }}</span>
      </template>

      <!-- 使用 el-menu-item-group 包装子菜单项 -->
      <el-menu-item-group class="menu-right-el-item">
        <template v-for="menu in expandMenu.list">     <!-- 遍历子菜单列表 -->
          <!-- 每个子菜单项 -->
          <el-menu-item
            v-if="!menu.hidden"
          :key="menu.menuId"
          style="
          font-size: 14px !important;              <!-- 设置字体大小为 14px -->
          line-height: 40px;
          padding-left: 30px !important;           <!-- 设置左侧内边距为 30px -->
          padding-right: 10px !important;          <!-- 设置右侧内边距为 10px -->
          "
          class="menu-right-el-item is-active item-text"
          :class="{ 'menu-active': selectRightId === menu.menuId }"
          @click="gotoRouteHandle(menu)"
          >
          <span :title="menu.name.length > 4 ? menu.name : ''">{{ menu.name }}</span> <!-- 显示子菜单名称 -->
          <!-- 如果子菜单还有子菜单，则递归渲染 SubMenuItem 组件 -->
          <SubMenuItem
            v-if="menu.list"
            :expand-menu="menu"
          />
          </el-menu-item>
        </template>
      </el-menu-item-group>
      </el-sub-menu>
    </div>

    <!-- 如果 expandMenu 没有子菜单项 (list) -->
    <div v-else>
      <!-- 使用 el-menu-item 创建一个不可展开的菜单项 -->
      <el-menu-item
        v-if="!expandMenu.hidden"
      :key="expandMenu.menuId"
      style="font-size: 14px !important; padding-left: 15px !important; line-height: 40px"
      class="menu-right-el-item is-active item-text"
      :class="{ 'menu-active': selectRightId === expandMenu.menuId }"
      @click="gotoRouteHandle(expandMenu)"
      >
      <span :title="expandMenu.name.length > 4 ? expandMenu.name : ''">{{ expandMenu.name }}</span> <!-- 显示菜单名称 -->
      </el-menu-item>
    </div>
  </div>
</template>

<script setup>
// 导入子菜单项组件
import SubMenuItem from './main-sidebar-sub-menu-item.vue'

// 定义组件接收的属性 (props)
const props = defineProps({
  expandMenu: {
    type: Object, // 属性类型为对象
    default: () => ({}) // 如果没有传递此属性，则默认为空对象
  },
  menuIndex: {
    type: String, // 属性类型为字符串
    default: '' // 如果没有传递此属性，则默认为空字符串
  }
})

// 使用 ref 创建响应式数据，初始化为 props.expandMenu 的值
const item = ref(props.expandMenu)

// 初始化 Vuex store 实例
const commonStore = useCommonStore()

// 计算属性：获取当前选中的右侧菜单项 ID
const selectRightId = computed(() => commonStore.selectRightId)

// 初始化 Vue Router 实例
const router = useRouter()

// 监听路由变化，当路由发生变化时调用 routeHandle 函数处理
watch(
  () => router.currentRoute.value, // 监听当前路由的变化
  route => {
    routeHandle(route) // 路由变化时调用 routeHandle 处理逻辑
  }
)

// 路由操作函数
const routeHandle = route => {
  if (route.meta.isTab) { // 检查路由元信息中是否有 isTab 标记
    commonStore.updateSelectRightId(route.meta.menuId || '') // 更新选中的右侧菜单项 ID
  }
}

// 通过 menuId 与动态(菜单)路由进行匹配跳转至指定路由
const gotoRouteHandle = menu => {
  if (router.currentRoute.value.name === menu.url) { // 如果当前路由已经是目标路由，则不执行跳转
    return
  }
  router.push({ name: menu.url }) // 否则，导航到指定路由
}
</script>
<style lang="scss" scoped>
.menu-mod {
  /* 定义右侧菜单项的基本样式 */
  .menu-right-el-item {
    /* 当菜单项处于激活状态时的样式 */
    &.is-active {
      background-color: #ffffff; /* 背景颜色为白色 */
      color: #333;               /* 文本颜色为深灰色 */
    }

    /* 自定义激活状态下的样式 */
    &.menu-active {
      background-color: #e7eefb; /* 背景颜色为浅蓝色 */
      color: #155bd4;            /* 文本颜色为蓝色 */
    }

    /* 修改 el-menu-item-group 组件中标题的内边距 */
    :deep(.el-menu-item-group__title) {
      padding: 0; /* 移除默认内边距 */
    }
  }

  /* 定义子菜单标题的样式 */
  div .el-sub-menu__title span {
    display: inline-block;       /* 设置为行内块元素 */
    width: 85px;                 /* 固定宽度为 85px */
    font-size: 14px;             /* 字体大小为 14px */
    overflow: hidden;            /* 隐藏溢出的内容 */
    text-overflow: ellipsis;     /* 溢出部分用省略号表示 */
    white-space: nowrap;         /* 强制在同一行显示 */
  }

  /* 定义子菜单项中的文本样式 */
  .el-sub-menu .menu-right-el-item.el-menu-item span {
    overflow: hidden;            /* 隐藏溢出的内容 */
    text-overflow: ellipsis;     /* 溢出部分用省略号表示 */
    white-space: nowrap;         /* 强制在同一行显示 */
  }
}
</style>
