<template>
  <div>
    <template v-for="(item, index) in menuList">
      <div :key="index" style="text-align: center;">
        <!--存在二级菜单-->
        <el-dropdown v-if="item.subMenus.length >0" :key="index" placement="right-start">
          <div style="width: 60px;margin-left: -5px;padding:15px 0;">
            <i class="el-icon-edit white-color" style="cursor: pointer"></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);_changeMenu(child)">
              <i class="el-icon-edit"></i>
              <span style="padding-left:10px;">{{ child.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--不存在二级菜单，只有一级菜单-->
        <el-tooltip
          v-else
          :content="item.name"
          placement="right"
          effect="light">
          <div
            style="width: 60px;margin-left: -5px;padding:15px 0;"
            @click="_goto(item.uri);_changeMenu(item)">
            <i class="el-icon-edit white-color" 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)
    },
    // 点击菜单
    _changeMenu(data) {
      this.$store.commit('createTag', data)
    }
  }
}
</script>
