HeNan_HanJia/Code/src/pages/A4dance/index.tsx

import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import classNames from 'classnames'
import Hot2 from '../A2visit/PanoVideo/Hot2'
import EndVideo from '@/components/EndVideo'
import BaseImg from '@/components/BaseImg'
import HotIcon from '@/components/HotIcon'
import FloorBtn from '@/components/FloorBtn'
import NextPage from '@/components/NextPage'
import useLoding from '@/components/ownUse/useLoding'
import history from '@/utils/history'
import BtnRight from '@/components/BtnRight'

function A4dance() {
  const [baseSta, setBaseSta] = useState(false)

  // 点击继续
  const btnStart = useCallback(() => {
    setBaseSta(true)
  }, [])

  // 点击 跳下一个章节
  const [lastVideo, setLastVideo] = useState(false)

  // 底部选中
  const [floorAc, setFloorAc] = useState(-1)

  useEffect(() => {
    if (floorAc !== -1) {
      setTimeout(() => {
        const domAll: any = document.querySelectorAll('.A4fRvideo')
        if (domAll && domAll.length) {
          domAll.forEach((v: HTMLVideoElement, i: number) => {
            if (floorAc === i) v.play()
            else {
              v.pause()
              v.currentTime = 0
            }
          })
        }
      }, 100)
    }
  }, [floorAc])

  const [hotInd, setHotInd] = useState(-1)

  const hotShowFu = useCallback((index: number) => {
    if (index === 0) {
      // 云气图 直接跳页面
      history.push('/yun')
    } else setHotInd(index)
  }, [])

  // 先加载背景图 序列帧等 在加载视频
  const { imgNow, imgNumFu } = useLoding(2)

  return (
    <div className={styles.A4dance} style={{ backgroundImage: `url(${baseURL}dance/bj.jpg)` }}>
      {/* 初始页面 */}
      <BaseImg
        isShow={baseSta}
        iconSrc={`${baseURL}dance/mulu.png`}
        parentFu={() => btnStart()}
        imgNow={imgNow}
        imgNumFu={imgNumFu}
      />

      {/* 主要内容 */}
      {imgNow ? (
        <div
          className={classNames(
            'pvBox',
            lastVideo ? 'pvBoxHide' : '',
            baseSta ? 'pvBoxShow' : 'pvBoxHide'
          )}
        >
          {/* 热点图标 云气图为第一个*/}
          {myData.dance.hot.map((item, index) =>
            item.name === '汉代乐舞百戏' ? (
              <div
                onClick={() => hotShowFu(1)}
                key={index}
                className='A4leftBtn'
                style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
              >
                汉代乐舞百戏
              </div>
            ) : (
              <HotIcon
                style={{
                  top: item.locPage.top,
                  left: item.locPage.left
                }}
                key={index}
                index={index}
                clickSon={val => hotShowFu(val)}
                hoverSrc={item.hoverSrc}
                isZhan={true}
              />
            )
          )}

          {/* 底部 */}
          <div className='pvfloor'>
            {myData.dance.floor.map((item, index) =>
              // 直接去掉杂技
              item.name === '杂技' ? null : (
                <div
                  key={index}
                  onClick={() => setFloorAc(index)}
                  className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
                >
                  {/* 蒙版 */}
                  <div className='pvflR1'></div>
                  {/* 底图 */}
                  <div className='pvflR2'>
                    <img src={baseURL + item.hoverSrc} alt='' />
                  </div>

                  {/* 文字 */}
                  <div className='pvflR3'>{item.name}</div>
                </div>
              )
            )}
          </div>

          {/* 跳到下一章 */}
          <NextPage clickSon={() => setLastVideo(true)} txt='后厨备宴' />

          {/* 右下角按钮 */}
          <FloorBtn />

          {/* 中间的8个动画视频*/}
          <div
            className={classNames('A4floorBox', floorAc === -1 ? 'A4floorBoxHide' : '')}
            style={{ backgroundImage: `url(${baseURL}dance/dongBj.png)` }}
          >
            <div className='A4fMain'>
              {/* 边框遮盖 */}
              {/* <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' /> */}

              {/* 返回按钮 */}
              <BtnRight imgName='back' clickSon={() => setFloorAc(-1)} title='返回' />

              {myData.dance.floor.map((item, index) => (
                <div key={index} className='A4fRow' style={{ opacity: floorAc === index ? 1 : 0 }}>
                  <video
                    className='A4fRvideo'
                    playsInline
                    muted
                    webkit-playsinline='true'
                    x5-video-player-type='h5'
                    loop
                  >
                    <source type='video/mp4' src={baseURL + item.videoSrc} />
                    Your browser does not support the video tag.
                  </video>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : null}

      {/* 点击四神云气图的动画 */}
      {/* {imgNow ? (
        <EndVideo
          lastVideo={hotInd === 0}
          delDom='.pvBox'
          src={baseURL + myData.dance.hot[0].videoSrc}
          path='/yun'
        />
      ) : null} */}

      {/* 点击其他热点 */}
      {hotInd > 0 ? (
        <div className={'A4othHot'}>
          <Hot2
            data={myData.dance.hot[hotInd].data}
            closeFu={() => setHotInd(-1)}
            name={myData.dance.hot[hotInd].name}
          />
        </div>
      ) : null}
      {/* 结尾动画 */}
      {imgNow ? (
        <EndVideo
          lastVideo={lastVideo}
          delDom='.pvBox'
          src={baseURL + myData.dance.lastVideo}
          path='/chef'
        />
      ) : null}
    </div>
  )
}

const MemoA4dance = React.memo(A4dance)

export default MemoA4dance