import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { envUrl } from "@/utils/env";
import { imgLodingFu, maoData2, mapData1 } from "./data";
import iconImg1 from "@/assets/img/map/icon1.png";
import iconImg1Ac from "@/assets/img/map/icon1Ac.png";
import iconImg2 from "@/assets/img/map/icon2.png";
import iconImg2Ac from "@/assets/img/map/icon2Ac.png";
import MapSon from "./MapSon";
import ImgLoding from "@/components/ImgLoding";
import { baseURL } from "@/utils/http";

type Props = {
  type: number;
  sonChaneType: (val: number) => void;
};

function A0Map({ type, sonChaneType }: Props) {
  useEffect(() => {
    // console.log(123,type);

    // if (type === 3) setMapSon(0);
    if (type !== 2) setMapSon(0);
  }, [type]);

  // 控制二级地图的显示
  const [mapSon, setMapSon] = useState(0);

  // 鼠标hover
  const [isHover, setIsHover] = useState(0);

  return (
    <div className={styles.A0Map}>
      {/* 大图片加载中 */}
      <ImgLoding id={mapSon} />

      {/* 一级地图盒子 */}
      <div
        style={{ opacity: mapSon ? "0" : "1" }}
        className={classNames(
          "mapMain",
          type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
        )}
      >
        {/* 定位大图标 */}
        {mapData1.map((v) => (
          <div
            onMouseEnter={() => setIsHover(v.id)}
            onMouseLeave={() => setIsHover(0)}
            onClick={() => {
              setMapSon(v.imgId);
              sonChaneType(2);
            }}
            key={v.id}
            className="A0iconBox"
            style={{ top: v.y, left: v.x, zIndex: v.ind }}
          >
            <div className="iconNum">{v.id}</div>

            <img className="iconImg1" src={iconImg1} alt="" />
            <img className="iconImg2" src={iconImg1Ac} alt="" />

            {/* 文字标题 */}
            <div
              className="txtBox"
              hidden={
                (isHover === 2 && v.id === 1) || (isHover === 1 && v.id === 2)
              }
            >
              <div>{v.name}</div>
            </div>

            {/* 悬停出来的图片和名称 */}
            <div className="hoverShowBox">
              <div className="hoverShowBoxM">
                <div className="hoverShowBox1">{v.name}</div>
                <div className="hoverShowBox2">
                  <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
                </div>
              </div>
            </div>
          </div>
        ))}

        {/* 定位小图标 */}
        {maoData2.map((v) => (
          <div
            onClick={() => {
              window.open(baseURL + v.link);
              // setMapSon(v.imgId);
              sonChaneType(3);
            }}
            key={v.id}
            className={classNames(
              "A0iconSmBox",
              v.loc === "顶部" ? "A0iconSmBoxR" : ""
            )}
            style={{
              top: v.y,
              left: v.x,
              bottom: v.b,
              right: v.r,
              zIndex: v.ind,
            }}
          >
            <img className="ic2Img1" src={iconImg2} alt="" />
            <img className="ic2Img2" src={iconImg2Ac} alt="" />

            {/* 文字标题 */}
            <div className={classNames("ic2txtBox", `ic2txtBox${v.id}`)}>
              {v.name}
            </div>

            {/* 悬停出来的图片和名称 */}
            <div
              className={classNames(
                "ic2HoverBox",
                v.type === "right" ? "ic2HoverBox2" : ""
              )}
            >
              <div className="ic2HoverBoxll">{v.name}</div>
              <div className="ic2HoverBoxrr">
                <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
              </div>
            </div>
          </div>
        ))}

        {/* 一级地图 图片 */}
        <div className="mapBac">
          <img
            onLoad={() => imgLodingFu(0)}
            src={`${envUrl}/map/0.jpg`}
            alt=""
          />
        </div>
      </div>

      {/* 二级地图 */}
      {mapSon ? <MapSon sId={mapSon} /> : null}

      {/* <div className="yunBox">
        <div className="yunSon1"></div>
        <div className="yunSon2"></div>
        <div className="yunSon3"></div>
      </div> */}

      {/* 左下角的返回 */}
      {mapSon ? (
        <div className="sonToBack" onClick={() => setMapSon(0)}>
          <img src={`${envUrl}/map/map${mapSon}.png`} alt="" />
        </div>
      ) : null}
    </div>
  );
}

const MemoA0Map = React.memo(A0Map);

export default MemoA0Map;
