<!-- 导航菜单 -->
<template>
<div class="menu-container"
     ref="menuRef">
  <el-menu mode="horizontal"
               :default-active="activeIndex"
               @select="handleSelect"
               router>
    <el-menu-item v-for="item in menuList"
                  :key="item.id"
                  :index="item.id">{{item.text}}</el-menu-item>
    <el-submenu v-if="menuMore.length > 0"
                index="more">
      <template slot="title">
        <span>更多</span>
      </template>
      <el-menu-item v-for="k in menuMore"
                    :key="k.id"
                    :index="k.id">{{k.text}}</el-menu-item>
    </el-submenu>
  </el-menu>
</div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: "1",
      menuData:[
        {id: "1",text: "处理中心"},
        {id: "2",text: "处理中心1"},
        {id: "3",text: "处理中心2"},
        {id: "4",text: "处理中心3"},
        {id: "5",text: "处理中心4"},
        {id: "6",text: "处理中心5"},
        {id: "7",text: "处理中心6"},
        {id: "8",text: "处理中心7"},
        {id: "9",text: "处理中心8"},
        {id: "10",text: "处理中心9"},
        {id: "11",text: "处理中心10"},
        {id: "12",text: "处理中心11"},
        {id: "13",text: "处理中心12"},
        {id: "14",text: "处理中心13"},
      ]
      menuList:[],
      menuMore: [],
      screenWidth: document.body.clientWidth,
    }
  },


  props: {

  },

  mounted () {
    let that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.clientWidth;
    })
    this.getWidthMenu()
  },


  methods: {
    handleSelect (menu) {
      console.log('menu', menu);
    },

    getWidthMenu () {
      let menuWidth = document.body.clientWidth
      let count = Math.floor(menuWidth / 120) //平均每个菜单的宽度
      let menuList = this.menuData.slice(0, count - 1)
      let menuMore = this.menuData.slice(count - 1)
      this.menuList = menuList
      this.menuMore = menuMore
    },
  },

  watch:{
     // 窗口高度改变
    screenWidth (val) {
      this.getWidthMenu()
    }
  }
}
</script>