<template lang="pug">
  el-container.header-container
    nav.header-nav.clear
      ul.clear
        li.nav-item.fl('@click'="handleShowMemus('show',$event)")
          a.link
            i.fa.fa-th-list
        li.nav-item.fl
          a.link
            i.fa.fa-th-large
        li.nav-item.fl
          a.link
            i.fa.fa-clock-o
        .history-links-preview.fl
          .history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}}
        li.nav-item.fr
          a.link
            img.user-img(':src'="user.headerImage")
            span.user-name {{user.name}}
            i.fa.fa-angle-down
        li.nav-item.fr
          a.link
            i.fa.fa-envelope-o
        li.nav-item.fr
          a.link
            i.fa.fa-comments
      el-row.meuns-nav
        el-menu&attributes({
          'default-active':"2",
          'class':"el-menu-vertical",
          '@open':"handleOpen",
          '@close':"handleClose",
        })
          el-submenu.menus-body.clear(index="1")
            el-menu-item-group.menus-groups.fl('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':"idx | pipeString(index)",
                'v-for':'(it,idx) in item.children',
                ':key':"idx"
              }) {{it.name}}
                el-menu-item-group.menus-tags('v-for'="(i,inx) in it.children",':key'="inx")
                  <!--template(slot="title") {{i.name}}-->
                  el-menu-item&attributes({
                    ':index':"inx | pipeString(index,idx)",
                    ':key':"inx"
                  }) {{i.name}}
</template>
<style lang="stylus">
  .header-container
    position fixed
    left 0
    right 0
    top 0
    z-index 99
    box-shadow 0 1px 1px rgba(0,0,0,.2)
  .header-nav
    position relative
    background #ededed
    width 100%
    margin-left  70px
    .el-submenu__title
      display none
    .nav-item
      display inline-block
      position relative
      .link
        position relative
        display block
        padding 13px 15px 12px
        font-weight 500
        margin-left 0
        line-height 32px
        color #5A738E
      i
        font-size 26px
        vertical-align middle
        margin-top -2px
  .history-links-preview
    margin-top 16px
    margin-left 15px
</style>
<style lang="stylus" scoped>
  .meuns-nav
    position absolute
    left 0
    right 0
    bottom 0
    top 70px
    z-index 9
  .menus-body
    display flex
  .menus-groups
    width 200px
  .main-menus
    color #2a3f54
    font-size 15px
    font-weight bold
    text-align left
  .history-item
    line-height 1.7
    border 1px solid #73879c
    padding 0 15px
    border-radius 12px
    color #73879c
    & + &
      margin-left 15px
    &:hover
      cursor pointer
      color inherit
      border-color inherit
      background-color inherit
  .user-img
    width 30px
    height 30px
    border-radius 50%
    vertical-align middle
    margin-right 10px
    margin-top 1px
  .user-name
    margin-right 5px
  i.fa.fa-angle-down
    font-size 15px
  .el-menu-item
    height auto
    line-height 1.5
</style>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'headerNav',
  data () {
    return {
      user: {
        headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
        name: '测试商户组'
      },
      historys: [{'name': '自动标签', 'index': '1,0,2', 'time': '2018-11-01 10:06:07'}, {'name': '快速查询', 'index': '1,0,0', 'time': '2018-10-31 17:17:09'}, {'name': '营销推送', 'index': '2,0,0', 'time': '2018-10-31 17:12:53'}, {'name': '会员圈选', 'index': '1,0,1', 'time': '2018-10-31 16:52:47'}, {'name': '概览', 'index': '0,0,0', 'time': '2018-10-31 13:31:59'}, {'name': '趋势', 'index': '0,1,0', 'time': '2018-10-29 15:52:31'}, {'name': '会员卡设置', 'index': '1,1,0', 'time': '2018-10-29 15:51:00'}, {'name': '生日营销(new)', 'index': '2,0,2', 'time': '2018-10-29 15:50:18'}]
    }
  },
  filters: {
    limit (array, num) {
      if (num) {
        return array
      }
      return array.slice(0, num)
    },
    pipeString (...args) {
      return args.join('-')
    }
  },
  props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
  computed: {
    historysLimit () {
      let historys = this.historys
      if (historys.length > 5) {
        return historys.slice(0, 5)
      } else {
        return [...historys]
      }
    },
    ...mapGetters({menus: 'getMenus'})
  },
  methods: {
    clickItem () {
      console.log(this)
    },
    handleOpen () {},
    handleClose () {},
    handleShowMemus (type) {
      this.$nextTick(() => {
        let dom = document.querySelector('.el-submenu__title')
        dom.click()
      })
    }
  }
}
</script>
