<template>
  <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"   class="ff3">
    <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"  :target ="targetType(onlyOneChild)">
      <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" >
        <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
        <template #title>
          <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.aliasTitle ? onlyOneChild.meta.aliasTitle : onlyOneChild.meta.title }}</span>
        </template>
      </el-menu-item>
    </app-link>
  </template>
  <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" >
    <template v-if="item.meta" #title>
      <svg-icon :icon-class="item.meta && item.meta.icon"/>
      <span class="menu-title" :title="hasTitle(item.meta.aliasTitle ? item.meta.aliasTitle : item.meta.title)">{{ item.meta.aliasTitle ? item.meta.aliasTitle : item.meta.title }}</span>
    </template>
    <TopNavItem v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" ></TopNavItem>
  </el-sub-menu>
</template>
<script setup>
import { useSettingsStore } from "@/store/modules/index";
import AppLink from "./Link";
import { isExternal } from "@/utils/validate";
import { getNormalPath } from "@/utils/ruoyi";
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  isNest: {
    type: Boolean,
    default: false,
  },
  basePath: {
    type: String,
    default: "",
  },
});

const settingsStore = useSettingsStore();
const onlyOneChild = ref({});
function hasOneShowingChild(children = [], parent) {
  if (!children) {
    children = [];
  }
  const showingChildren = children.filter((item) => {
    if (item.hidden) {
      return false;
    } else {
      // Temp set(will be used if only has one showing child)
      onlyOneChild.value = item;
      return true;
    }
  });

  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
    return true;
  }

  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
    return true;
  }
  return false;
}

function resolvePath(routePath, routeQuery) {
  if (isExternal(routePath)) {
    return routePath;
  }
  if (isExternal(props.basePath)) {
    return props.basePath;
  }
  if (routeQuery) {
    let query = JSON.parse(routeQuery);
    return { path: getNormalPath(props.basePath + "/" + routePath), query: query };
  }

  return getNormalPath(props.basePath + "/" + routePath);
}

function hasTitle(title) {
  if (title.length > 5) {
    return title;
  } else {
    return "";
  }
}
/**
 * 页面打开方式
 */
 function targetType(item){
        if(item?.meta?.isNew || item?.meta?.isFrame == 0){
                return "_blank"
        }

}
function kk(e){
        console.log(e)
        var div = document.getElementsByClassName("el-menu--horizontal")
        console.log(div.queryS)
        var ul = document.querySelector(".el-menu--horizontal")
}

</script>
<style lang="scss">
@import "@/assets/styles/handle.scss";

//导航栏样式 开始
.el-menu-item,
.el-sub-menu__title {
  //字体无法选中
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 48px !important;
  line-height: 48px !important;
}

.topmenu-container.el-menu--horizontal,
.topmenu-container.el-menu--horizontal > a .el-menu-item,
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
  border-bottom: none !important;
}

.topmenu-container.el-menu--horizontal > a .el-menu-item.is-active,
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
  @include background_color("topMenuBackColorHover");
  @include border_color("topBorderColor");
}

.topmenu-container.el-menu--horizontal > a .el-menu-item,
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
  float: left;
  height: 55px !important;
  line-height: 55px !important;
  display: flex;
  justify-content: center;
  padding: 0 20px !important;
  &:hover {
    @include background_color("topMenuBackColorHover");
  }

  > .el-sub-menu__icon-arrow {
    width: 20px !important;
    position: relative;
    top: 0;
    right: 0;
    margin-top: 0;
  }
}

.svgWrap {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  .imgSvg {
    width: 12px;
    overflow: hidden;
    transform: translateX(20px);
  }
}

.el-popper {
  .el-menu-item,
  .el-sub-menu .el-sub-menu__title {
    color: #000 !important;
    .svgWrap .imgSvg {
      filter: drop-shadow(#000 -16px -19px 0px) !important;
    }
  }

  .el-menu-item.is-active,
  .el-sub-menu.is-active > .el-sub-menu__title {
    color: var(--el-color-primary) !important;
    .svgWrap .imgSvg {
      filter: drop-shadow(var(--el-color-primary) -16px -19px 0px) !important;
    }
  }

  .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    background-color: var(--el-menu-hover-bg-color);
    .svgWrap .imgSvg {
      filter: drop-shadow(#337ecc -16px -19px 0px);
    }
  }
}

.el-menu--horizontal .el-menu .el-sub-menu__title:not(.is-disabled):hover {
  background-color: var(--el-menu-hover-bg-color) !important;
}
.menu-title{
  margin-left:4px;
}
</style>
