<script setup lang="ts">
import { ref } from 'vue'
import Item from './Item.vue'
import MenuItem from './MenuItem.vue'
import type { RouteRecordRawWithMeta } from '~/router/routes.d'

const props = defineProps<{
  item: RouteRecordRawWithMeta
}>()
</script>

<template>
  <template v-if="!item?.meta?.hidden">
    <template v-if="item?.children?.length">
      <el-sub-menu :index="item.name">
        <template #title>
          <Item :icon="item?.meta?.icon" :title="item.meta.title" />
        </template>

        <MenuItem v-for="route in item.children" :key="route.name" :item="route" />
      </el-sub-menu>
    </template>

    <template v-else>
      <AppLink :to="item.name">
        <el-menu-item :index="item.name">
          <Item :icon="item?.meta?.icon" :title="item?.meta?.title" />
        </el-menu-item>
      </AppLink>
    </template>
  </template>

  <template v-else>
    <template v-if="item?.children?.length">
      <MenuItem v-for="route in item.children" :key="route.name" :item="route" />
    </template>
  </template>
</template>

<style lang="scss" scoped>
.el-sub-menu.is-active :deep(.el-sub-menu__title){
  color: var(--el-menu-active-color)!important;
}

.el-menu-item.is-active {
  color: white;
  background-color: var(--el-menu-active-color);
  position: relative;
  &::before{
    content: '';
    width: .25rem;
    height: 100%;
    position:absolute ;
    left: 0;
    top: 0;
    border-radius: 0px 25rem 25rem 0px;
    background-color: #fff;
  }
}
</style>
