<template>
  <div>
    <el-menu
      :default-active="defaultActive"
      background-color="#495060"
      text-color="#eee"
      :active-text-color="activeTextColor"
      :unique-opened="true">
      <template v-for="(item,index) in menuList">
        <!--不存在二级，只有一级菜单-->
        <el-menu-item
          :index="item.name"
          :key="index"
          @click.native="_goto(item.uri)"
          v-if="item.subMenus.length === 0"
          style="margin-left: -40px">
          <i class="iconfont font-size-common" :class="item.icon"></i>
          <span slot="title" style="padding-left: 6px;">{{ item.name }}</span>
        </el-menu-item>
        <!--有二级菜单-->
        <el-submenu :index="item.name" :key="index" v-else>
          <template slot="title">
            <i class="iconfont font-size-common" :class="item.icon"></i>
            <span style="padding-left: 6px;">{{ item.name }}</span>
          </template>
          <template v-for="(child,childIndex) in item.subMenus">
            <el-menu-item
              :index="child.name"
              :key="childIndex"
              @click.native="_goto(child.uri)">
              <i class="iconfont margin-left-20 font-size-common" :class="child.icon"></i>
              <span slot="title" style="padding-left: 6px;">{{ child.name }}</span>
            </el-menu-item>
          </template>
        </el-submenu>

      </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: ''
    }
  },
  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>
