<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router'
import Item from './item.vue'
import MenuItem from './MenuItem.vue'
import { user } from "~/store/index";
const props = defineProps<{
  item: RouteRecordRaw
}>()
const notShow = computed(() => {
  const item = props.item
  if (item?.meta?.hidden)
    return false
  if (item?.name == 'home-zysh' || item?.name == 'home-zyflgl') {
    if (user.value?.user_role_id == '75') {
      if (item.meta?.hiddenJs)
        return false
    }
  }
  if (item?.name == 'home-szrdzgl' && user.value?.user_role_id != '72') {
    return false
  }
  return true
})
const currentRoute: RouteRecordRaw = props.item
const showRoute = ref<RouteRecordRaw>(currentRoute)

const showMode = ref<number>(0)

function filterShowChild(children?: RouteRecordRaw[]): RouteRecordRaw[] {
  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) {
  showRoute.value = currentRouteShowChildren[0]
  showMode.value = 1
}
else {
  showMode.value = 2
}
</script>

<template>
  <template v-if="(!item?.meta?.hidden) && notShow">
    <template v-if="showMode === 1">
      <AppLink :to="showRoute.name">
        <el-menu-item :index="showRoute.name">
          <Item :icon="showRoute?.meta?.icon" :img="showRoute?.meta?.img"
            :title="showRoute?.meta?.title || showRoute.name" />

        </el-menu-item>
      </AppLink>
    </template>

    <template v-if="showMode === 2">
      <el-sub-menu :index="showRoute.name">
        <template #title>
          <Item :icon="showRoute?.meta?.icon" :img="showRoute?.meta?.img" :title="showRoute?.meta?.title" />
        </template>

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

<style lang="scss" scoped>
:deep() {
  .el-menu-item {
    height: 48px;
    line-height: 48px;
    margin-bottom: 15px;
    color: #3f3f44;

    &.is-active,
    &:hover {
      color: unset;
      background: #cceabb;
      border-radius: 8px;
    }
  }
}
</style>
