<template>
  <div>
    <div v-for="itemssss in item" :key="itemssss.level" :class="{flexgrow:itemssss.div_class == null}">
      <div v-if="itemssss.menu_url != null">
        <el-menu-item :index="itemssss.title_en" :indexPath="itemssss.menu_url">
          <el-icon v-if="itemssss.menu_icon != null" class="image">
            <component :is="itemssss.menu_icon" style="width: 33px;height: 33px"></component>
          </el-icon>
          <span style="font-size: 24px">{{ itemssss.menu_name }}</span>
        </el-menu-item>
      </div>
      <div v-if="itemssss.menu_url == null">
        <div class="flex-grow"/>
        <el-submenu :index="itemssss.title_en">
          <template #title>
            <el-icon v-if="itemssss.menu_icon != null" class="image">
              <component :is="itemssss.menu_icon" style="width: 33px;height: 33px"></component>
            </el-icon>
            <span v-if="itemssss.menu_name != null" style="font-size: 24px">{{ itemssss.menu_name }}</span>
          </template>
          <div
              v-if="itemssss.children && itemssss.children.length != 0"
          >
            <subMenu :item="itemssss.children"></subMenu>
          </div>
        </el-submenu>
      </div>
    </div>
  </div>
</template>

<script src="./submenuTop.js"></script>

<style src="./submenuTop.css" scoped></style>