<script setup lang="ts">
import { ref, onMounted } from "vue";
import { isExternal } from "@/utils/validate";
import AppLink from "./Link.vue";
import { generateTitle } from "@/utils/i18n";
import { useAppStore } from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const appStore = useAppStore();
defineProps({
  item: {
    type: Object,
    required: true,
  },
  isNest: {
    type: Boolean,
    required: false,
  },
  // basePath: {
  //   type: String,
  //   required: true,
  // },
});

const onlyOneChild = ref();

function hasOneShowingChild(children = [] as any, parent: any) {
  if (!children) {
    children = [];
  }
  const showingChildren = children.filter((item: any) => {
    if (item.meta && item.meta.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: any) {
  // if (isExternal(props.basePath)) {
  //   return props.basePath;
  // }
  if (routePath.islink == 0) {
    if (isExternal(routePath.opturl)) {
      return '';
    }
  }
  return routePath.opturl;
}
onMounted(() => {
  generateTitle
})
</script>
<template>
  <div v-if="!item.meta || !item.meta.hidden || item.isdisplay == '1'">
    <template v-if="
      hasOneShowingChild(item.children, item) &&
      (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
      (!item.meta || !item.meta.alwaysShow)
    ">
      <app-link v-if="onlyOneChild.meta || item.isdisplay == '1'" :to="resolvePath(onlyOneChild)">
        <el-menu-item :index="resolvePath(onlyOneChild)" :class="{ 'submenu-title-noDropdown': !isNest }"
          style="height: 44px;">
          <img v-if="onlyOneChild.icon && onlyOneChild.name == '首页'" src="@/assets/MenuIcon/dh_sy.png"
            style="margin-right:10px;width: 16px">
          <img v-if="onlyOneChild.icon && onlyOneChild.name !== '首页'" :src="url + '/menu/' + item.icon"
            style="margin-right:10px;width: 16px">
          <template #title>
            <span :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }">{{ generateTitle(onlyOneChild.name)
            }}</span>
          </template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else :index="resolvePath(item)" telested>
      <template #title>
        <div style="height: 44px; display: flex;display: -webkit-flex; align-items: center;-webkit-align-items: center;justify-content: space-around;">
          <img v-if="item.icon" :icon-class="item.icon" :src="url + '/menu/' + item.icon" alt=""
              style="margin-right:10px;width: 16px; " class="management">
          <span :style="{ fontSize: appStore.size === 'default' ? '14px' : '16px' }" style="display: block;" >{{
            generateTitle(item.name) }}</span>
        </div>
        <!-- <svg-icon v-if="item.icon" :icon-class="item.icon" :style="{fontSize: appStore.size === 'default' ? '14px' : '16px'}" /> -->

      </template>

      <sidebar-item v-for="child in item.children" :key="child.opturl" :item="child" :is-nest="true"
        :base-path="resolvePath(child)" />
    </el-sub-menu>
  </div>
</template>
<style scoped>
:deep(.el-sub-menu__title) {
  height: 44px !important;
}

:deep(.el-icon) {
  font-size: 16px;
}
:deep(.el-tooltip__trigger span) {
  display: none !important;
}
:deep(.el-tooltip__trigger .management) {
  margin-left:20px !important ;
}
:deep(.el-menu-tooltip__trigger){
  width: 105% !important;
}
</style>

