HNBWY_Model/webNew/src/components/ModelM/index.tsx

/* eslint-disable jsx-a11y/iframe-has-title */
import { RootState } from "@/store";
import { modelItem } from "@/types";
import { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import musicImg from "@/assets/img/music.png";
import musicImgAc from "@/assets/img/musicAc.png";
import styles from "./index.module.scss";
import { baseURL } from "@/utils/http";

type props = {
  modelId: number;
  closeModel: () => void;
};
export default function ModelM({ modelId, closeModel }: props) {
  const { modelInfo } = useSelector((state: RootState) => state.homeStore);
  const { list } = modelInfo;
  const [info, setInfo] = useState({} as modelItem);

  const closeModelFu = () => {
    setInfo({} as modelItem);
    setMusic(false);
    closeModel();
  };
  useEffect(() => {
    if (modelId) {
      const info = list.filter((v) => v.id === modelId)[0];
      setInfo(info);
      setMusic(true);
      setTimeout(() => {
        musicPlayFu(true);
      }, 500);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [modelId]);

  // 控制模型放大缩小和复位
  const ifrBoxRef = useRef<any>(null);
  const modelChangeFu = (val: number) => {
    const dom = ifrBoxRef.current;

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

  // 控制音乐播放暂停
  const musicRef = useRef<HTMLAudioElement>(null);

  const [music, setMusic] = useState(false);
  const musicPlayFu = (flag: boolean) => {
    const dom = musicRef.current;
    if (dom) {
      if (flag) {
        // 打开音乐
        setMusic(true);
        dom.play();
        dom.addEventListener(
          "ended",
          function () {
            setMusic(false);
          },
          false
        );
      } else {
        // 关闭音乐
        setMusic(false);
        dom.pause();
      }
    }
  };

  return (
    <div className={styles.ModelM}>
      {/* 音频 */}
      {info.audioPath ? (
        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
      ) : null}
      {/* 模型盒子 */}
      <div className="ifrBox">
        {info.fileName ? (
          <iframe
            ref={ifrBoxRef}
            src={`model.html?m=${info.fileName}`}
            frameBorder="no"
          ></iframe>
        ) : null}
      </div>
      {/* 名字 */}
      <div className="model_title">{info.name}</div>

      {/* 下边介绍 */}
      <div className="rightTxt">
        {info.description ? (
          <div
            className="model_txt"
            dangerouslySetInnerHTML={{ __html: info.description }}
          ></div>
        ) : (
          <div className="model_txt">暂无信息</div>
        )}

        <div className="model_floo">
          <div className="model_sortRow">
            类别：
            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
          </div>
          <div className="model_ageRow">
            年代：
            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
          </div>
        </div>

        {
          <div className="model_size">
            尺寸：{info.sizeLength ? info.sizeLength : "（空）"}
          </div>
        }
      </div>

      {/* 底部按钮 */}
      <div className="flootBtnBox">
        <div
          className="flootRow flootRow1"
          onClick={() => modelChangeFu(1)}
        ></div>
        <div
          className="flootRow flootRow2"
          onClick={() => modelChangeFu(2)}
        ></div>
        {info.audioPath ? (
          <div className="flootRow flootRowM">
            {music ? (
              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
            ) : (
              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
            )}
          </div>
        ) : null}

        <div
          className="flootRow flootRow4"
          onClick={() => modelChangeFu(3)}
        ></div>
        <div
          className="flootRow flootRow3"
          onClick={() => closeModelFu()}
        ></div>
      </div>
    </div>
  );
}