<template>
  <el-aside
    style="height: 100vh; background: #202940; width: 280px; padding: 0"
    class="admin-sidebar"
  >
    <el-menu
      style="border: none; width: 280px"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#202940"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <div v-for="item in menuList" :key="item.id">
        <el-menu-item
          @click="handleClick(item)"
          v-show="!item.children"
          :index="item.id"
          style="padding-left: 20px !important"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ $t(item.label) }}</span>
        </el-menu-item>

        <el-submenu id="el-submenu-bg" :index="item.id" v-if="item.children">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ $t(item.label) }}</span>
          </template>
          <el-menu-item
            @click="handleClick(child)"
            v-for="child in item.children"
            :key="child.id"
            :index="child.id"
            style="padding-left: 40px !important"
          >
            <i :class="child.icon"></i>
            <span slot="title">{{ $t(child.label) }}</span>
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        // {
        //   //广播
        //   path: "broadcast",
        //   label: `backendSystem.broadcast`,
        //   icon: "el-icon-bell",
        //   id: "1",
        // },
        {
          //用户管理
          // path: "userManagement",
          label: `backendSystem.userRelated`,
          icon: "el-icon-user",
          id: "2",
          children: [
          {
              //用户管理
              path: "userManagement",
            label: `backendSystem.userManagement`,
            icon: "el-icon-user",     
              id: "2-1",
            },
            {
              //待支付汇总
              path: "pendingPaymentSummary",
              label: `backendSystem.pendingPaymentSummary`,
              icon: "el-icon-wallet",       
              id: "2-2",
            },
          
          ],
        },
        {
          //工单管理
          path: "workOrderBackend",
          label: `backendSystem.workOrder`,
          icon: "el-icon-document-copy",
          id: "3",
        },
       
        {
          //文档管理
          path: "documentManagement",
          label: `backendSystem.documentManagement`,
          icon: "el-icon-folder-opened",
          id: "4",
          children: [
            {
              //广播
              path: "broadcast",
              label: `backendSystem.broadcast`,
              icon: "el-icon-bell",
              id: "4-1",
            },
            {
              //发布文章
              path: "documentManagement",
              label: `backendSystem.publishArticle`,
              icon: "el-icon-edit-outline",
              id: "4-2",
            },
          ],
        },
      ],
      activeIndex: "0",
    };
  },
  mounted() {
    const lang = this.$i18n.locale;
    const currentPath = this.$route.path.replace(`/${lang}/`, "");
    // 优先根据当前路由匹配菜单项
    const matchedMenu = this.menuList.find((item) => item.path === currentPath);
    console.log(matchedMenu, "matchedMenu");
    if (matchedMenu) {
      this.activeIndex = matchedMenu.id;
      this.$addStorageEvent(1, "activeIndex", matchedMenu.id);
    } else {
      // 如果localStorage有值，优先用localStorage
      const savedIndex = localStorage.getItem("activeIndex");
      if (savedIndex) {
        this.activeIndex = savedIndex;
      } else {
        this.$addStorageEvent(1, "activeIndex", this.activeIndex);
      }
    }


    if (this.activeIndex == "0") {
      this.activeIndex = "2-1";
    }


  },
  methods: {
    handleClick(item) {
      console.log(item, "item");
      const lang = this.$i18n.locale;
      this.$router.push(`/${lang}/${item.path}`);
      this.activeIndex = item.id;
      this.$addStorageEvent(1, "activeIndex", item.id);
    },
  },
  beforeDestroy() {
    localStorage.removeItem("activeIndex");
  },
};
</script>

<style scoped lang="scss">
.el-submenu .el-menu-item {
  padding-left: 40px !important;
}

</style>