<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo"
          :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'
import { getRouters } from '@/api/settle'
export default {
  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters(['sidebar']),
    // routes() {
    //   return this.$router.options.routes
    // },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    },
  },
  data() {
    return {
      routes: [],
    }
  },
  mounted() {
    this.getActMenu().then((res) => {
      this.actMenu()
    })
  },
  methods: {
    getActMenu() {
      return new Promise((resolve) => {
        getRouters().then((res) => {
          this.rolaMenu = this.getName(res.data)
          resolve(res)
        })
      })
    },
    actMenu() {
      // 现把所有菜单隐藏
      this.$router.options.routes.forEach((item) => {
        item.hidden = true
        if (item.children) {
          item.children.forEach((ctem) => {
            ctem.hidden = true
            if (ctem.children) {
              ctem.children.forEach((stem) => {
                stem.hidden = true
              })
            }
          })
        }
      })
      // 显示接口返回的菜单
      this.$router.options.routes.forEach((item) => {
        if (item.children) {
          item.children.forEach((ctem) => {
            if (this.rolaMenu.indexOf(ctem.name) >= 0) {
              ctem.hidden = false
            }
            if (ctem.children) {
              ctem.children.forEach((stem) => {
                if (this.rolaMenu.indexOf(stem.name) >= 0) {
                  stem.hidden = false
                }
              })
            }
          })
        }
        if (this.rolaMenu.indexOf(item.name) >= 0) {
          item.hidden = false
        }
      })
      this.routes = this.$router.options.routes
      this.$forceUpdate()
    },

    // 多维数组取name成一个数组
    getName(arr, newArr) {
      newArr = newArr || []
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        if (item['routeName']) {
          newArr.push(item['routeName'])
          if (item['children']) {
            this.getName(item['children'], newArr)
          }
        }
      }
      return newArr
    },
  },
}
</script>
