<template>
  <el-sub-menu :index="parent.key">
    <template #title>
      <icon :name="parent.icon" :size="20" v-if="parent.icon"/>
      <span>{{ parent.title }}</span>
    </template>
    <template v-for="(item, key) in parent.children" :key="item.key">
      <el-menu-item v-if="!item.children" :index="item.key">
        <template #title>
          <icon :name="item.icon" :size="20" v-if="item.icon"/>
          <span>{{ item.title }}</span>
        </template>
      </el-menu-item>
      <re-sub-menu v-else :key="key" :parent="item" />
    </template>
  </el-sub-menu>
</template>

<script lang="ts">
  export default {
    name: 'ReSubMenu',
  };
</script>
<script lang="ts" setup>
  defineProps({
    parent: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
    },
  });
</script>
