<template>
  <div class="layout-row-main">
    <div class="second-level-navbar">
      <el-toolbar>
        <span class="navbar-title">社交媒体</span>
      </el-toolbar>
      <div class="menu-wrap select-disable">
        <el-menu :default-active="activeMenu" class="layout-menu" @select="onSelectMenu">
          <el-menu-item :index="menu.meta.title" v-for="menu in showMenus" :key="menu.path">
            <i :class="menu.meta.icon"></i>{{menu.meta.title}}
          </el-menu-item>
        </el-menu>
      </div>

    </div>
        <router-view></router-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      menus: [],
      activeMenu: this.$route.meta.title
    }
  },
  computed: {
    showMenus() {
      return this.menus
    }
  },
  methods: {

    onSelectMenu(title) {
      let item = this.menus.find((val) => val.meta.title === title)
      if (item) {
        const path = item.path.replace(/:\w+\??/g, '')
        util.recordMenuClick(path)
        this.$router.push({path: path})
      }
    }
  },
  created() {
    this.menus = util.getSecondLevelMenus('/socialmedia') || []
    let path = location.hash.substring(1)
    let item = this.menus.find(val => path.indexOf(val.path) > -1)
    this.activeMenu = item && item.meta ? item.meta.title : this.activeMenu
  },
  beforeRouteUpdate(to, from, next) {
    let path = to.path
    let item = this.menus.find(val => val.path === path)

    if (item && item.meta) {
      this.activeMenu = item.meta.title
    }
    next()
  }

}
</script>
<style scoped>
.layout-row-main{
  position: relative;
}
.layout-menu {
  min-height:65vh
}
</style>
