'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vueRouter = require('vue-router');
require('../../../../../stores/index.js');
require('../../../../../utils/index.js');
var other = require('../../../../../hooks/other.js');
var pinia = require('pinia');
var routesList = require('../../../../../stores/routesList.js');
var themeConfig = require('../../../../../stores/themeConfig.js');
var storage = require('../../../../../utils/storage.js');

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__ */ vue.defineComponent({
  __name: "breadcrumb",
  setup(__props) {
    const stores = routesList.useRoutesList();
    const storesThemeConfig = themeConfig.useThemeConfig();
    const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
    const { routesList: routesList$1 } = pinia.storeToRefs(stores);
    const route = vueRouter.useRoute();
    const router = vueRouter.useRouter();
    const state = vue.reactive({
      breadcrumbList: [],
      routeSplit: [],
      routeSplitFirst: "",
      routeSplitIndex: 1
    });
    const isShowBreadcrumb = vue.computed(() => {
      initRouteSplit(route);
      const { layout, isBreadcrumb } = themeConfig$1.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$1.value.isCollapse = !themeConfig$1.value.isCollapse;
      setLocalThemeConfig();
    };
    const setLocalThemeConfig = () => {
      storage.Local.remove("themeConfig");
      storage.Local.set("themeConfig", themeConfig$1.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$1.value.isBreadcrumb) return false;
      state.breadcrumbList = [];
      state.routeSplit = toRoute.path.split("/");
      state.routeSplit.shift();
      state.routeSplitFirst = `/${state.routeSplit[0]}`;
      state.routeSplitIndex = 1;
      getBreadcrumbList(routesList$1.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.default.setTagsViewNameI18n(route);
    };
    vue.onMounted(() => {
      initRouteSplit(route);
    });
    vueRouter.onBeforeRouteUpdate((to) => {
      initRouteSplit(to);
    });
    return (_ctx, _cache) => {
      const _component_SvgIcon = vue.resolveComponent("SvgIcon");
      const _component_el_breadcrumb_item = vue.resolveComponent("el-breadcrumb-item");
      const _component_el_breadcrumb = vue.resolveComponent("el-breadcrumb");
      return isShowBreadcrumb.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(_component_SvgIcon, {
          class: "layout-navbars-breadcrumb-icon",
          name: vue.unref(themeConfig$1).isCollapse ? "ele-Expand" : "ele-Fold",
          size: 16,
          onClick: onThemeConfigChange
        }, null, 8, ["name"]),
        vue.createVNode(_component_el_breadcrumb, { class: "layout-navbars-breadcrumb-hide" }, {
          default: vue.withCtx(() => [
            vue.createVNode(vue.TransitionGroup, { name: "breadcrumb" }, {
              default: vue.withCtx(() => [
                (vue.openBlock(true), vue.createElementBlock(
                  vue.Fragment,
                  null,
                  vue.renderList(state.breadcrumbList, (v, k) => {
                    return vue.openBlock(), vue.createBlock(
                      _component_el_breadcrumb_item,
                      {
                        key: v.path
                      },
                      {
                        default: vue.withCtx(() => [
                          k === state.breadcrumbList.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
                            vue.unref(themeConfig$1).isBreadcrumbIcon ? (vue.openBlock(), vue.createBlock(_component_SvgIcon, {
                              key: 0,
                              name: v.meta.icon,
                              class: "layout-navbars-breadcrumb-iconfont"
                            }, null, 8, ["name"])) : vue.createCommentVNode("v-if", true),
                            v.meta.title ? (vue.openBlock(), vue.createElementBlock(
                              "div",
                              _hoisted_3,
                              vue.toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
                              1
                              /* TEXT */
                            )) : (vue.openBlock(), vue.createElementBlock(
                              "div",
                              _hoisted_4,
                              vue.toDisplayString(v.meta.tagsViewName),
                              1
                              /* TEXT */
                            ))
                          ])) : (vue.openBlock(), vue.createElementBlock("a", {
                            key: 1,
                            onClick: vue.withModifiers(($event) => onBreadcrumbClick(v), ["prevent"]),
                            style: { "display": "flex" }
                          }, [
                            vue.unref(themeConfig$1).isBreadcrumbIcon ? (vue.openBlock(), vue.createBlock(_component_SvgIcon, {
                              key: 0,
                              name: v.meta.icon,
                              class: "layout-navbars-breadcrumb-iconfont"
                            }, null, 8, ["name"])) : vue.createCommentVNode("v-if", true),
                            vue.createTextVNode(
                              vue.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 */
        })
      ])) : vue.createCommentVNode("v-if", true);
    };
  }
});

exports.default = _sfc_main;
