<template>
  <el-menu id="NavMenu" :default-openeds="['0']" :collapse="isCollapse">
    <div class="logo">
      <img v-if="isCollapse" class="img2" :src="logo2" alt="" />
      <img v-else class="img1" :src="logo1" alt="" />
    </div>
    <div v-for="(item, key) in menus" :key="key">
      <el-sub-menu v-if="item.show && item.name != 'R-Shop'" teleported :index="key + ''">
        <template #title>
          <i class="iconfont" :class="item.icon"></i>
          <span class="title">{{ $t(item.name) }}</span>
        </template>
        <div v-for="(subitem, subkey) in item.children" :key="key + '-' + subkey">
          <el-menu-item
            v-if="subitem.show && subitem.name != 'R-System-QAList'"
            :index="key + '-' + subkey"
            @click="routerPush(subitem.link)"
          >
            <template #title>
              <span class="title">{{ $t(subitem.name) }}</span>
            </template>
          </el-menu-item>
        </div>
      </el-sub-menu>
      <div
        v-if="item.show && item.name == 'R-Shop' && !isCollapse"
        class="points"
        @click="toPointsMall(item)"
      >
        <a :href="item.link" target="_blank">
          <i class="el-icon-shopping-cart-full"></i>
          <span>{{ $t(item.name) }}</span>
        </a>
      </div>
      <div
        v-if="item.show && item.name == 'R-Shop' && isCollapse"
        class="points1"
        @click="toPointsMall(item)"
      >
        <a :href="item.link" target="_blank">
          <el-tooltip class="item" effect="dark" :content="$t(item.name)" placement="right">
            <i class="el-icon-shopping-cart-full" style="display: inline"></i>
          </el-tooltip>
        </a>
      </div>
    </div>
  </el-menu>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, getCurrentInstance } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore, mapState } from 'vuex'
  import session from '@/lib/session' // 假设 session 已转换为 ES module
  // 引入图片
  import logo2 from '@/assets/image/logo2.png'
  import logo1 from '@/assets/image/logo.png'
  const v3This = getCurrentInstance()

  // 组合式 API
  const route = useRoute()
  const router = useRouter()
  const store = useStore()

  // 响应式数据
  const upath = ref('/')

  // 计算属性 - 使用 mapState 的等效方式
  const menus = computed(() => {
    console.log(store.state.navMenu.menus, 'menus')
    // 这是u卡只需要u卡路由 .filter((item) => item.name == 'R-Card')
    return store.state.navMenu.menus
  })
  const isCollapse = computed(() => store.state.navMenu.isCollapse)

  const routerPush = (path) => {
    if (route.path === path || path === '#') {
      return
    }

    upath.value = path
    const menuItem = findMenuItemByPath(path)

    // 使用事件总线或 provide/inject 替代 $bus
    // 这里假设使用 mitt 或自定义事件系统
    v3This.ctx.$emit('menu-click', {
      link: path,
      name: menuItem ? menuItem.name : route.name,
      icon: menuItem ? menuItem.icon : 'el-icon-document',
    })

    router.push(path)
  }

  const findMenuItemByPath = (path) => {
    for (const menu of menus.value) {
      if (menu.children) {
        for (const subMenu of menu.children) {
          if (subMenu.link === path) {
            return {
              name: subMenu.name,
              icon: menu.icon || 'el-icon-document',
            }
          }
        }
      }
    }
    return null
  }

  const toPointsMall = (item) => {
    console.log(item)
  }

  // 初始化菜单权限
  const initMenuPermissions = () => {
    menus.value.forEach((item) => {
      if (item.name === 'R-User') {
        const visibleChildren = item.children.filter((el) => el.show)
        if (visibleChildren.length === 1 && visibleChildren[0].name === 'R-UserList') {
          if (visibleChildren[0].btns['R-UserList-Search'].show === false) {
            item.show = false
          }
        } else {
          const obj = visibleChildren.find((el) => el.name === 'R-UserList')
          if (obj && obj.btns['R-UserList-Search'].show === false) {
            obj.show = false
          }
        }
      }
    })
    console.log(menus.value)
  }

  // 生命周期
  onMounted(() => {
    // 登陆后调用
    const userData = session.Get('user', true)
    if (userData) {
      store.commit('InitNavMenu', JSON.parse(userData).display)
      initMenuPermissions()
    }
  })

  // 如果需要暴露给模板
  defineExpose({
    routerPush,
    toPointsMall,
  })
</script>

<style scoped lang="scss">
  #NavMenu {
    border-right: none;
    .logo {
      height: 100px;
      overflow: hidden;
      .img1 {
        height: 50px;
        margin-top: 20px;
      }
      .img2 {
        height: 39px;
        margin-top: 28px;
      }
    }
    background-color: rgba(43, 48, 67, 1);
    color: #6b7188;
    &:not(.el-menu--collapse) {
      width: 250px;
      min-height: 100%;
    }
    .title {
      margin-left: 10px;
    }
    .points {
      padding: 15px 5px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      a {
        display: inline-block;
        color: #ffffff;
        padding: 6px 10px;
        background-color: #eb3f57;
        border-radius: 50px;
        width: 100px;
        display: flex;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        margin: auto;
        i {
          margin-right: 10px;
          font-size: 18px;
        }
        span {
          font-size: 14px;
        }
      }
    }
    .points1 {
      padding: 15px 5px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      a {
        display: inline-block;
        color: #ffffff;
        padding: 6px;
        background-color: #eb3f57;
        border-radius: 50px;
        width: 20px;
        height: 20px;
        display: flex;
        align-content: center;
        align-items: center;
        margin: auto;
        i {
          margin-right: 10px;
          font-size: 18px;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
</style>

<style lang="scss">
  #NavMenu.el-menu--collapse.el-menu .el-sub-menu .el-sub-menu__title .el-submenu__icon-arrow {
    display: none;
  }
  #NavMenu.el-menu--collapse .el-sub-menu .el-sub-menu__title .title {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }
  #NavMenu {
    .el-sub-menu {
      text-align: left;
      .el-sub-menu__title {
        font-weight: 700;
        color: #6b7188;
        &:hover {
          color: #ffffff;
          background-color: rgba(43, 48, 67, 1);
        }
        i {
          color: #ffffff;
        }
      }
      .el-menu {
        margin-left: 1.5em;

        &:focus {
          background-color: rgba(43, 48, 67, 1);
        }
        background-color: rgba(43, 48, 67, 1);
        li {
          color: #a4adcd;
        }
        .is-active {
          background-color: rgba(43, 48, 67, 1);
          color: #ffffff !important;
        }
        .el-menu-item {
          &:hover {
            color: #ffffff;
            background-color: rgba(43, 48, 67, 1);
          }
        }
      }
    }
  }
  .el-menu {
    background-color: rgba(43, 48, 67, 1) !important;
    overflow: hidden;
    margin-left: 0 !important;
  }
  .el-menu-item {
    font-weight: 400;
    color: #a4adcd !important;
    font-size: 12px;
    background-color: rgba(43, 48, 67, 1);
    &:focus,
    &:hover {
      color: #ffffff !important;
      background-color: rgba(43, 48, 67, 1) !important;
    }
  }
</style>
