<template>
  <div class="sidebar">
    <el-row>
      <el-col :span="7">
        <div class="sidebar-left" v-for="(item,index) in sidebarList" :key="item.routes.path">
          <el-button @click="handleClick(index)" type="primary" icon="el-icon-service">{{index}}</el-button>
        </div>
      </el-col>
      <el-col :span="16">
        <el-menu :collapse-transition="false" class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened :router="true">
          <el-submenu :index="item.path" v-for="item in menus" :key="item.path">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path">{{subItem.title}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      collapse: false,
      currentRouteIndex: 0,
      sidebarList: [
        {
          routes: [
            {
              path: 'home',
              title: '首页'
            }
          ]
        },
        {
          routes: [
            {
              path: 'home',
              title: '精准营销',
              children: [
                {
                  path: 'marketing',
                  title: '营销推送'
                },
                {
                  path: 'addmarketing',
                  title: '推送详情'
                }
              ]
            }
          ]
        }
      ],
      menus: []
    }
  },
  computed: {
    onRoutes (e) {
      console.log(1)
      return this.$route.path.replace('/', '')
    }
  },
  created () {
    this.menus = this.sidebarList[this.currentRouteIndex].routes
  },
  methods: {
    handleClick (index) {
      this.currentRouteIndex = index
      this.menus = this.sidebarList[this.currentRouteIndex].routes
    }
  }
}
</script>
<style lang="stylus" scoped>
.sidebar {
  font-weight: lighter;
  letter-spacing: 1px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 720px;
  width: 250px;
  background-color: gray;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 170px;
}
</style>
