YPZZBWG/pc/src/pages/A2Main/GoodsInfo/RightFile/index.tsx

/* eslint-disable jsx-a11y/iframe-has-title */
import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { A2FileObjType, A2FileType } from "@/types";
import { baseURL } from "@/utils/http";
import classNames from "classnames";
import ImageLazy from "@/ImageLazy";
import R_leftImg from "@/assets/img/goods/R_left.png";
import R_rightImg from "@/assets/img/goods/R_right.png";
import icon1 from "@/assets/img/goods/icon1.png";
import icon1Ac from "@/assets/img/goods/icon1Ac.png";

type Props = {
  listObj: A2FileObjType;
  audioInfo: A2FileType;
  isOpen: boolean;
};

function RightFile({ listObj, audioInfo, isOpen }: Props) {
  useEffect(() => {
    // 如果有音频信息
    if (audioInfo.id) {
      // 显示音频图标
      setRight1({ show: true, done: false });
      window.setTimeout(() => {
        const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
        dom.onended = () => {
          // console.log("-------音频播放结束");

          // 音频播放结束
          setRight1({ show: true, done: false });
        };
        // 音频的状态
        if (!isOpen) {
          dom.play();

          setRight1({ show: true, done: true });
        }
      }, 100);
    }
  }, [audioInfo, isOpen]);

  // 文件类型 type
  const [type, setType] = useState<"model" | "video" | "img">("model");

  // 音频的显示和隐藏
  const [right1, setRight1] = useState({ show: false, done: false });

  // 当前显示的 索引

  const [showInd, setShowInd] = useState(0);

  const cutIndFu = useCallback(
    (num: number) => {
      setShowInd(showInd + num);
    },
    [showInd]
  );

  // 打开和关闭音频
  const audioCutFu = useCallback((val: boolean) => {
    const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
    if (val) dom.play();
    else dom.pause();
    setRight1({ show: true, done: val });
  }, []);

  // 在页面展示的数组
  const list = useMemo(() => {
    return listObj[type];
  }, [listObj, type]);

  // 是否只有单独的音频上传

  const isOneAudio = useMemo(() => {
    if (
      audioInfo.id &&
      listObj.img.length === 0 &&
      listObj.model.length === 0 &&
      listObj.video.length === 0
    )
      return true;
    else return false;
  }, [audioInfo, listObj]);

  // 切换不同文件（模型/视频/图片的数组）
  const typeArr = useMemo(() => {
    const arr: {
      name: "模型" | "视频" | "图片";
      type: "model" | "video" | "img";
    }[] = [];
    if (listObj.model.length) arr.push({ name: "模型", type: "model" });
    if (listObj.video.length) arr.push({ name: "视频", type: "video" });
    if (listObj.img.length) arr.push({ name: "图片", type: "img" });
    return arr;
  }, [listObj]);

  // 当前默认展示什么模块（优先级按照 模型-视频-图片）
  useEffect(() => {
    if (listObj.model.length) setType("model");
    else if (listObj.video.length) setType("video");
    else setType("img");
  }, [listObj]);

  // 每次变化type的时候把 索引变成0
  useEffect(() => {
    setShowInd(0);
  }, [type]);

  return (
    <div className={styles.RightFile}>
      {/* 音频的控制模块 */}
      <div className="R_audioBox" hidden={!isOneAudio}>
        {audioInfo.filePath ? (
          <audio
            src={baseURL + audioInfo.filePath}
            controls
            id="myAudio"
          ></audio>
        ) : null}
      </div>

      {/* 音频按钮 */}
      <div className="R_audioIcon" hidden={!right1.show || isOneAudio}>
        <img
          src={icon1Ac}
          alt=""
          title="打开文物音频"
          hidden={right1.done}
          onClick={() => audioCutFu(true)}
        />
        <img
          onClick={() => audioCutFu(false)}
          src={icon1}
          alt=""
          title="关闭文物音频"
          hidden={!right1.done}
        />
      </div>

      {/* 模型缓存起来 */}
      {listObj.model && listObj.model[0] && listObj.model[0].id ? (
        <div className="R1_row R1_rowAc R1_IrBox" hidden={type !== "model"}>
          <iframe
            src={`model.html?m=${listObj.model[0].filePath}`}
            frameBorder="0"
          ></iframe>
        </div>
      ) : null}

      {list.map((v, i) => (
        <div
          className={classNames("R1_row", i === showInd ? "R1_rowAc" : "")}
          key={v.id}
        >
          {v.type === "video" && i === showInd ? (
            <video src={baseURL + v.filePath} controls></video>
          ) : v.type === "img" ? (
            <ImageLazy src={v.filePath} width="100%" height="100%" />
          ) : null}
        </div>
      ))}

      {/* 左右按钮 */}
      <div
        hidden={list.length <= 1}
        onClick={() => cutIndFu(-1)}
        className={classNames("R_left", showInd === 0 ? "R_arrowNo" : "")}
      >
        <img src={R_leftImg} alt="" />
      </div>
      <div
        hidden={list.length <= 1}
        onClick={() => cutIndFu(1)}
        className={classNames(
          "R_right",
          showInd >= list.length - 1 ? "R_arrowNo" : ""
        )}
      >
        <img src={R_rightImg} alt="" />
      </div>

      {/* 中间的模块选择 */}
      <div className="R_typeCutBox" hidden={typeArr.length <= 1}>
        {typeArr.map((v) => (
          <div
            onClick={() => setType(v.type)}
            className={classNames(
              "R_typeCutRow",
              type === v.type ? "R_typeCutRowAc" : ""
            )}
            key={v.type}
          >
            {v.name}
            {listObj[v.type].length > 1 ? listObj[v.type].length : null}
          </div>
        ))}
      </div>

      {/* 索引 */}
      {list.length > 1 ? (
        <div className="showIndBox">
          {showInd + 1} / {list.length}
        </div>
      ) : null}
    </div>
  );
}

const MemoRightFile = React.memo(RightFile);

export default MemoRightFile;