<template>
  <div>
    <el-menu
      :default-active="defaultActive"
      :unique-opened="true"
      background-color="#495060"
      text-color="#eee"
      active-text-color="#ffd04b">
      <template v-for="(item,index) in menuList">
        <!--不存在二级，只有一级菜单-->

        <!--有二级菜单-->
        <el-submenu :index="item.name" :key="index" v-if="item.leftMenus">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title"> {{item.name}}</span>
          </template>
          <template v-for="(child,childIndex) in item.leftMenus">
            <el-menu-item
              :index="child.name"
              :key="childIndex"
              @click.native="_goto(child.uri)">
              <i class="el-icon-menu"></i>
              <span slot="title"> {{child.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item
          :index="item.name"
          :key="index"
          @click.native="_goto(item.uri)"
          v-else>
          <i class="el-icon-menu"></i>
          <span slot="title"> {{item.name}}</span>
        </el-menu-item>

      </template>
    </el-menu>
  </div>
</template>

<script>
/**
 * * 展开时的菜单
 */

export default {
  // props: {
  //   menuList: Array,
  //   menuTheme: {
  //     type: String,
  //     default: 'dark'
  //   }
  // },
  props: ['menuList', 'menuTheme', 'activeTextColor'],
  data() {
    return {
      openNames: [],
      activeName: '',
      defaultActive: '',
      menuListCon: this.menuList
    }
  },
  watch: {
    $route(newRoute) {
      this._setDefaultMenu(newRoute)
    }
  },
  mounted() {
    this._setDefaultMenu(this.$route)
  },
  methods: {
    _goto(next) {
      this.$router.push(next)
    },
    _setDefaultMenu(route) {
      this.defaultActive = route.meta.title
    }
  }
}
</script>
