<template>
  <div :class="{ 'has-logo': showLogo }">
    <logo :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/styles/variables.scss";

export default {
  components: { SidebarItem, Logo },

  computed: {
    ...mapGetters(["sidebar"]),
    routes() {
      // return this.$router.options.routes
      let strArry = sessionStorage.getItem("menuList");
      let objArry = JSON.parse(strArry);
      // console.log(objArry, "777777777777777");
      let arr1 = [];
      let arr2 = [];
      for (let i = 0; i < objArry.length; i++) {
        if (objArry[i].parent_id == 0) {
          arr1.push(objArry[i]);
          arr2.push(objArry[i].menu_id); //手动添加一级菜单
        }
        // console.log(arr1, "00000000000000");
      }
      for (let k = 0; k < arr1.length; k++) {
        let children = [];

        // console.log(arr1[k])

        for (let j = 0; j < objArry.length; j++) {
          if (objArry[j].parent_id == arr1[k].menu_id) {
            children.push(objArry[j]);
            // console.log(arr1, "111111111");
          } else {
          }
        }
        arr1[k].children = children;
      }
      for (let x = 0; x < objArry.length; x++) {
        if (
          objArry[x].parent_id != 0 &&
          arr2.indexOf(objArry[x].parent_id) == -1
        ) {
          // console.log(objArry[x])
          arr1.push(objArry[x]);
        }
      }
      return arr1;
      //  for(let j=0; j<objArry.length;j++){
      //    for()
      //     if(objArry[j].parent_id==){
      //       arr1.push(objArry[i])
      //       console.log(arr1,"00000000000000")
      //     }

      //   };
      //   for(let i in objArry){
      //       //var o={};
      //       //o[i]=jsonObj[i];
      //       arr1.push(objArry[i]);
      //   }
      //   console.log(arr1)
      return objArry;
    },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  created() {
    // console.log(this.$router.options.routes);
    // console.log(typeof(this.$router.options.routes))
    // console.log(typeof(sessionStorage.getItem("menuList"),"111111111"))
  },
};
</script>
