<template>
  <el-menu :default-active="activeIndex" @select="handleSelect">
    <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'jxSidebar',
  props: {
    menus: Array
  },
  data () {
    return {
      activeIndex: '1'
    }
  },
  created () {
    this.menus.map(el => {
      if (el.router === this.$route.path) {
        this.activeIndex = el.index
      }
    })
  },
  methods: {
    handleSelect (key) {
      this.activeIndex = key
      this.$router.push({
        path: this.menus[Number(key) - 1].router
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
>>>.el-menu-item a
    color #909399
>>>.is-active
    background-color: #ecf5ff
>>>.is-active a
    color #409EFF
</style>
