<template lang="pug">
  el-container.header-container(:class="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}")
    nav.header-nav.clear
      ul.clearfix
        li.nav-item.fl('@click'="handleShowMenus('show',$event)")
          a.link
            i.fa.fa-th-list
        li.nav-item.fl(@click="handleEditMenus()")
          a.link
            i.fa.fa-th-large
        li.nav-item.fl
          el-popover(
          placement="bottom-end",
          :offset="100",
          :width="300",
          popper-class="historys-popper",
          trigger="click")
            .historys-body
              .history-list--item.clearfix(v-for='historyItem in historys ')
                .name.fl {{historyItem.name}}
                .time.fr {{historyItem.time}}
            a.link(slot="reference")
              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
          el-popover(
          placement="bottom-end",
          :offset="100",
          :width="150",
          popper-class="helpers-popper",
          trigger="click")
            .opration-body
              .opration-list--item.clearfix(v-for='opration in oprations ')
                .name.fl(@click="gotoPage(opration.link)") {{opration.name}}
            a.link(slot="reference")
              img.user-img(':src'="user.headerImage")
              span.user-name {{user.name}}
              i.fa.fa-angle-down
        li.nav-item.fr
          a.link(@click="showMessage()")
            i.fa.fa-envelope-o
        li.nav-item.fr
          el-popover(
          placement="bottom-end",
          :offset="100",
          :width="150",
          popper-class="helpers-popper",
          trigger="click")
            .helpers-body
              .helper-list--item.clearfix(v-for='help in helpers ')
                i.fa.fl.helper-item--icon(:class="help.icon",:style="help.style",style={width:'22px',height:'22px'})
                .name.fl {{help.name}}
            a.link(slot="reference")
              i.fa.fa-comments
      el-row.meuns-nav(v-show="showMenusPanel")
        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.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':"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':'setActiveStyle(i,$event)',
                    ':class':"{ active:formatPathString(index,idx,inx) === currentSelectIndex}"
                  }) {{i.name}}
</template>
<style lang="stylus">
  .header-container
    position fixed
    right 0
    top 0
    z-index 99
    box-shadow 0 1px 1px rgba(0,0,0,.2)
    .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
  .menus-body
    .el-menu
      margin-bottom 200px
  .header-nav
    position relative
    background #ededed
    width 100%
    .el-menu--inline
      display block !important
    .menus-tags
      .el-menu-item
        background #f5f5f5
        line-height 30px
        padding 0 10px
        color #2a3f54
        min-width 120px
        cursor pointer
        &:hover,
        &:focus
          background #f5f5f5
    .menus-groups
      & > .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;
      padding-left: 10px;
      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
      padding 0 10px !important
      &.active
        background: #1ABB9C !important
        color: #fff !important
</style>
<style lang="stylus" scoped>
  .meuns-nav
    position absolute
    left 0
    right 0
    height 1000px
    box-sizing border-box
    top 70px
    z-index 9
    overflow-y scroll
  .menus-body
    display flex
  .menus-groups
    width 200px
    border-right: 1px solid #ddd;
    margin: 15px 0;
    padding 1px
  .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
    overflow hidden
    text-align left
    &:hover,
    &:focus
      background none
  .history-list--item,
  .helper-list--item,
  .opration-list--item
    display flex
    justify-content flex-start
    align-items center
    box-sizing border-box
    font-size: 12px
    color: #5A738E
    width: 100%
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    cursor pointer
  .helper-list--item
    padding 5px 0
  .helper-item--icon
    display: flex;
    justify-content center
    align-items center
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
</style>

<style lang="scss">
.message-panel {
  top: 70px !important;
  padding-top: 0;
  &.el-notification {
    height: 864px;
    width: 420px;
    overflow: hidden;
  }
  &.el-message-box {
    width: auto;
  }
  .el-notification__group {
    width: 100%;
  }

  .el-notification__title {
    height: 40px;
    box-sizing: border-box;
    line-height: 1;
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    z-index: 2;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 16px;
  }

  .el-notification__closeBtn {
    z-index: 9;
  }
}
</style>
<script>
import { mapGetters, mapActions } from 'vuex'
import message from './message'
require('@/lib/slimscroll/slimscroll')
export default {
  name: 'headerNav',
  data () {
    return {
      showMenusPanel: false,
      showEditMenusPanel: false,
      showMessagePanelcontrol: null,
      currentSelectIndex: -1,
      oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
      helpers: [{
        name: '点击联系客服',
        icon: 'fa-qq',
        style: {background: '#ff9293', color: '#fff'}
      }, {name: '使用帮助',
        style: {background: '#40b0ff', color: '#fff'},
        icon: 'fa-info'},
      {name: '舞象客服',
        style: {background: '#e0e0e0', color: '#000'},
        icon: 'fa-user-circle-o'}],
      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',
      editMenus: 'getEditMenus',
      sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
    })
  },
  components: {
    message
  },
  mounted () {
    this.$nextTick(() => {
      this.initSlimscroll()
    })
  },
  methods: {
    ...mapActions([
      'showEditMenus',
      'hideEditMenus'
    ]),
    initSlimscroll () {
      $('.message-panel.el-notification').slimScroll({
        width: '100%', // 可滚动区域宽度
        height: '100%', // 可滚动区域高度
        size: '10px', // 滚动条宽度，即组件宽度
        color: '#000', // 滚动条颜色
        position: 'right', // 组件位置：left/right
        distance: '0px', // 组件与侧边之间的距离
        start: 'top', // 默认滚动位置：top/bottom
        opacity: 0.4, // 滚动条透明度
        alwaysVisible: true, // 是否 始终显示组件
        disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, // 是否 显示轨道
        railColor: '#333', // 轨道颜色
        railOpacity: 0.2, // 轨道透明度
        railDraggable: true, // 是否 滚动条可拖动
        railClass: 'slimScrollRail', // 轨道div类名
        barClass: 'slimScrollBar', // 滚动条div类名
        wrapperClass: 'slimScrollDiv', // 外包div类名
        allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, // 滚轮滚动量
        touchScrollStep: 200, // 滚动量当用户使用手势
        borderRadius: '7px', // 滚动条圆角
        railBorderRadius: '7px' // 轨道圆角
      })
    },
    clickItem () {
      console.log('this is header index %o', this)
    },
    showMessage () {
      if (this.showMessagePanelcontrol) {
        this.showMessagePanelcontrol.close()
        this.showMessagePanelcontrol = null
      } else {
        const h = this.$createElement
        this.showMessagePanelcontrol = this.$notify({
          title: '消息中心',
          message: h('message'),
          duration: 0,
          onClose: () => {
            this.showMessagePanelcontrol = null
          },
          customClass: 'message-panel'
        })
      }
    },
    handleOpen () {},
    handleClose () {},
    handleShowMenus () {
      this.showMenusPanel = !this.showMenusPanel
    },
    toggleMenus (...args) {
      console.log('this is header toggleMenus %o', args)
    },
    handleEditMenus () {
      if (!this.editMenus) {
        this.showEditMenus()
      } else {
        this.hideEditMenus()
      }
    },
    setActiveStyle (item, ev) {
      this.currentSelectIndex = ev.index
      console.log('this is header setActiveStyle %o', item)
    },
    formatPathString (...args) {
      return args.join('-')
    },
    gotoPage (link) {
      if (link) {
        location.href = link
      }
    }
  }
}
</script>
