import { defineComponent, defineAsyncComponent, ref, reactive, computed, onBeforeMount, watch, resolveComponent, withDirectives, openBlock, createElementBlock, createVNode, normalizeClass, withCtx, createBlock, unref, createCommentVNode, vShow } from 'vue';
import { storeToRefs } from 'pinia';
import '../../../../stores/index.mjs';
import emitter from '../../../../utils/mitt.mjs';
import { useRoutesList } from '../../../../stores/routesList.mjs';
import { useThemeConfig } from '../../../../stores/themeConfig.mjs';
import { useTagsViewRoutes } from '../../../../stores/tagsViewRoutes.mjs';

const _hoisted_1 = { class: "h100" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "aside",
  setup(__props) {
    const Logo = defineAsyncComponent(() => import('../logo/index.vue.mjs'));
    const Vertical = defineAsyncComponent(() => import('../navMenu/vertical.vue.mjs'));
    const layoutAsideScrollbarRef = ref();
    const stores = useRoutesList();
    const storesThemeConfig = useThemeConfig();
    const storesTagsViewRoutes = useTagsViewRoutes();
    const { routesList } = storeToRefs(stores);
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
    const state = reactive({
      menuList: [],
      clientWidth: 0
    });
    const setCollapseStyle = computed(() => {
      const { layout, isCollapse, menuBar } = themeConfig.value;
      const asideBrTheme = ["#FFFFFF", "#FFF", "#fff", "#ffffff"];
      const asideBrColor = asideBrTheme.includes(menuBar) ? "layout-el-aside-br-color" : "";
      if (state.clientWidth <= 1e3) {
        if (isCollapse) {
          document.body.setAttribute("class", "el-popup-parent--hidden");
          const asideEle = document.querySelector(".layout-container");
          const modeDivs = document.createElement("div");
          modeDivs.setAttribute("class", "layout-aside-mobile-mode");
          asideEle.appendChild(modeDivs);
          modeDivs.addEventListener("click", closeLayoutAsideMobileMode);
          return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-open"];
        } else {
          closeLayoutAsideMobileMode();
          return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-close"];
        }
      } else {
        if (layout === "columns" || layout === "classic") {
          if (isCollapse) return [asideBrColor, "layout-aside-pc-1"];
          else return [asideBrColor, "layout-aside-pc-240"];
        } else {
          if (isCollapse) return [asideBrColor, "layout-aside-pc-64"];
          else return [asideBrColor, "layout-aside-pc-240"];
        }
      }
    });
    const setShowLogo = computed(() => {
      let { layout, isShowLogo } = themeConfig.value;
      return isShowLogo && layout === "defaults" || isShowLogo && layout === "columns";
    });
    const closeLayoutAsideMobileMode = () => {
      const el = document.querySelector(".layout-aside-mobile-mode");
      el == null ? void 0 : el.setAttribute("style", "animation: error-img-two 0.3s");
      setTimeout(() => {
        var _a;
        (_a = el == null ? void 0 : el.parentNode) == null ? void 0 : _a.removeChild(el);
      }, 300);
      const clientWidth = document.body.clientWidth;
      if (clientWidth < 1e3) themeConfig.value.isCollapse = false;
      document.body.setAttribute("class", "");
    };
    const setFilterRoutes = () => {
      if (themeConfig.value.layout === "columns") return false;
      state.menuList = filterRoutesFun(routesList.value);
    };
    const filterRoutesFun = (arr) => {
      return arr.filter((item) => {
        var _a;
        return !((_a = item.meta) == null ? void 0 : _a.isHide);
      }).map((item) => {
        item = Object.assign({}, item);
        if (item.children) item.children = filterRoutesFun(item.children);
        return item;
      });
    };
    const initMenuFixed = (clientWidth) => {
      state.clientWidth = clientWidth;
    };
    const onAsideEnterLeave = (bool) => {
      let { layout } = themeConfig.value;
      if (layout !== "columns") return false;
      if (!bool) emitter.emit("restoreDefault");
      if (themeConfig.value.isColumnsMenuHoverPreload) stores.setColumnsMenuHover(bool);
    };
    onBeforeMount(() => {
      initMenuFixed(document.body.clientWidth);
      setFilterRoutes();
      emitter.on("setSendColumnsChildren", (res) => {
        state.menuList = res.children;
      });
      emitter.on("setSendClassicChildren", (res) => {
        let { layout, isClassicSplitMenu } = themeConfig.value;
        if (layout === "classic" && isClassicSplitMenu) {
          res.children.length <= 1 ? themeConfig.value.isCollapse = true : themeConfig.value.isCollapse = false;
          state.menuList = [];
          state.menuList = res.children;
        }
      });
      emitter.on("getBreadcrumbIndexSetFilterRoutes", () => {
        setFilterRoutes();
      });
      emitter.on("layoutMobileResize", (res) => {
        initMenuFixed(res.clientWidth);
        closeLayoutAsideMobileMode();
      });
    });
    watch(
      () => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
      ([isShowLogoChange, isShowLogo, layout, isClassicSplitMenu]) => {
        if (isShowLogoChange !== isShowLogo) {
          if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
        }
        if (layout === "classic" && isClassicSplitMenu) return false;
      }
    );
    watch(
      () => routesList.value,
      () => {
        setFilterRoutes();
      }
    );
    return (_ctx, _cache) => {
      const _component_el_scrollbar = resolveComponent("el-scrollbar");
      const _component_el_aside = resolveComponent("el-aside");
      return withDirectives((openBlock(), createElementBlock(
        "div",
        _hoisted_1,
        [
          createVNode(_component_el_aside, {
            class: normalizeClass(["layout-aside", setCollapseStyle.value])
          }, {
            default: withCtx(() => [
              setShowLogo.value ? (openBlock(), createBlock(unref(Logo), { key: 0 })) : createCommentVNode("v-if", true),
              createVNode(
                _component_el_scrollbar,
                {
                  class: "flex-auto",
                  ref_key: "layoutAsideScrollbarRef",
                  ref: layoutAsideScrollbarRef,
                  onMouseenter: _cache[0] || (_cache[0] = ($event) => onAsideEnterLeave(true)),
                  onMouseleave: _cache[1] || (_cache[1] = ($event) => onAsideEnterLeave(false))
                },
                {
                  default: withCtx(() => [
                    createVNode(unref(Vertical), {
                      menuList: state.menuList
                    }, null, 8, ["menuList"])
                  ]),
                  _: 1
                  /* STABLE */
                },
                512
                /* NEED_PATCH */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["class"])
        ],
        512
        /* NEED_PATCH */
      )), [
        [vShow, !unref(isTagsViewCurrenFull)]
      ]);
    };
  }
});

export { _sfc_main as default };
