<template>
  <div>
    <div style="text-align: center">
      <img
        src="@/assets/image/lolo2.png"
        style="width: 136px; margin: 75px 0 60px 0"
        alt=""
      />
    </div>
    <template v-for="(item, i) in routesData">
      <el-submenu
        v-if="item.children && item.children.length > 0 && !item.hidden"
        :aaa="String(item.id)"
        :index="String(item.id)"
        :key="i"
      >
        <template slot="title">
          <span>
            <i :class="item.meta.icon" class="iconfont"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </span>
        </template>
        <submenu :routes-data="item.children"></submenu>
      </el-submenu>
      <el-tooltip
        v-else-if="!item.hidden"
        :content="item.meta.title"
        placement="top"
        :disabled="item.name == 'productType' ? false : true"
        effect="dark"
        :key="i"
      >
        <el-menu-item
          :aaa="String(item.id)"
          :index="item.path"
          @click="changeMenu(item)"
          :key="item.name"
        >
          <span class="icon_left"> </span>
          <i :class="item.meta.icon" class="iconfont"></i>
          <span slot="title">
            {{ item.meta.title }}
          </span>
        </el-menu-item>
      </el-tooltip>
    </template>
  </div>
</template>

<script>
export default {
  name: 'menuList',
  components: {
    submenu: () => import('@/layout/components/Sidebar/menuList.vue')
  },
  data() {
    return {}
  },
  props: {
    routesData: {
      type: Array,
      default: () => {}
    }
  },
  methods: {
    // 切换菜单
    changeMenu(currentMenu) {
      this.$router.push(currentMenu.path)
      sessionStorage.setItem('currentPage', currentMenu.path)
    }
  }
}
</script>
