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

/* eslint-disable jsx-a11y/iframe-has-title */

import React, { useMemo, useRef, useState } from "react";
import styles from "./index.module.scss";
import { baseUrl } from "@/index";
import { InfoRowType } from "@/types";
import history from "@/utils/history";
import { SwapRightOutlined } from "@ant-design/icons";
import classNames from "classnames";

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

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

function ArcOrBuildInfoM({ info, type }: Props) {
  // 模型的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 [txtShow, setTxtShow] = useState(false);

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

  // 是否没有大场景也没有构件
  const isFullBox = useMemo(() => {
    let flag = false;
    if (
      !info.code &&
      (!info.isBuild || (info.isBuild && info.isBuild.length === 0))
    ) {
      flag = true;
    }
    return flag;
  }, [info.code, info.isBuild]);

  return (
    <div
      className={styles.ArcOrBuildInfoM}
      style={{ backgroundImage: `url(${baseUrl}/C2ArchitecInfo/bg2.jpg)` }}
    >
      {/* 返回按钮 */}
      <div className="AMback" onClick={() => history.go(-1)} hidden={full}>
        <img src={`${baseUrl}/C2ArchitecInfo/icon_back.png`} alt="" />
      </div>

      {/* 主体模型 */}
      <div
        className={classNames(
          "AMtop",
          full ? "AMtopFull" : "",
          isFullBox ? "AMtopFull2" : ""
        )}
      >
        {/* 名字 */}
        <div className="AMtopName">{info.name}</div>
        {/* 模型 */}
        <iframe
          ref={ifrRefNew}
          src={`/model.html?m=${info.id}&n=new&r=${type}`}
          frameBorder="0"
        ></iframe>
        {/* 右侧按钮 */}
        <div className="AMtopBtn">
          {/* 打开介绍 */}
          <div
            hidden={!info.txt}
            className={classNames(
              "AMtopBtnRow AMtopBtnRow1",
              txtShow ? "AMtopBtnRow1Ac" : ""
            )}
            onClick={() => setTxtShow(!txtShow)}
          ></div>
          {iconArr.map((v) => (
            <div
              onClick={() => modelChangeFu(v.id)}
              className={`AMtopBtnRow AMtopBtnRow${v.id}`}
              key={v.id}
            ></div>
          ))}
          {/* 全屏 */}
          <div
            hidden={isFullBox}
            onClick={() => {
              const dom = ifrRefNew.current;
              if (dom && dom.contentWindow && dom.contentWindow.modelLoding)
                setFull(!full);
            }}
            className={classNames(
              "AMtopBtnRow AMtopBtnRow5",
              full ? "AMtopBtnRow5Ac" : ""
            )}
          ></div>
        </div>
      </div>

      {/* 底部按钮 */}
      <div className="AMbtn" hidden={full}>
        {info.isBuild ? (
          <>
            {info.isBuild.map((v) => (
              <div
                className="AMbtnRow"
                key={v.id}
                onClick={() => history.push(`/buildInfo?id=${v.id}`)}
              >
                <div>
                  {v.name[0]}&emsp;{v.name[1]}
                </div>
              </div>
            ))}
          </>
        ) : null}

        {/* 去大场景 */}
        {type === "C2ArchitecInfo" && info.code ? (
          <div
            className="AMtoVr"
            onClick={() => history.push(`/scene?id=${info.code}`)}
          >
            室内VR
            <p>
              <SwapRightOutlined />
            </p>
          </div>
        ) : null}
      </div>

      {/* 文字介绍 */}
      <div
        className={classNames("AMtxt", txtShow ? "AMtxtAc" : "")}
        style={{ backgroundImage: `url(${baseUrl}/C2ArchitecInfo/tab.png)` }}
      >
        <h3>
          简介 {/* 右侧关闭按钮 */}
          <img
            onClick={() => setTxtShow(false)}
            className="AMtxtClose"
            src={`${baseUrl}/C2ArchitecInfo/icon_cancel.png`}
            alt=""
          />
        </h3>
        <div className="AMtxtLine">
          <img src={`${baseUrl}/C1Architec/line.png`} alt="" />
        </div>

        <div className="AMtxtCon">
          <div
            dangerouslySetInnerHTML={{
              __html: info.txt ? info.txt : "暂无介绍",
            }}
          ></div>
        </div>
      </div>
    </div>
  );
}

const MemoArcOrBuildInfoM = React.memo(ArcOrBuildInfoM);

export default MemoArcOrBuildInfoM;