kaiPingWeb/code/src/components/ArcOrBuildInfo/index.tsx

/* eslint-disable jsx-a11y/iframe-has-title */
import React, { useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { baseUrl } from "@/index";
import history, { modelUrl } from "@/utils/history";
import classNames from "classnames";
import { InfoRowType } from "@/types";
import { getUrlHashFu } from "@/utils/data";
import { useLocation } from "react-router-dom";

const iconArr = [
  { id: 2, name: "放大" },
  { id: 3, name: "缩小" },
  { id: 4, name: "复位" },
];

type Props = {
  info: InfoRowType;
  type: "C2ArchitecInfo" | "D2BuildInfo";
};

function ArcOrBuildInfo({ info, type }: Props) {
  // 嵌套 四维看看 iframe 返回的问题
  const location = useLocation();
  const [back2, setBack2] = useState("");

  useEffect(() => {
    const query = new URLSearchParams(location.search);
    const back2 = query.get("back2");
    setBack2(back2!);

    setBack2(back2!);
  }, [location.search]);

  // 模型的ref
  const ifrRefNew = useRef<any>(null);

  const modelChangeFu = (val: number) => {
    const dom = ifrRefNew.current;

    if (dom && dom.contentWindow && dom.contentWindow.webview) {
      if (val === 2) dom.contentWindow.webview.zoomIn(); // 放大
      else if (val === 3) dom.contentWindow.webview.zoomOut(); // 缩小
      else dom.contentWindow.webview.resetView(); // 复位
    }
  };

  // 点击对比
  const [oldShow, setOldShow] = useState(false);

  useEffect(() => {
    if (oldShow) setOldFlag(true);
  }, [oldShow]);

  const [oldFlag, setOldFlag] = useState(false);

  // 点击全屏
  const [full, setFull] = useState(false);

  return (
    <div
      className={styles.ArcOrBuildInfo}
      style={{ backgroundImage: `url(${baseUrl}/C2ArchitecInfo/pc/bg.jpg)` }}
    >
      {/* 左下方的按钮 */}
      <div className="C2leftBtn">
        <div
          className="C2lRow"
          onClick={() => (back2 ? history.push(back2) : history.go(-1))}
        >
          返回
        </div>
        {info.isBuild ? (
          <>
            {info.isBuild.map((v) => (
              <div
                className="C2lRow"
                key={v.id}
                onClick={() => history.push(`/buildInfo?id=${v.id}`)}
              >
                {v.name}
              </div>
            ))}
          </>
        ) : null}
      </div>

      {/* 左边信息 */}
      <div className="C2left">
        <div className="C2left1">{info.name}</div>
        <div
          className="C2left2"
          dangerouslySetInnerHTML={{ __html: info.txt }}
        ></div>
      </div>

      {/* 右边模型 */}
      <div
        className={classNames("C2right", full ? "C2rightAc" : "")}
        style={{
          backgroundImage: full
            ? `url(${baseUrl}/C2ArchitecInfo/pc/bg.jpg)`
            : "",
        }}
      >
        <iframe
          ref={ifrRefNew}
          src={`${modelUrl}model.html?m=${info.id}&n=new&r=${type}`}
          frameBorder="0"
        ></iframe>
        {/* VR漫游按钮 */}
        {type === "C2ArchitecInfo" && info.code ? (
          <div
            hidden={full}
            className="C2rToScene"
            onClick={() => getUrlHashFu(info.code, "scene")}
          >
            VR漫游
          </div>
        ) : null}

        {/* 右侧的功能按钮 */}
        <div className="C2rBtn">
          {/* 是否有对比 */}
          {info.isOld ? (
            <div
              hidden={full}
              onClick={() => setOldShow(!oldShow)}
              className={classNames(
                "C2rBtnRow",
                "C2rBtnRow1",
                oldShow ? "C2rBtnRow1Ac" : ""
              )}
              title={oldShow ? "退出对比" : "对比"}
            ></div>
          ) : null}

          {iconArr.map((v) => (
            <div
              onClick={() => modelChangeFu(v.id)}
              className={classNames("C2rBtnRow", "C2rBtnRow" + v.id)}
              key={v.id}
              title={v.name}
            ></div>
          ))}

          {/* 全屏 */}
          <div
            onClick={() => {
              const dom = ifrRefNew.current;
              if (dom && dom.contentWindow && dom.contentWindow.modelLoding)
                setFull(!full);
            }}
            className={classNames(
              "C2rBtnRow",
              "C2rBtnRow5",
              full ? "C2rBtnRow5Ac" : ""
            )}
            title={full ? "退出全屏" : "全屏"}
          ></div>
        </div>
      </div>

      {/* 点击对比打开的元素 */}
      {oldFlag ? (
        <div
          className={classNames(
            "C2openOld",
            oldShow ? "C2openOldShow" : "",
            info.isOld && info.isOld.loc === "横" ? "C2openOldShu" : ""
          )}
        >
          <div className="C2openOldMain">
            {info.isOld ? (
              <>
                <div className="C2openTit">{info.isOld.name}</div>
                {/* 线 */}
                <div className="C2openLine"></div>
                {/* 模型或者图片 */}
                {info.isOld.type === "model" ? (
                  <iframe
                    src={`${modelUrl}/model.html?m=${info.id}&n=old&r=${type}`}
                    frameBorder="0"
                  ></iframe>
                ) : (
                  <img src={`${baseUrl}/${type}/${info.id}/old.png`} alt="" />
                )}
              </>
            ) : null}
          </div>
          <div className="C2openClose" onClick={() => setOldShow(false)}></div>
        </div>
      ) : null}
    </div>
  );
}

const MemoArcOrBuildInfo = React.memo(ArcOrBuildInfo);

export default MemoArcOrBuildInfo;