import "../../../../../../node_modules/element-plus/es/index.mjs";
/* empty css                                                                */
/* empty css                                                                     */
/* empty css                                                                          */
import { ref, watch, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, createTextVNode, withCtx, Fragment, renderList, createBlock, withModifiers, createCommentVNode, toDisplayString } from "vue";
/* empty css                     */
import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
import { ElAnchor, ElAnchorLink } from "../../../../../../node_modules/element-plus/es/components/anchor/index.mjs";
const _hoisted_1 = { class: "anchor-nav" };
const _hoisted_2 = { key: 0 };
const _sfc_main = {
  __name: "RightAnchorNav",
  props: {
    links: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: [String, Number],
      default: ""
    },
    fecFormRef: {
      type: Object
    }
  },
  emits: ["change", "update:modelValue"],
  setup(__props, { emit: __emit }) {
    var _a;
    const props = __props;
    const anchorRef = ref();
    const emit = __emit;
    watch(
      () => props.links,
      (newLinks) => {
        if (newLinks.length && !props.modelValue) {
          emit("update:modelValue", newLinks[0].id);
        }
      },
      { immediate: true }
    );
    let isClickScrolling = false;
    function handleClick(e, link) {
      var _a2, _b;
      e.preventDefault();
      emit("update:modelValue", link.id);
      emit("change", link);
      const fecForm = (_b = (_a2 = anchorRef.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.closest(".fec-form");
      const element = fecForm == null ? void 0 : fecForm.querySelector(`#comp_${link.id}`);
      if (element) {
        isClickScrolling = true;
        element.scrollIntoView({ behavior: "smooth", block: "start" });
        waitScrollEnd(() => {
          isClickScrolling = false;
        });
      }
    }
    const scrollWrap = (_a = props.fecFormRef) == null ? void 0 : _a.$el.querySelector(".el-scrollbar__wrap");
    scrollWrap == null ? void 0 : scrollWrap.addEventListener("scroll", onScroll);
    function waitScrollEnd(callback) {
      let timer = null;
      if (!scrollWrap) return;
      const handler = () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          scrollWrap.removeEventListener("scroll", handler);
          callback();
        }, 150);
      };
      scrollWrap.addEventListener("scroll", handler);
    }
    function onScroll() {
      var _a2;
      if (isClickScrolling) return;
      const top = scrollWrap.scrollTop;
      let current = null;
      for (const item of props.links) {
        const el = document.getElementById(String(item.id));
        if (!el) continue;
        if (el.offsetTop - 70 <= top) current = item;
      }
      if (current) {
        emit("update:modelValue", current.id);
        (_a2 = anchorRef.value) == null ? void 0 : _a2.scrollTo(`#${current.id}`);
      }
    }
    onMounted(() => {
      var _a2;
      (_a2 = anchorRef.value) == null ? void 0 : _a2.scrollTo(`#${props.modelValue}`);
    });
    return (_ctx, _cache) => {
      const _component_el_anchor_link = ElAnchorLink;
      const _component_el_anchor = ElAnchor;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        _cache[0] || (_cache[0] = createElementVNode("div", { class: "anchor-title" }, [
          createElementVNode("div", { class: "label-line" }),
          createTextVNode(" 导航 ")
        ], -1)),
        createVNode(_component_el_anchor, {
          type: "underline",
          offset: 70,
          ref_key: "anchorRef",
          ref: anchorRef
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
              return openBlock(), createBlock(_component_el_anchor_link, {
                key: link.id,
                href: `#${link.id}`,
                onClick: withModifiers(($event) => handleClick($event, link), ["prevent"])
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(link.title) + " ", 1),
                  link.count ? (openBlock(), createElementBlock("span", _hoisted_2, "(" + toDisplayString(link.count) + ")", 1)) : createCommentVNode("", true)
                ]),
                _: 2
              }, 1032, ["href", "onClick"]);
            }), 128))
          ]),
          _: 1
        }, 512)
      ]);
    };
  }
};
const RightAnchorNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-298a5455"]]);
export {
  RightAnchorNav as default
};
