import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { baseUrl } from "@/index";

type Props = {
  isShow: boolean;
  closeFu: () => void;
  clickCardFu: (id: number) => void;
};

function B1Card({ isShow, closeFu, clickCardFu }: Props) {
  const data = useSelector(
    (state: RootState) => state.A0Layout.dataAll.village
  );

  // 控制显示和隐藏
  const [acId, setAcId] = useState(0);

  const [pathAcId, setPathAcId] = useState(0);

  useEffect(() => {
    if (!isShow) {
      const temp = window.location.hash;
      if (temp.includes("#/village?id=")) {
        const url = temp.split("?id=")[1];
        setPathAcId(Number(url));
      }
    } else setPathAcId(0);
  }, [isShow]);

  return (
    <div className={styles.B1Card} hidden={isShow}>
      <div className="B1Cmain">
        {data.map((v) => (
          <div className="B1CmainRow" key={v.id}>
            <div
              className="B1Ci1"
              onClick={() => clickCardFu(v.id)}
              onMouseEnter={() => setAcId(v.id)}
              onMouseLeave={() => setAcId(0)}
              style={{
                backgroundImage: `url(${baseUrl}/B1Village/pc/${v.id}${
                  acId === v.id || pathAcId === v.id ? "Ac" : ""
                }.png)`,
              }}
            >
              <p className="B1Ciname">{v.name}</p>
              {/* 鼠标移入的效果 */}
              <div className="B1Cihover">
                <div className="mySorrl">{v.infoTxt}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="B1Cclose" onClick={closeFu}></div>
    </div>
  );
}

const MemoB1Card = React.memo(B1Card);

export default MemoB1Card;
