<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;
}>();

// if (props.item.children) {
//   const tmp = props.item.children.filter((child) => !child.meta.hidden);
//   console.log(tmp);
// }

const currentRoute: RouteRecordRawWithMeta = props.item;

const showMode = ref<number>(0);

function filterShowChild(
  children?: RouteRecordRawWithMeta[]
): RouteRecordRawWithMeta[] {
  if (Array.isArray(children)) {
    const temp = children
      .filter((child) => !child.meta.hidden)
      .sort((a, b) => a.meta.sort - b.meta.sort);
    // if (temp.length === 1 && Array.isArray(temp[0].children)) {
    //   return filterShowChild(temp[0].children);
    // }
    return temp;
  } else {
    return [];
  }
}
const currentRouteShowChildren = filterShowChild(currentRoute.children);

// if (currentRouteShowChildren.length === 0) {
//   showMode.value = 1;
// } else if (currentRouteShowChildren.length === 1) {
//   showMode.value = 1;
// } else {
//   showMode.value = 2;
// }

if (currentRouteShowChildren.length === 0) {
  showMode.value = 1;
} else {
  showMode.value = 2;
}
</script>

<template>
  <template v-if="!item?.meta?.hidden">
    <template v-if="showMode==2">
      <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-if="showMode==1">
      <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>
:deep() {
  .el-menu-item,
  .el-sub-menu__title {
    font-size: 16px;
  }
}
.el-sub-menu.is-active :deep(.el-sub-menu__title) {
  color: var(--el-color-primary) !important;
}
.el-menu-item.is-active {
  color: var(--el-color-primary);
  background-color: #dff3ff;
  position: relative;
  //&::before{
  //  content: '';
  //  width: .25rem;
  //  height: 100%;
  //  position:absolute ;
  //  left: 0;
  //  top: 0;
  //  border-radius: 0px 25rem 25rem 0px;
  //  background-color: #fff;
  //}
}
</style>
