import { defineComponent, ref, watch, onMounted, onActivated, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, normalizeProps, guardReactiveProps, withCtx, unref, createCommentVNode } from 'vue';
import { CaretTop } from '@element-plus/icons-vue';

const _hoisted_1 = {
  key: 0,
  class: "back_to_top"
};
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "FLayoutPage"
  },
  __name: "index",
  props: {
    keepScrollDisabled: { type: Boolean, default: false },
    isNoMargin: { type: Boolean, default: false },
    showGoTopButton: { type: Boolean, default: true },
    scrollToTop: { default: 100 }
  },
  setup(__props) {
    const props = __props;
    const isShowGoTopButton = ref(false);
    const FLayoutPageRef = ref(null);
    const scrollTop = ref(0);
    watch(
      () => scrollTop.value,
      (newVal) => {
        if (newVal > props.scrollToTop) {
          isShowGoTopButton.value = true;
        } else {
          isShowGoTopButton.value = false;
        }
      }
    );
    const backToTop = () => {
      scrollTop.value = 0;
      FLayoutPageRef.value.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    };
    onMounted(() => {
      const pageItems = FLayoutPageRef.value.querySelectorAll(".f_layout_page_item");
      if (pageItems.length === 2) {
        pageItems[0].style.marginBottom = "8px";
      }
      if (pageItems.length > 2) {
        pageItems.forEach((item) => {
          item.style.marginBottom = "8px";
        });
        pageItems[pageItems.length - 1].style.marginBottom = "0";
      }
    });
    onActivated(() => {
      if (!props.keepScrollDisabled) {
        ;
        FLayoutPageRef.value.scrollTop = scrollTop;
      }
    });
    return (_ctx, _cache) => {
      const _component_el_icon = resolveComponent("el-icon");
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "FLayoutPageRef",
          ref: FLayoutPageRef,
          class: normalizeClass(["f_layout_page", { layout_page_no_margin: __props.isNoMargin }]),
          onScroll: _cache[0] || (_cache[0] = (e) => scrollTop.value = e.target.scrollTop)
        },
        [
          renderSlot(_ctx.$slots, "default"),
          __props.showGoTopButton ? (openBlock(), createElementBlock("div", _hoisted_1, [
            isShowGoTopButton.value ? (openBlock(), createElementBlock("div", {
              key: 0,
              onClick: backToTop
            }, [
              createVNode(
                _component_el_icon,
                normalizeProps(guardReactiveProps({ size: 24, ..._ctx.$attrs })),
                {
                  default: withCtx(() => [
                    createVNode(unref(CaretTop))
                  ]),
                  _: 1
                  /* STABLE */
                },
                16
                /* FULL_PROPS */
              )
            ])) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true)
        ],
        34
        /* CLASS, NEED_HYDRATION */
      );
    };
  }
});

export { _sfc_main as default };
