<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <!-- :show-timeout="200" -->
    <el-menu mode="vertical" :collapse-transition='false' :default-active="$route.path" background-color="#f6f7f9" :collapse="isCollapse"
      text-color="#666" active-text-color="#fff" :unique-opened="true" @open='handleOpen' class='el-menu-vertical-demo' style="border-right: none;">
      <sidebar-item :routes="routes"></sidebar-item>
      <Hamburger style="position: relative;z-index:99;margin-top: 10px;" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></Hamburger>
    </el-menu>
  </el-scrollbar>
</template>
<script>
  import {mapGetters } from 'vuex'
  import SidebarItem from './SidebarItem'
  import Hamburger from '@/components/Hamburger'

  export default {
    data() {
      return {
        //isCollapse:true
      }
    },
    components: {
       SidebarItem,
       Hamburger 
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('ToggleSideBar')
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath,555555);
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'data',
        'index'
      ]),
      isCollapse() {
        return !this.sidebar.opened
      },
      routes() {
        // 拿到业务管理数据
        const index = this.index;
        console.log(this.index,'当前下标')
        let routes = JSON.stringify(this.data[0].children[index].children);  
        window.localStorage.setItem('routes',routes)
        return this.data[0].children[index].children
        
        
        // console.log('routes传递过来的',this.data[0].children)
        // console.log('所有所有所哟哟',this.data)
        // return this.data[0].children


        // 拿到所有siderbar 数据，之后根据key遍历出业务管理
        // const nameNeed = '业务管理'
        // for (let i = 0; i < this.data.length; i++) {
        //   if (this.data[i].name === nameNeed) {
        //     return this.data[i].children
        //   }
        // }

        // return  this.$router.options.routes
      },
      mounted() {

      }
    },
    watch: {
      isCollapse:function(newVal,oldVal) {
        console.log('isCollapse的值',newVal)
      }
    },
    created() {

      
    },
    updated() {
      
    },
  }
</script>
<style scoped>
  /* .scrollbar-wrapper{ overflow-x: auto; }
  .scrollbar-wrapper:-webkit-scrollbar { height: 5px; } */
  /* .scrollbar-title {
    background: #028c98;
    height: 45px;
    line-height: 45px;
    padding-left: 15px;
    color: #fff;
    font-size: 14px;
  } */
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 235px;
    /* min-height: 400px; */
  }
  /* .titleStyle{
    text-align: center;
    padding-left: 0;
  } */
</style>