<template>
  <el-menu-item v-if="!props.children?.length" :index="props.index">
    <template #title>
      <span>{{ props.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else-if="props.children.length" :index="props.index + props.title">
    <template #title>
      <span>{{ props.title }}</span>
    </template>
    <KlMenuItem v-for="menu in props.children" :key="menu.path" :title="menu.meta?.title || ''" :children="menu.children" :index="menu.path"></KlMenuItem>
  </el-sub-menu>
</template>

<script lang="ts" setup>
  import { PropType } from 'vue'
  import { RouteRecordRaw } from 'vue-router'

  const props = defineProps({
    title: {
      type: String as PropType<string>,
      default: '',
    },
    children: {
      type: Array as PropType<RouteRecordRaw[]>,
      default: () => [],
    },
    index: {
      type: String as PropType<string>,
      default: '',
    },
  })
</script>

<style lang="scss" scoped>
  ::v-deep(.el-sub-menu) {
    .el-menu-item {
      display: flex;
      span {
        text-indent: 6px;
        flex: 1;
        position: relative;
        z-index: 1;
      }
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #bcbfc5;
        border-radius: 10px;
        margin-left: -4px;
        position: relative;
        z-index: 2;
      }
    }
  }
</style>
