<style lang="less" scoped>
  @import './cmenu.less';
</style>
<template>
  <div class="cmenu-wrap">
    <el-menu :default-active="currentMenu" :default-openeds="actives"
      class="el-menu-vertical-demo" router>
      <el-menu-item v-for="menu in menus" v-if="menu.isChild"
        :index="menu.url" :key="menu.id" router>
        <i :class="menu.icon"></i>&nbsp;&nbsp;{{menu.name}}
      </el-menu-item>
      <el-submenu :index="menu.id" v-else>
        <template slot="title">
          <i :class="menu.icon"></i>&nbsp;&nbsp;{{menu.name}}
        </template>
        <el-menu-item v-for="child in menu.children"
          :index="child.url" :key="child.id">
          {{child.name}}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
  import api from '@/config/a-config'
  import store from './store'

  export default {
    name: 'cmenu',
    data () {
      return {
        actives: [],
        menus: [],
        currentMenu: '',
        view: this.$store.state.cmenu
      }
    },
    beforeCreate () {
      this.$store.registerModule('cmenu', store)
    },
    destroyed () {
      this.$store.unregisterModule('cmenu')
    },
    created () {
      // 获取菜单数据
      this.currentMenu = this.$route.path
      this.$store.dispatch('COMMON_API_ACTION', {
        me: this,
        url: api.menu.getMenuData,
        params: {}
      }).then((res) => {
        this.menus = res.data
        for (let item of this.menus) {
          this.actives.push(item.id)
        }
      }).catch((error) => {
        this.$message.error(error.message)
      })
    }
  }
</script>
