import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { useLocation } from "react-router-dom";
import { baseUrl } from "@/index";
import classNames from "classnames";
import upimg from "@/assets/img/tab3/icon_up.png";
import downimg from "@/assets/img/tab3/icon_down.png";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

function C1Architec() {
  const location = useLocation();

  const [uId, setUid] = useState("");

  const dataObj = useSelector(
    (state: RootState) => state.A0Layout.dataAll.architec
  );

  const info = useMemo(() => {
    const info = dataObj[uId as "key"] || { name: "", data: [] };
    return info;
  }, [dataObj, uId]);

  useEffect(() => {
    const query = new URLSearchParams(location.search);
    const param = query.get("id");
    console.log("建筑页面获取id", param);
    setUid(param!);
  }, [location.search]);

  // 点击箭头切换村落
  const cutChangeFu = useCallback(
    (num: number) => {
      const id = Number(uId);
      const numRes = id + num;
      setUid(numRes + "");

      // 改变滚动状态
      const dom1 = document.querySelector(".C1main") as HTMLDivElement;
      const dom2 = document.querySelector(".C1cent") as HTMLDivElement;
      dom1.scrollLeft = 0;
      dom2.scrollLeft = 0;
    },
    [uId]
  );

  // 滚轮滑动事件
  useEffect(() => {
    const dom1 = document.querySelector(".C1main") as HTMLDivElement;
    // dom1.onwheel = (e) => {
    //   const num = dom1.scrollLeft;
    //   dom1.scrollLeft = num + e.deltaY;
    // };

    const dom2 = document.querySelector(".C1cent") as HTMLDivElement;
    dom2.onwheel = (e) => {
      const num1 = dom1.scrollLeft;
      dom1.scrollLeft = num1 + e.deltaY;

      const num2 = dom2.scrollLeft;
      dom2.scrollLeft = num2 + e.deltaY;
    };
  }, []);

  // 输入移入的
  const [hoverId, setHoverId] = useState(0);

  return (
    <div
      className={styles.C1Architec}
      style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bg.jpg)` }}
    >
      {/* 村落标识 */}
      <div className="C1bs">
        <img
          className={classNames(Number(uId) === 1 ? "C1noneImg" : "")}
          src={upimg}
          alt=""
          onClick={() => cutChangeFu(-1)}
        />
        <div>{info.name}</div>
        <img
          className={classNames(Number(uId) === 5 ? "C1noneImg" : "")}
          src={downimg}
          alt=""
          onClick={() => cutChangeFu(1)}
        />
      </div>

      {/* 鼠标移入的效果 */}
      <div className="C1main">
        <div className="C1mainBox">
          {info.data.map((v) => (
            <div
              className={classNames(
                "C1row",
                v.id === hoverId ? "C1rowShow" : ""
              )}
              key={v.id}
            >
              <h1>{v.name}</h1>
              <div className="C1line"></div>
              <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
              <p>{v.txt}</p>
            </div>
          ))}

          {/* 棕色底图 */}
        </div>
      </div>

      <div className="C1cent">
        <div
          className="C1cent1"
          // style={{ backgroundImage: `url(${baseUrl}/C1Architec/pc/bac.png)` }}
        >
          {info.data.map((v) => (
            <div
              className={classNames(
                "C1crow",
                v.id === hoverId ? "C1crowNone" : ""
              )}
              key={v.id}
              onMouseEnter={() => setHoverId(v.id)}
              onMouseLeave={() => setHoverId(0)}
            >
              <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
              <p>{v.name}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const MemoC1Architec = React.memo(C1Architec);

export default MemoC1Architec;
