<template lang='pug'>
  .sidebar-wrapper
    .control(':class'="{open:unfold,close:!unfold}")
    .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
      .logo
        img(':src'="logo")
      .item('v-for'="(item,itemIndex) in menuList" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
        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'
        })
      transition(name="fade",mode="out-in",appear)
        .childrens-meuns('v-show'="unfold",'v-if'="currentMenus")
          .children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
            el-menu&attributes({
              'default-active':"2",
              'class':"el-menu-vertical",
              'background-color':"#374A5E",
              'text-color':"#fff",
              'unique-opened':true,
              'active-text-color':"#fff",
              'mode':'vertical'
            })
              el-submenu(':index'="index | toString",'@select'="selectItemMenu")
                template(slot="title")
                  span {{it.name}}
                template
                  el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",'@click'="choseSubChildren(i)")
                    span.menu-item-name {{i.name}}
      .arrow-tip(':class'="{'left-l':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
        img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template>
<script>
import sidebarItem from '../sidebarItem'
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
  data () {
    return {
      collapse: false,
      currentRouteIndex: 0,
      logo,
      unfold: false, // 水平展开
      menus: [],
      unfoldBtn: false, // 展开按钮
      currentMenus: null,
      currentMenusIndex: -1,
      menuList: []
    }
  },
  filters: {
    toString (value) {
      return value + ''
    },
    pipeString (...args) {
      return args.join('-')
    }
  },
  components: {
    sidebarItem
  },
  mounted () {
    this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMenus').then(res => {
      this.menuList = res.data.data
      this.currentMenus = this.menuList[0]
    })
  },
  computed: {

  },
  created () {
  },
  methods: {
    /**
     * 选择边测菜单主菜单
     */
    choseMenu (selectItem, selectItemIndex) {
      this.currentMenus = selectItem
      this.currentMenusIndex = selectItemIndex
      if (!this.unfold) {
        this.toggleUnfold(true)
      }
    },
    /**
     * 二级菜单
     **/
    choseChildrenItem (...args) {
      console.log(args)
    },
    /**
     * 三级菜单
     * @param args
     **/
    selectItemMenu (...args) {
      console.log(args)
    },
    toggleUnfold (...args) {
      if (!args.length) {
        this.unfold = !this.unfold
      } else {
        this.unfold = args[0]
      }
    },
    hiddenUnfoldBtn () {
      this.unfoldBtn = false
    },
    showUnfoldBtn () {
      this.unfoldBtn = true
    },
    choseSubChildren (...args) {
      console.log(args)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .sidebar-wrapper
    position relative
    height 100px
    display inline-block
    z-index 5
  .sidebar
    position fixed
    left 0
    top 0
    bottom 0
    width 70px
    &::after
      position absolute
      top 0
      left 0
      bottom 0
      right 0
      content ''
      background #2A3F54
      z-index -1
  .arrow-tip
    position absolute
    top 50%
    width 48px
    height 48px
    line-height 48px
    border-radius 50%
    text-align center
    background-color rgba(55, 74, 94, .5)
    transform translateX(-50%)
    transition all 0.2s
    cursor pointer
    z-index -2
    &.left-l
      left 70px
    &.left-ll
      left 240px
  .icon-arrow
    display inline-block
    margin-left 15px
    width 8px
    &.right
      transform rotateY(180deg)
  .control
    visibility hidden
    height 100px
    &.close
      width 70px
      transition width ease-in-out .2s
    &.open
      width 240px
      transition width ease-in-out .2s
  .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
    text-align center
    & + &
      margin-bottom 6px
  .active::after
    display block
    content ''
    background #1ABB9C
    width 5px
    position absolute
    right 0
    top 10px
    height 47px
  .childrens-meuns
    position absolute
    top 0
    left 70px
    bottom 0
    width 170px
    background #374A5E
    z-index -1
    zoom 1
    .children-item
      text-align left
      margin-bottom 6px
  .el-menu
    border-right none
    .el-submenu .el-menu-item
      min-width auto
  .el-menu-item
    position relative
    padding: 0 10px 0 36px
    box-sizing border-box
    &::before
      box-sizing border-box
      background #425668
      bottom auto
      content ""
      height 9px
      left 18px
      margin-top 20px
      position absolute
      right auto
      width 9px
      z-index 1
      border-radius 50%
    &::after
      box-sizing border-box
      border-left 1px solid #425668
      bottom 0
      content ""
      left 22px
      position absolute
      top 0
  .menu-item-name
    position relative
    display block
    font-weight 400
    font-size 10px
</style>
