<template lang='pug'>
  .sidebar-wrapper
    .sidebar
      .logo
        img(':src'="logo")
      .item('v-for'="item in menuList" ,':key'="item.id",'@click'='choseMenu(item)')
        sidebar-item&attributes({
          ':icon':'item.ico',
          ':link':'item.link',
          ':type':'item.type',
          ':id':'item.id',
          ':name':'item.name',
          ':pid':'item.pid',
          ':grade':'item.grade',
          ':sort':'item.sort'
        })
</template>
<script>
import sidebarItem from '../sidebarItem'
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
  data () {
    return {
      collapse: false,
      currentRouteIndex: 0,
      logo,
      menus: [],
      menuList: []
    }
  },
  components: {
    sidebarItem
  },
  mounted () {
    this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMenus').then(res => {
      this.menuList = res.data.data
    })
  },
  computed: {},
  created () {
  },
  methods: {
    handleClick (index) {
      this.currentRouteIndex = index
      this.menus = this.sidebarList[this.currentRouteIndex].routes
    },
    choseMenu (item) {
      console.log(item)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .sidebar-wrapper
    position relative
    width 70px
    height 100px
    display inline-block
  .sidebar
    position fixed
    left 0
    top 0
    bottom 0
    width 70px
    background #374a5e
  .logo
    text-overflow ellipsis
    overflow hidden
    font-weight 400
    font-size 22px
    width 100%
    color #ECF0F1
    line-height 59px
    display block
    height 65px
    margin 10px auto
    padding-left 5px
    padding-top 5px
    img
      width 60px
  .item
    position relative
    display block
    cursor pointer
    & + &
      margin-bottom 6px
</style>
