<template>
  <div>
    <ul class="menu">
      <template v-for="(menu, idx) in menus">
        <li :key="idx" :class="['menu-item ', actived === menu.name ? 'actived' : '']" v-if="!menu.hidden" @mouseover="mouseover(menu)">
          <div>
            <i v-if="menu.meta.icon" :class="['iconfont', menu.meta.icon]"></i>
            <span class="menu-title">{{ menu.meta.title }}</span>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.menu {
  list-style: none;
  width: 60px;
  padding: 10px 0 0 0;
  margin: 0;
  overflow-x: hidden;
}
.menu .menu-item {
  font-size: 26px;
  color: #797979;
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
}
.menu .menu-item.actived {
  position: relative;
  color: #4178d5;
}
.menu .menu-item.actived::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  height: 100%;
  border-right: 4px solid #4178d5;
}
.menu i.iconfont {
  font-size: 22px;
}
.menu .menu-title {
  display: block;
  font-size: 14px;
}
</style>
<script>
export default {
  name: 'Menu',
  data() {
    return {
      actived: this.$route.name
    }
  },
  props: {
    menus: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    mouseover: function (menu) {
      this.$emit('change', menu)
      this.actived = menu.name
    }
  }
}
</script>
