<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :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'
  import {
    getrolemenus,
  } from '@/api/User/login.js'
  export default {
    components: {
      SidebarItem,
      Logo
    },
    data() {
      return {
        YongHuid: [],
        routes: [],
        params: {
          sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa45', //  wms 资源sid
          orgSid: window.sessionStorage.getItem('orgSid'),
          userSid: window.sessionStorage.getItem('userSid')
        }
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      // routes() {
      // df3e44ae-412e-4b02-b9e4-6893dbf5f83b
      //   console.log('78979789', this.$router.options.routes)
      //   return this.$router.options.routes
      // },
      activeMenu() {
        // console.log('aaaaaaaaaaa', this.$route)
        //   console.log("val>>>>>>>>>>>>>>>>.", this.$route.query.index); // 页面获取
        // this.$route.query.index = [{
        //   sid: '11',
        //   name: "ssss"
        // }, {
        //   sid: '22',
        //   name: "aaa"
        // }, {
        //   sid: '33',
        //   name: "bbb"
        // }]
        const route = this.$route
        const {
          meta,
          path,
          // query,
        } = route

        // this.$route.query = {
        //   index: '1'
        // }

        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        // console.log('bbbbbbb', path)
        return path
      },
      showLogo() {
        return this.$store.state.settings.sidebarLogo
      },
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      }
    },
    created() {
      this.postHuoquyonghu()
    },
    methods: {
      // 获取用户信息
      postHuoquyonghu() {
        getrolemenus(this.params).then((res) => {
          const userRoles = this.resRouter(res.data)
          userRoles.push({
            path: '*',
            redirect: '/404',
            hidden: true
          })
          return userRoles
        })
      },
      resRouter(menus) {
        // 递归，将后台传来数组
        for (var i = 0; i < menus.length; i++) {
          if (menus[i].children && menus[i].children.length != 0) {
            this.resRouter(menus[i].children)
          }
          if (menus[i].children.length == 0) {
            delete menus[i].children
            delete menus[i].redirect
          }
          if (menus[i].component == '') {
            menus[i] = {
              path: menus[i].path,
              component: '',
              redirect: menus[i].path,
              children: [menus[i]]
            }
          }
        }
        this.routes = menus
        console.log('左侧菜单', this.routes)
        return menus
      }
    }
  }
</script>
