import { jsx as o, jsxs as u } from "react/jsx-runtime";
import { useState as x, useRef as y, useEffect as E } from "react";
function k({ images: n = [], config: f = {}, isDragging: e = !1 }) {
  const [l, s] = x(0), r = y(null), {
    autoplay: i = !0,
    interval: d = 3e3,
    showDots: h = !0,
    effect: v = "fade"
  } = f;
  return E(() => {
    if (e || !i || n.length <= 1) {
      r.current && (clearInterval(r.current), r.current = null);
      return;
    }
    return r.current = setInterval(() => {
      s((a) => (a + 1) % n.length);
    }, d), () => {
      r.current && (clearInterval(r.current), r.current = null);
    };
  }, [i, d, n.length, e]), n.length === 0 ? /* @__PURE__ */ o("div", { style: {
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "#666",
    fontSize: "14px",
    border: "1px dashed #444",
    borderRadius: "4px",
    backgroundColor: "rgba(255, 255, 255, 0.02)",
    pointerEvents: "none"
    // 占位符不响应鼠标事件
  }, children: /* @__PURE__ */ o("span", { children: "轮播图（请添加图片）" }) }) : /* @__PURE__ */ u("div", { style: {
    width: "100%",
    height: "100%",
    position: "relative",
    overflow: "hidden",
    backgroundColor: "#000",
    pointerEvents: e ? "none" : "auto"
    // 拖拽时禁用鼠标事件
  }, children: [
    n.map((a, t) => /* @__PURE__ */ o(
      "div",
      {
        style: {
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          opacity: t === l ? 1 : 0,
          transition: e ? "none" : v === "fade" ? "opacity 0.5s ease-in-out" : "none",
          zIndex: t === l ? 1 : 0,
          pointerEvents: "none"
          // 图片不响应鼠标事件
        },
        children: /* @__PURE__ */ o(
          "img",
          {
            src: a,
            alt: `轮播图${t + 1}`,
            style: {
              width: "100%",
              height: "100%",
              objectFit: "cover",
              display: "block",
              pointerEvents: "none",
              // 图片不响应鼠标事件
              userSelect: "none"
              // 禁止选择
            },
            draggable: !1,
            onError: (b) => {
              const p = b.target;
              p.style.display = "none";
              const c = p.parentElement;
              c && (c.innerHTML = `
                                    <div style="
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: #2a2a2a;
                                        color: #999;
                                        font-size: 14px;
                                        pointer-events: none;
                                    ">
                                        图片加载失败
                                    </div>
                                `);
            }
          }
        )
      },
      t
    )),
    h && n.length > 1 && !e && /* @__PURE__ */ o("div", { style: {
      position: "absolute",
      bottom: "10px",
      left: "50%",
      transform: "translateX(-50%)",
      display: "flex",
      gap: "8px",
      zIndex: 10,
      padding: "5px 10px",
      backgroundColor: "rgba(0, 0, 0, 0.3)",
      borderRadius: "20px",
      pointerEvents: "none"
      // 拖拽时不响应鼠标事件
    }, children: n.map((a, t) => /* @__PURE__ */ o(
      "div",
      {
        onClick: () => !e && s(t),
        style: {
          width: "8px",
          height: "8px",
          borderRadius: "50%",
          backgroundColor: t === l ? "#1890ff" : "rgba(255,255,255,0.5)",
          cursor: e ? "default" : "pointer",
          transition: e ? "none" : "all 0.3s ease",
          transform: t === l ? "scale(1.2)" : "scale(1)",
          pointerEvents: e ? "none" : "auto"
        }
      },
      t
    )) }),
    !e && /* @__PURE__ */ u("div", { style: {
      position: "absolute",
      top: "10px",
      right: "10px",
      padding: "4px 8px",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      color: "#fff",
      fontSize: "12px",
      borderRadius: "4px",
      zIndex: 10,
      pointerEvents: "none"
    }, children: [
      l + 1,
      " / ",
      n.length
    ] })
  ] });
}
export {
  k as default
};
//# sourceMappingURL=Carousel-4jHALg7W.mjs.map
