<template>
  <div>
    <template v-for="(item, index) in menuList">
      <div style="text-align: center;" :key="index">
        <!--存在二级菜单-->
        <el-dropdown placement="right-start" :key="index" v-if="item.subMenus.length >0">
          <div style="width: 60px;margin-left: -5px;padding:15px 0;">
            <i class="iconfont white-color font-size-common" style="cursor: pointer;" :class="item.icon"></i>
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 200px;">
            <el-dropdown-item
              v-for="(child, i) in item.subMenus"
              :key="i"
              @click.native="_goto(child.uri)">
              <i class="iconfont font-size-common" :class="child.icon"></i>
              <span style="padding-left:5px;">{{ child.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--不存在二级菜单，只有一级菜单-->
        <el-tooltip
          :content="item.name"
          placement="right"
          effect="light"
          v-else>
          <div
            style="width: 60px;margin-left: -5px;padding:15px 0;"
            @click="_goto(item.uri)">
            <i class="iconfont white-color font-size-common" :class="item.icon" style="cursor: pointer;" ></i>
          </div>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ['menuList', 'menuTheme'],
  data() {
    return {
      iconColor: '#fff'
    }
  },
  methods: {
    _goto(next) {
      this.$router.push(next)
    }
  }
}
</script>
