<template>
  <el-badge
    v-if="!item.hidden"
    :hidden="
      ![
        `/approval/list`,
        `/approval/dataList/approval`,
        `/auditing/achievement`,
        `/auditing/demand`,
        `/auditing/serviceDemand`,
        `/auditing/Enterpriseproducts`,
        `/approval/data-list/laboratory`,
      ].includes(basePath)
    "
    class="count-badge"
  >
<!--    FIXME:无限递归bug-->
<!--    :value="getCount(basePath)"-->
    <div>
      <template
        v-if="
          hasOneShowingChild(item.children, item) &&
          (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
          !item.alwaysShow
        "
      >
        <app-link
          v-if="onlyOneChild.meta"
          :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"
        >
          <el-menu-item
            :class="{ 'submenu-title-noDropdown': !isNest }"
            :index="resolvePath(onlyOneChild.path)"
            :style="{
              paddingRight: '0px',
            }"
          >
            <svg-icon
              :icon-class="
                onlyOneChild.meta.icon || (item.meta && item.meta.icon)
              "
            />
            <template #title
              ><span
                :title="hasTitle(onlyOneChild.meta.title)"
                class="menu-title"
                >{{
                  ["/auditing/serviceDemand"].includes(basePath)
                    ? `${onlyOneChild.meta.title} (${userStore.serviceDemandTotal})`
                    : ["/auditing/achievement"].includes(basePath)
                    ? `${onlyOneChild.meta.title} (${userStore.achievementTotal})`
                    : ["/auditing/demand"].includes(basePath)
                    ? `${onlyOneChild.meta.title} (${userStore.technologyTotal})`
                    : ["/auditing/Enterpriseproducts"].includes(basePath)
                    ? `${onlyOneChild.meta.title} (${userStore.productTotal})`
                    : onlyOneChild.meta.title
                }}</span
              ></template
            >
          </el-menu-item>
        </app-link>
      </template>

      <el-sub-menu
        v-else
        ref="subMenu"
        :index="resolvePath(item.path)"
        popper-append-to-body
      >
        <template v-if="item.meta" #title>
          <svg-icon :icon-class="item.meta && item.meta.icon" />
          <span :title="hasTitle(item.meta.title)" class="menu-title">{{
            item.meta.title
          }}</span>
        </template>

        <sidebar-item
          v-for="child in item.children"
          :key="child.path"
          :base-path="resolvePath(child.path)"
          :is-nest="true"
          :item="child"
          class="nest-menu"
        />
      </el-sub-menu>
    </div>
  </el-badge>
</template>

<script setup>
import { isExternal } from "@/utils/validate";
import AppLink from "./Link";
import { getNormalPath } from "@/utils/ruoyi";
import useUserStore from "@/store/modules/user";

const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true,
  },
  isNest: {
    type: Boolean,
    default: false,
  },
  basePath: {
    type: String,
    default: "",
  },
});
// console.log(props.basePath);
// const userStore = useUserStore();
const onlyOneChild = ref({});
const userStore = useUserStore();

const getCount = (basePath) => {
  if (basePath == "/approval/list") {
    return userStore.unApprovedBusiness;
  } else if (props.basePath == "/approval/dataList/approval") {
    return userStore.unApprovedExpert;
  } else if (props.basePath == "/auditing/achievement") {
    return userStore.unApprovedAchivement;
  } else if (props.basePath == "/auditing/demand") {
    return userStore.unApprovedTechnology;
  } else if (props.basePath == "/auditing/Enterpriseproducts") {
    return userStore.unApprovedProduct;
  } else if (props.basePath == "/auditing/serviceDemand") {
    return userStore.unApprovedService;
  } else if (props.basePath === "/approval/data-list/laboratory") {
    return userStore.unApprovedLab;
  } else {
    return 0;
  }
};

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 "";
  }
}
</script>
<style lang="scss">
.count-badge {
  width: 100%;

  .el-badge__content {
    // margin-right: 20px;
    top: 8px !important;
    right: 36px !important;
  }
}
</style>
