tiefen_space_h5/components/ImagesMask/index.jsx

"use client";

import React, {
  useState,
  useEffect,
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { createRoot } from "react-dom/client";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
const root = createRoot(document?.getElementById("maskDomBox"));
function ImagesMask({}, ref) {
  const [visible, setVisible] = useState(false);
  const [images, setImages] = useState([]);
  const [data, setData] = useState(null);
  const scrollRef = useRef(null);
  const defaultIndex = useRef(null);
  const router = useRouter();
  useEffect(() => {
    root.render(
      <div>
        <ImagesMaskContaint
          images={images}
          visible={visible}
          ref={scrollRef}
          setVisible={setVisible}
          setImages={setImages}
          router={router}
          data={data}
          defaultIndex={defaultIndex.current}
        />
      </div>
    );
    // root.render(<div>xxxx</div>);
  }, [visible]);

  useImperativeHandle(ref, () => ({
    show: (arr, index, data) => {
      defaultIndex.current = index;
      setImages(arr);
      setData(data);
      setVisible((old) => {
        console.log(arr, index, old);
        return !old;
      });

      // Mask.show
      // const maskDomBox = document.getElementById("maskDomBox");
    },
    close: () => setVisible(false),
  }));

  return <></>;
}

const ImagesMaskContaint = forwardRef(
  (
    { visible, images, setVisible, setImages, router, data, defaultIndex = 0 },
    ref
  ) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [distance, setDistance] = useState(0);
    const [direction, setDirection] = useState("left");
    const [initialX, setInitialX] = useState(0);
    const [currentX, setCurrentX] = useState(0);
    const [xOffset, setXOffset] = useState(0);
    const [active, setActive] = useState(false);
    const base = baseRequest();
    const getDistance = (e) => {
      e.stopPropagation();
      const distance = ref.current.scrollLeft;
      setDistance(distance);
    };
    useEffect(() => {
      setCurrentIndex(defaultIndex);
      setTimeout(() => {
        // console.log("ref.current", ref.current);
        if (ref.current) {
          ref.current.style.transform = `translateX(${
            -window.innerWidth * defaultIndex
          }px)`;
        }
      }, 100);
    }, [defaultIndex]);
    useEffect(() => {
      console.log("ref.current", ref.current);
      if (ref.current) {
        ref.current.style.transform = `translateX(${
          -window.innerWidth * currentIndex
        }px)`;
      }
    }, [currentIndex]);
    const test1 = (e) => {
      console.log(
        e.touches[0].clientX - (!currentIndex ? 0 : xOffset),
        e.touches[0].clientX,
        xOffset
      );
      setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset));
      if (e.touches.length === 1) {
        // 单点触摸
        setActive(true);
      }
    };
    const test2 = (e) => {
      if (active) {
        // e.preventDefault();
        let X =
          e.touches[0].clientX -
          window.innerWidth * (currentIndex ? 1 : currentIndex + 1);
        console.log("-----", e.touches[0].clientX, initialX, currentIndex);
        setCurrentX((old) => {
          setDirection(X > old ? "right" : "left");
          return X;
        });
        setXOffset(X);
        ref.current.style.transform = "translateX(" + X + "px)";
      }
    };
    const test3 = (index) => {
      console.log("index", index);
      // setInitialX(currentX);
      setActive(false);
      let cxOffset = window.innerWidth;
      console.log(direction, index, images.length - 1);
      if (direction == "left") {
        if (index < images.length - 1) {
          setCurrentIndex(index + 1);
          console.log(index + 1);
        } else {
          ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
        }
      } else {
        if (index > 0) {
          setCurrentIndex(index - 1);
          console.log(index - 1);
        } else {
          ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
        }
      }
      setInitialX(currentX);
      // setInitialX(-cxOffset * (index + 1));
      setXOffset(-cxOffset * (index || 1));
    };
    return (
      <div>
        <Mask
          visible={visible}
          className="z-[1002] h-screen flex justify-center items-center"
          onMaskClick={() => {
            setVisible(false), setImages([]), setCurrentIndex(0);
            // root.unmount();
          }}
        >
          <div className="relative">
            <div className="text-center mb-2 leading-[54px]">
              {currentIndex + 1}/{images.length}
            </div>
            <div
              className="flex justify-start items-center"
              style={{ height: "calc(100vh - 174px)" }}
              onClick={() => {
                setVisible(false), setImages([]), setCurrentIndex(0);
                // root.unmount();
              }}
            >
              <div
                ref={ref}
                id="imagesScrollBox"
                className="flex justify-center items-center"
                draggable={true}
                // onTouchStart={test1}
                // onTouchMove={test2}
                // onTouchEnd={() => test3(currentIndex)}
              >
                {images.map((item, index) => {
                  return (
                    <div key={index} className="flex-none w-screen relative">
                      <img
                        src={item.url}
                        style={{
                          filter: item.type == "hid" ? "blur(10px)" : "none",
                        }}
                      />
                      <div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
                        {item.type == "hid" && (
                          <div className="flex justify-center">
                            <div
                              className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
                              onClick={() => {
                                router.push(
                                  "/webView/" +
                                    encodeURIComponent(
                                      "/zone/pay/" +
                                        data?.zid +
                                        "/h5_zone_moment/" +
                                        data?.id +
                                        "?base=" +
                                        encodeURIComponent(JSON.stringify(base))
                                    )
                                );
                              }}
                            >
                              此内容暂未解锁，立即解锁
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div
              className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
              style={{
                marginTop: "calc(-50vh + 118px)",
                height: "calc(100vh - 174px)",
              }}
            >
              <div
                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
                onClick={() => {
                  setCurrentIndex((old) => (old > 0 ? old - 1 : old));
                }}
              >
                <FontAwesomeIcon icon={faAngleLeft} size="xl" />
              </div>
              <div
                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
                onClick={() => {
                  setCurrentIndex((old) =>
                    old < images.length - 1 ? old + 1 : old
                  );
                  setInitialX((currentIndex || 1) * window.innerWidth * 2);
                }}
              >
                <FontAwesomeIcon icon={faAngleRight} size="xl" />
              </div>
            </div>
          </div>
        </Mask>
      </div>
    );
  }
);

export default forwardRef(ImagesMask);