import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { envUrl } from "@/utils/env";
import { TabType, imgLodingFu, mapData1 } from "../data";

type Props = {
  sId: number;
};

function MapSon({ sId }: Props) {
  const [tag, setTag] = useState([] as TabType[]);

  useEffect(() => {
    setTag(mapData1.find((v) => v.id === sId)!.son);
  }, [sId]);

  const mapBac1 = useRef<HTMLDivElement>(null);

  const mouseMoveFu = useCallback((e: MouseEvent) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = -(e.clientY / window.innerHeight) * 2 + 1;

    // x = x > 1 ? 1 : x < -1 ? -1 : x;
    // y = y > 1 ? 1 : y < -1 ? -1 : y;

    // const moveParam = `rotateX(${y * 2.5}deg) rotateY(${x}deg) translate3d(${
    //   -x * 10
    // }px,${y * 10}px,10px)`;

    const moveParam = `translate(${-x * 10}px,${y * 10}px)`;

    if (mapBac1.current) mapBac1.current.style.transform = moveParam;
  }, []);

  useEffect(() => {
    if (mapBac1.current) {
      const dom1 = mapBac1.current;
      dom1.addEventListener("mousemove", mouseMoveFu);
      return () => {
        dom1.removeEventListener("mousemove", mouseMoveFu);
      };
    }
  }, [mouseMoveFu]);

  return (
    <div className={styles.MapSon}>
      {/* 大图片加载 */}
      <div className="mapSonImg" ref={mapBac1}>
        <img
          src={`${envUrl}/map/${sId}.jpg`}
          alt=""
          onLoad={() => imgLodingFu(sId)}
        />

        {/* 标签 */}
        {tag.map((v) => (
          <div
            onClick={() => window.open(v.link)}
            className="tagBox"
            key={v.id}
            style={{ left: v.x, top: v.y, bottom: v.b, right: v.r }}
          >
            {v.type === "底部" ? (
              <>
                <img src={`${envUrl}/map/xianL.png`} alt="" />
                <div className="tagName">{v.name}</div>
              </>
            ) : (
              <>
                <div className="tagName">{v.name}</div>
                <img src={`${envUrl}/map/xianR.png`} alt="" />
              </>
            )}

            {/* <img src="" alt="" /> */}
            {/* {v.type==='b'?<img/>} */}
          </div>
        ))}
      </div>
    </div>
  );
}

const MemoMapSon = React.memo(MapSon);

export default MemoMapSon;
