<template>
  <div class="left-menu-item">
    <template v-for="m in list" :key="m.path || m.id">
      <el-menu-item
        v-if="!m.children || m.children.length === 0"
        :index="m.path"
        :style="{ display: !m.meta?.hidden ? 'flex' : 'none' }"
      >
        <i :class="[m.meta?.icon]" v-if="m.meta?.icon" />
        <span v-if="!isCollapse" class="menu_span">{{ m.meta?.name }}</span>
      </el-menu-item>
      <el-sub-menu v-else :index="m.path">
        <template #title>
          <i :class="[m.meta?.icon]" v-if="m.meta?.icon" />
          <span v-if="!isCollapse" class="menu_span">{{ m.meta?.name }}</span>
        </template>
        <SidebarItem :list="m.children" :is-collapse="isCollapse" />
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { RouterItem } from '@/utils/crypto'

defineProps<{
  list: RouterItem[]
  isCollapse?: boolean
}>()
</script>

<style lang="less" scoped>
.left-menu-item {
  width: auto;
}

.menu_span {
  padding-left: 10px;
}
</style>
