import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeStyle, unref, toDisplayString, createCommentVNode, createElementVNode, renderSlot } from "vue";
const judgePcOrH5 = () => {
  const userAgent = navigator.userAgent;
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    userAgent
  )) {
    return "Mobile";
  } else {
    return "PC";
  }
};
var index_vue_vue_type_style_index_0_lang = "";
const __default__ = {
  name: "WlSwipeCell"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    width: { default: 56 },
    buttonText: { default: "\u7F6E\u9876" },
    hideTop: { type: Boolean, default: false },
    noSliding: { type: Boolean, default: false },
    topButtonBgColor: { default: "#1c9fff" },
    topButtonBdColor: { default: "#1c9fff" },
    topButtonColor: { default: "#fff" }
  },
  emits: ["onAction"],
  setup(__props, { emit }) {
    const props = __props;
    const touchStartX = ref(0);
    const touchCurrentX = ref(0);
    const actionWidth = ref(props.width);
    const swipeWrapper = ref(null);
    const hasMoved = ref(false);
    const swipeThreshold = 50;
    const cssButtonColor = computed(() => {
      return {
        "--cssButtonBgColor": props.topButtonBgColor,
        "--cssButtonBdColor": props.topButtonBdColor,
        "--cssButtonColor": props.topButtonColor
      };
    });
    const cssButtonWidth = computed(() => {
      return { "--cssButtonWidth": props.width / 100 + "rem" };
    });
    const isPc = judgePcOrH5() === "PC";
    const onTouchStart = (event) => {
      if (props.noSliding || isPc)
        return;
      touchStartX.value = event.touches[0].clientX;
    };
    const onTouchMove = (event) => {
      if (props.noSliding || isPc)
        return;
      touchCurrentX.value = event.touches[0].clientX;
      const deltaX = touchStartX.value - touchCurrentX.value;
      hasMoved.value = true;
      if (deltaX > swipeThreshold) {
        swipeWrapper.value.style.transform = `translateX(-${Math.min(
          deltaX / 100,
          actionWidth.value / 100
        )}rem)`;
      }
    };
    const onTouchEnd = (event) => {
      if (props.noSliding || isPc) {
        hasMoved.value = false;
        return;
      }
      const deltaX = touchStartX.value - touchCurrentX.value;
      if (hasMoved.value) {
        if (deltaX > actionWidth.value / 2) {
          swipeWrapper.value.style.transform = `translateX(-${actionWidth.value / 100}rem)`;
        } else {
          swipeWrapper.value.style.transform = "translateX(0)";
        }
      }
      hasMoved.value = false;
    };
    const showTopButton = ref(false);
    let timer;
    const handleMouseEnter = () => {
      if (!isPc)
        return;
      timer = window.setTimeout(() => {
        showTopButton.value = true;
      }, 500);
    };
    const handleMouseLeave = () => {
      if (!isPc)
        return;
      window.clearTimeout(timer);
      showTopButton.value = false;
    };
    const actionHandle = () => {
      if (isPc) {
        showTopButton.value = false;
      }
      swipeWrapper.value.style.transform = "translateX(0)";
      emit("onAction", "");
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "swipe-container",
        "data-weiling-mobile-ui-wl-steps": "",
        onMouseenter: handleMouseEnter,
        onMouseleave: handleMouseLeave
      }, [
        !__props.hideTop && isPc ? (openBlock(), createElementBlock("span", {
          key: 0,
          class: "top-btn",
          style: normalizeStyle([unref(cssButtonColor), { opacity: showTopButton.value ? "1" : "0" }]),
          onClick: actionHandle
        }, toDisplayString(__props.buttonText), 5)) : createCommentVNode("", true),
        createElementVNode("div", {
          class: "swipe-wrapper",
          ref_key: "swipeWrapper",
          ref: swipeWrapper
        }, [
          createElementVNode("div", {
            class: "swipe-content",
            onTouchstart: onTouchStart,
            onTouchmove: onTouchMove,
            onTouchend: onTouchEnd
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 32)
        ], 512),
        createElementVNode("div", {
          class: "swipe-actions",
          style: normalizeStyle({ width: actionWidth.value / 100 + "rem" })
        }, [
          createElementVNode("div", {
            class: "action-wrapper",
            onClick: actionHandle
          }, [
            renderSlot(_ctx.$slots, "actions", {}, () => [
              createElementVNode("button", {
                class: "swipe-action",
                style: normalizeStyle(unref(cssButtonWidth))
              }, toDisplayString(__props.buttonText), 5)
            ])
          ])
        ], 4)
      ], 32);
    };
  }
});
var __uno = "";
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };
