<template>
  <div >
    <el-container style="min-height: 550px">
      <!--<el-aside width="210px" style="background-color: rgb(84, 92, 100);">-->
      <el-aside width="210px" style="background-color: rgb(84, 92, 100);">
        <!--左侧菜单组件-->

        <el-menu
          :default-active="isId"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :default-openeds="openeds" unique-opened router>

          <NavMenu :navMenus="totalList"></NavMenu>
        </el-menu>

      </el-aside>


      <el-container>
        <el-main class="app-container">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import config from '../components/config'
  import NavMenu from '../components/NavMenu';

  export default {
    name: 'service',
    data(){
      return {
        tagsList: [],
        collapse: false,
        totalList:[],
        isId:"first",
        openeds:["first"],
      }
    },
    components:{
       NavMenu
    },
    beforeRouteEnter (to, from, next) {
      console.log("我从==哪里来",to)
      var self = this

      next(vm=>{
        console.log(to)
        vm.isId = to.path.replace('/','');

      })


    },
    methods: {
      handleSelect(key,keyPath){
        console.log("=======",key,keyPath);
      },
      handleOpen(){


      },
      handleClose(){

      }
    },
    watch:{

      $route(to,from){

        this.isId = to.path.replace('/','');
      }
    },
    created(){
      this.totalList = config.childs
    },
  }
</script>
<style scoped>


</style>
