<template>
  <div class="navbar-menu">
    <el-menu
      :default-active="customActiveMenu || activeMenu"
      unique-opened
      mode="horizontal"
    >
      <navbar-item v-for="(item,index) in renderMenu" :key="index" :item="item" :index="index" />
    </el-menu>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import NavbarItem from './NavbarItem'
  import variables from '@/styles/variables.scss'
  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

  export default {
    components: { NavbarItem },
    props: {
      menus: {
        type: Array,
        default: []
      },
      customActiveMenu: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        renderMenu: []
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      activeMenu() {
        if (this.$route.meta.activeMenu) {
          return this.$route.meta.activeMenu
        }
        return this.$route.path
      },
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      }
    },
    watch: {
      menus() {
        this.setMenus()
      }
    },
    mounted() {
      setTimeout(() => {
        this.setMenus()
      }, 200)
      addResizeListener(this.$el, this.setMenus)
    },
    beforeDestroy() {
      removeResizeListener(this.$el, this.setMenus)
    },
    methods: {
      setMenus() {
        const wrapperW = this.$el.offsetWidth
        const topMenu = []
        const otherMenu = []
        let nowW = 0
        this.menus.forEach(item => {
          nowW += this.getItemW(item)
          if (nowW + 100 > wrapperW) {
            otherMenu.push(item)
          } else {
            topMenu.push(item)
          }
        })
        if (otherMenu.length > 0) {
          topMenu.push({
            title: '...',
            routePath: '/',
            children: otherMenu
          })
        }
        this.renderMenu = topMenu
      },
      getItemW(item) {
        // 20 14 8 20
        let w = 0
        if (item.icon) w += 22 // 图标长度
        if (item.children) w += 20 // 右边下箭头
        w += item.title.length * 14 // 文字长度
        w += 40 // padding
        return w
      }
    }
  }
</script>
<style lang="scss" scoped>
  .navbar-menu {
    flex: 1;
    & ::v-deep .el-menu.el-menu--horizontal {
      display: flex;
      border-bottom: none;
      .el-submenu__title {
        border-bottom-style: solid;
        border-bottom-width: 2px;
      }
    }
    & ::v-deep .el-menu-item {
      padding: 0;
      & > a {
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 0 20px;
      }
    }
  }
</style>
