<template lang="pug">
  .menus-templete
    //-  快捷菜单设置菜单，有确定，取消按钮
    el-row.meuns-nav
      el-menu(@click="toggleMenus($event)")&attributes({
        'default-active':"2",
        'class':"el-menu-vertical",
        '@open':"handleOpen",
        '@close':"handleClose",
        'text-color':'#2a3f54',
        'active-text-color':'#fff'
      })
        el-submenu.menus-body.clear(index="1")
          el-menu-item-group.menus-groups('v-for'="(item,index) in menus",':key'="index")
            template(slot="title")
              .main-menus
                i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
                span.main-menus-title {{item.name}}
            el-menu-item&attributes({
              ':index':"formatPathString(index,idx)",
              'v-for':'(it,idx) in item.children',
              ':key':"idx"
            })
              el-menu-item-group.menus-tags
                template(slot="title")
                  span {{it.name}}
                el-menu-item&attributes({
                  'v-for':'(i,inx) in it.children',
                  ':index':"formatPathString(index,idx,inx)",
                  ':key':"inx",
                  '@click':'selectHandle(i,$event)',
                  ':class':"{ active: selectList.indexOf(formatPathString(index,idx,inx)) > -1 }"
                }) {{i.name}}
</template>
<style lang="stylus">
  .menus-templete
    overflow auto
    padding-bottom 80px
    height 700px
    min-width 1280px
    .el-menu--inline
      display block
    .menus-body
      & > ul
        display flex !important
        flex-wrap nowrap
        flex 1
        flex-direction row
        &:before,
        &:after
          display none
      .el-menu
        margin-bottom 0
    .menus-tags
      .el-menu-item
        background #f5f5f5
        line-height 30px
        padding 0 10px
        color #2a3f54
        min-width 120px
        width auto
        cursor pointer
        &:hover,
        &:focus
          background #f5f5f5
    .menus-groups
      & > ul
        display flex
        flex-wrap wrap
      & > .el-menu-item-group__title
        &:before
          display none
    .el-submenu__title
      display none
    .el-menu-item-group__title
      position relative
      padding-left 10px !important
      margin-left 10px
      color: #2a3f54;
      font-size: 14px;
      font-weight: bold;
      position: relative;
      &::before
        content ''
        position absolute
        width 4px
        height 4px;
        border-radius 50%
        left 0
        top 50%
        margin-top -2px
        background #2a3f54
    .main-menus-title
      font-size 15px
    .el-menu-item
      display: flex
      padding 0 10px !important
      &.active
        background: #1ABB9C !important
        color: #fff !important
  .fixed-footer
    position fixed
    display flex
    justify-content center
    align-items center
    bottom 0
    width 100%
    background #fff
    height 50px
</style>
<style lang="stylus" scoped>
  .meuns-nav
    position relative
    overflow auto
  .el-submenu,
  .el-menu-item
    min-width 120px
  .menus-body
    display flex
    flex-direction row
  .menus-groups
    border-right: 1px solid #ddd;
    margin: 15px 0;
    padding 1px
    max-width 356px
  .main-menus
    color #2a3f54
    font-size 15px
    font-weight bold
    text-align left
  .el-menu-item
    height auto
    line-height 1.5
    overflow hidden
    text-align left
    &:hover,
    &:focus
      background none
</style>
<script>
export default {
  name: 'menusTemplete',
  data () {
    return {
      currentSelectIndex: -1,
      num: 3
    }
  },
  props: {
    selectList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  filters: {
    limit (array, num) {
      if (num) {
        return array
      }
      return array.slice(0, num)
    },
    pipeString (...args) {
      return args.join('-')
    }
  },
  computed: {
    menus () {
      const names = ['会员中心', '营销中心', '销售中心', '渠道中心', '系统设置', '平台管理'] // '智能营销', '分析师'
      return this.$store.state.global.menus.filter(item => names.indexOf(item.name) > -1)
    }
  },
  methods: {
    clickItem () {
      console.log(this)
    },
    handleOpen () {},
    handleClose () {},
    handleShowMenus () {
      this.showMenusPanel = !this.showMenusPanel
    },
    toggleMenus (...args) {
      console.log(args)
    },
    handleEditMenus () {},
    selectHandle (item, vNode, ...args) {
      this.currentSelectIndex = args.join('-')
      this.$emit('choose', {item, vNode})
    },
    formatPathString (...args) {
      return args.join('-')
    }
  }
}
</script>
