import { defineComponent, ref, reactive, onMounted, onUnmounted, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, unref, createVNode, withCtx, Fragment, renderList, normalizeClass, toDisplayString, nextTick } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
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';

const _hoisted_1 = { class: "layout-columns-aside" };
const _hoisted_2 = { class: "layout-columns-logo" };
const _hoisted_3 = ["src"];
const _hoisted_4 = ["onClick", "onMouseenter", "title"];
const _hoisted_5 = { class: "columns-vertical-title font12" };
const _hoisted_6 = ["href"];
const _hoisted_7 = { class: "columns-vertical-title font12" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "columnsAside",
  setup(__props) {
    const columnsAsideOffsetTopRefs = ref([]);
    const columnsAsideActiveRef = ref();
    const stores = useRoutesList();
    const storesThemeConfig = useThemeConfig();
    const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      columnsAsideList: [],
      liIndex: 0,
      liOldIndex: null,
      liHoverIndex: null,
      liOldPath: null,
      difference: 0,
      routeSplit: []
    });
    const setColumnsAsideMove = (k) => {
      if (k === void 0) return false;
      state.liIndex = k;
      columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
    };
    const onColumnsAsideMenuClick = async (v) => {
      var _a, _b, _c;
      let { path, redirect } = v;
      if (redirect) {
        onColumnsAsideDown(v.k);
        if (route.path.startsWith(redirect)) emitter.emit("setSendColumnsChildren", setSendChildren(redirect));
        else router.push(redirect);
      } else {
        if (!v.children || ((_a = v.children) == null ? void 0 : _a.length) === 0) {
          router.push(path);
          onColumnsAsideDown(v.k);
        } else {
          const resData = setSendChildren(path);
          if (Object.keys(resData).length <= 0) return false;
          onColumnsAsideDown((_b = resData.item) == null ? void 0 : _b.k);
          emitter.emit("setSendColumnsChildren", resData);
        }
      }
      if (!v.children || ((_c = v.children) == null ? void 0 : _c.length) === 0) themeConfig.value.isCollapse = true;
      else if (v.children.length > 1) themeConfig.value.isCollapse = false;
    };
    const onColumnsAsideMenuMouseenter = (v, k) => {
      if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
      let { path } = v;
      state.liOldPath = path;
      state.liOldIndex = k;
      state.liHoverIndex = k;
      emitter.emit("setSendColumnsChildren", setSendChildren(path));
      stores.setColumnsMenuHover(false);
      stores.setColumnsNavHover(true);
    };
    const onColumnsAsideMenuMouseleave = async () => {
      if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
      await stores.setColumnsNavHover(false);
      setTimeout(() => {
        if (!isColumnsMenuHover && !isColumnsNavHover) emitter.emit("restoreDefault");
      }, 100);
    };
    const onColumnsAsideDown = (k) => {
      nextTick(() => {
        setColumnsAsideMove(k);
      });
    };
    const setMenuAutoCollaps = (path) => {
      var _a, _b;
      const resData = setSendChildren(path);
      !((_a = resData.item) == null ? void 0 : _a.redirect) && resData.children.length == 0 || ((_b = resData.item) == null ? void 0 : _b.redirect) && resData.children.length <= 1 ? themeConfig.value.isCollapse = true : themeConfig.value.isCollapse = false;
      return resData;
    };
    const setFilterRoutes = () => {
      var _a;
      state.columnsAsideList = filterRoutesFun(routesList.value);
      const resData = setMenuAutoCollaps(route.path);
      onColumnsAsideDown((_a = resData.item) == null ? void 0 : _a.k);
      setTimeout(() => {
        emitter.emit("setSendColumnsChildren", resData);
      }, 500);
    };
    const setSendChildren = (path) => {
      const currentPathSplit = path.split("/");
      let currentData = { children: [] };
      state.columnsAsideList.map((v, k) => {
        if (v.path === `/${currentPathSplit[1]}`) {
          v["k"] = k;
          currentData["item"] = { ...v };
          currentData["children"] = [{ ...v }];
          if (v.children) currentData["children"] = v.children;
        }
      });
      return currentData;
    };
    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 setColumnsMenuHighlight = (path) => {
      state.routeSplit = path.split("/");
      state.routeSplit.shift();
      const routeFirst = `/${state.routeSplit[0]}`;
      const currentSplitRoute = state.columnsAsideList.find((v) => v.path === routeFirst);
      if (!currentSplitRoute) return false;
      setTimeout(() => {
        onColumnsAsideDown(currentSplitRoute.k);
      }, 0);
    };
    onMounted(() => {
      setFilterRoutes();
      emitter.on("restoreDefault", () => {
        state.liOldIndex = null;
        state.liOldPath = null;
      });
    });
    onUnmounted(() => {
      emitter.off("restoreDefault", () => {
      });
    });
    onBeforeRouteUpdate((to) => {
      const resData = setMenuAutoCollaps(to.path);
      setColumnsMenuHighlight(to.path);
      emitter.emit("setSendColumnsChildren", resData);
    });
    watch(
      [() => themeConfig.value.columnsAsideStyle, isColumnsMenuHover, isColumnsNavHover],
      () => {
        themeConfig.value.columnsAsideStyle === "columnsRound" ? state.difference = 3 : state.difference = 0;
        if (!isColumnsMenuHover.value && !isColumnsNavHover.value) {
          state.liHoverIndex = null;
          emitter.emit("setSendColumnsChildren", setSendChildren(route.path));
        } else {
          state.liHoverIndex = state.liOldIndex;
          if (!state.liOldPath) return false;
          emitter.emit("setSendColumnsChildren", setSendChildren(state.liOldPath));
        }
      },
      {
        deep: true
      }
    );
    return (_ctx, _cache) => {
      const _component_SvgIcon = resolveComponent("SvgIcon");
      const _component_el_scrollbar = resolveComponent("el-scrollbar");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("img", {
            src: unref(themeConfig).logoUrl,
            class: "layout-columns-logo-medium-img"
          }, null, 8, _hoisted_3)
        ]),
        createVNode(_component_el_scrollbar, null, {
          default: withCtx(() => [
            createElementVNode(
              "ul",
              {
                onMouseleave: _cache[0] || (_cache[0] = ($event) => onColumnsAsideMenuMouseleave())
              },
              [
                (openBlock(true), createElementBlock(
                  Fragment,
                  null,
                  renderList(state.columnsAsideList, (v, k) => {
                    return openBlock(), createElementBlock("li", {
                      key: k,
                      onClick: ($event) => onColumnsAsideMenuClick(v),
                      onMouseenter: ($event) => onColumnsAsideMenuMouseenter(v, k),
                      ref_for: true,
                      ref: (el) => {
                        if (el) columnsAsideOffsetTopRefs.value[k] = el;
                      },
                      class: normalizeClass({ "layout-columns-active": state.liIndex === k, "layout-columns-hover": state.liHoverIndex === k }),
                      title: _ctx.$t(`message.menu.${v.meta.title}`)
                    }, [
                      !v.meta.isLink || v.meta.isLink && v.meta.isIframe ? (openBlock(), createElementBlock(
                        "div",
                        {
                          key: 0,
                          class: normalizeClass(unref(themeConfig).columnsAsideLayout)
                        },
                        [
                          createVNode(_component_SvgIcon, {
                            name: v.meta.icon
                          }, null, 8, ["name"]),
                          createElementVNode(
                            "div",
                            _hoisted_5,
                            toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
                            1
                            /* TEXT */
                          )
                        ],
                        2
                        /* CLASS */
                      )) : (openBlock(), createElementBlock(
                        "div",
                        {
                          key: 1,
                          class: normalizeClass(unref(themeConfig).columnsAsideLayout)
                        },
                        [
                          createElementVNode("a", {
                            href: v.meta.isLink,
                            target: "_blank"
                          }, [
                            createVNode(_component_SvgIcon, {
                              name: v.meta.icon
                            }, null, 8, ["name"]),
                            createElementVNode(
                              "div",
                              _hoisted_7,
                              toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
                              1
                              /* TEXT */
                            )
                          ], 8, _hoisted_6)
                        ],
                        2
                        /* CLASS */
                      ))
                    ], 42, _hoisted_4);
                  }),
                  128
                  /* KEYED_FRAGMENT */
                )),
                createElementVNode(
                  "div",
                  {
                    ref_key: "columnsAsideActiveRef",
                    ref: columnsAsideActiveRef,
                    class: normalizeClass(unref(themeConfig).columnsAsideStyle)
                  },
                  null,
                  2
                  /* CLASS */
                )
              ],
              32
              /* NEED_HYDRATION */
            )
          ]),
          _: 1
          /* STABLE */
        })
      ]);
    };
  }
});

export { _sfc_main as default };
