import { defineComponent, reactive, computed, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, withCtx, TransitionGroup, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, withModifiers, createTextVNode } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import '../../../../../stores/index.mjs';
import '../../../../../utils/index.mjs';
import other from '../../../../../hooks/other.mjs';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '../../../../../stores/routesList.mjs';
import { useThemeConfig } from '../../../../../stores/themeConfig.mjs';
import { Local } from '../../../../../utils/storage.mjs';

const _hoisted_1 = {
  key: 0,
  class: "layout-navbars-breadcrumb"
};
const _hoisted_2 = {
  key: 0,
  class: "layout-navbars-breadcrumb-span"
};
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { key: 2 };
const _hoisted_5 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "breadcrumb",
  setup(__props) {
    const stores = useRoutesList();
    const storesThemeConfig = useThemeConfig();
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const { routesList } = storeToRefs(stores);
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      breadcrumbList: [],
      routeSplit: [],
      routeSplitFirst: "",
      routeSplitIndex: 1
    });
    const isShowBreadcrumb = computed(() => {
      initRouteSplit(route);
      const { layout, isBreadcrumb } = themeConfig.value;
      if (layout === "classic" || layout === "transverse") return false;
      else return isBreadcrumb ? true : false;
    });
    const onBreadcrumbClick = (v) => {
      const { redirect, path } = v;
      if (redirect) router.push(redirect);
    };
    const onThemeConfigChange = () => {
      themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
      setLocalThemeConfig();
    };
    const setLocalThemeConfig = () => {
      Local.remove("themeConfig");
      Local.set("themeConfig", themeConfig.value);
    };
    const getBreadcrumbList = (arr) => {
      arr.forEach((item) => {
        state.routeSplit.forEach((v, k, arrs) => {
          if (state.routeSplitFirst === item.path) {
            state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
            !state.breadcrumbList.find((a) => a.path === item.path) && state.breadcrumbList.push(item);
            state.routeSplitIndex++;
            if (item.children) getBreadcrumbList(item.children);
          }
        });
      });
    };
    const initRouteSplit = (toRoute) => {
      if (!themeConfig.value.isBreadcrumb) return false;
      state.breadcrumbList = [];
      state.routeSplit = toRoute.path.split("/");
      state.routeSplit.shift();
      state.routeSplitFirst = `/${state.routeSplit[0]}`;
      state.routeSplitIndex = 1;
      getBreadcrumbList(routesList.value);
      if (toRoute.name === "home" || toRoute.name === "notFound" && state.breadcrumbList.length > 1) state.breadcrumbList.shift();
      if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
    };
    onMounted(() => {
      initRouteSplit(route);
    });
    onBeforeRouteUpdate((to) => {
      initRouteSplit(to);
    });
    return (_ctx, _cache) => {
      const _component_SvgIcon = resolveComponent("SvgIcon");
      const _component_el_breadcrumb_item = resolveComponent("el-breadcrumb-item");
      const _component_el_breadcrumb = resolveComponent("el-breadcrumb");
      return isShowBreadcrumb.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_SvgIcon, {
          class: "layout-navbars-breadcrumb-icon",
          name: unref(themeConfig).isCollapse ? "ele-Expand" : "ele-Fold",
          size: 16,
          onClick: onThemeConfigChange
        }, null, 8, ["name"]),
        createVNode(_component_el_breadcrumb, { class: "layout-navbars-breadcrumb-hide" }, {
          default: withCtx(() => [
            createVNode(TransitionGroup, { name: "breadcrumb" }, {
              default: withCtx(() => [
                (openBlock(true), createElementBlock(
                  Fragment,
                  null,
                  renderList(state.breadcrumbList, (v, k) => {
                    return openBlock(), createBlock(
                      _component_el_breadcrumb_item,
                      {
                        key: v.path
                      },
                      {
                        default: withCtx(() => [
                          k === state.breadcrumbList.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, [
                            unref(themeConfig).isBreadcrumbIcon ? (openBlock(), createBlock(_component_SvgIcon, {
                              key: 0,
                              name: v.meta.icon,
                              class: "layout-navbars-breadcrumb-iconfont"
                            }, null, 8, ["name"])) : createCommentVNode("v-if", true),
                            v.meta.title ? (openBlock(), createElementBlock(
                              "div",
                              _hoisted_3,
                              toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
                              1
                              /* TEXT */
                            )) : (openBlock(), createElementBlock(
                              "div",
                              _hoisted_4,
                              toDisplayString(v.meta.tagsViewName),
                              1
                              /* TEXT */
                            ))
                          ])) : (openBlock(), createElementBlock("a", {
                            key: 1,
                            onClick: withModifiers(($event) => onBreadcrumbClick(v), ["prevent"]),
                            style: { "display": "flex" }
                          }, [
                            unref(themeConfig).isBreadcrumbIcon ? (openBlock(), createBlock(_component_SvgIcon, {
                              key: 0,
                              name: v.meta.icon,
                              class: "layout-navbars-breadcrumb-iconfont"
                            }, null, 8, ["name"])) : createCommentVNode("v-if", true),
                            createTextVNode(
                              toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
                              1
                              /* TEXT */
                            )
                          ], 8, _hoisted_5))
                        ]),
                        _: 2
                        /* DYNAMIC */
                      },
                      1024
                      /* DYNAMIC_SLOTS */
                    );
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 1
              /* STABLE */
            })
          ]),
          _: 1
          /* STABLE */
        })
      ])) : createCommentVNode("v-if", true);
    };
  }
});

export { _sfc_main as default };
