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

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import useDataUrl from '@/components/ownUse/useDataUrl'
import { myData } from '@/utils/http'
import classNames from 'classnames'
import { domDelOwnFu } from '@/utils/utilsSome'
import { ArrowRightOutlined } from '@ant-design/icons'
import history from '@/utils/history'
import Hot2 from '../A2visit/PanoVideo/Hot2'

function A4dance() {
  const { dataUrlSame } = useDataUrl()

  // 待完善
  const [loding, setLoding] = useState(100)

  const timeRR = useRef(-1)

  useEffect(() => {
    clearInterval(timeRR.current)
    timeRR.current = window.setInterval(() => {
      if (loding >= 100) {
        clearInterval(timeRR.current)
        return
      }
      setLoding(loding + 1)
    }, 40)
  }, [loding])

  // 点击继续
  const btnStart = useCallback(() => {
    if (loding >= 100) {
      setLoding(110)

      // 0.5s之后删除自己
      setTimeout(() => {
        domDelOwnFu('.A4base')
      }, 500)
    }
  }, [loding])

  // 点击 跳下一个章节

  const [lastVideo, setLastVideo] = useState(false)

  const videoRefLast = useRef<HTMLVideoElement>(null)

  const lastVideoFu = useCallback(() => {
    setLastVideo(true)

    setTimeout(() => {
      if (videoRefLast.current) {
        videoRefLast.current.play()
      }
    }, 100)

    // 0.5s之后删除自己
    setTimeout(() => {
      domDelOwnFu('.pvBox')
    }, 500)
  }, [])

  // 底部选中
  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 hotVideoRef = useRef<HTMLVideoElement>(null)

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

  const hotShowFu = useCallback((index: number) => {
    setHotInd(index)

    // 第一个热点 云气图 其他是通用热点
    if (index === 0) {
      setTimeout(() => {
        if (hotVideoRef.current) {
          hotVideoRef.current.play()
        }
      }, 100)
    }
  }, [])

  return (
    <div className={styles.A4dance} style={{ backgroundImage: `url(${dataUrlSame}dance/bj.jpg)` }}>
      {/* 初始页面 */}
      <div className={classNames('A4base', loding === 110 ? 'A4baseHide' : '')}>
        <img src={`${dataUrlSame}dance/mulu.png`} alt='' />
        <div className='A4baseBtn' onClick={btnStart}>
          {/* anpg动图 */}
          <div className='A4BIcon'>
            <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
          </div>

          <img src={`${dataUrlSame}visit/btn.png`} alt='' />

          <div className='A4Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
          {loding >= 100 ? null : (
            <div className='A4Bxian'>
              <div>
                <div style={{ width: loding + '%' }}></div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 主要内容 */}
      <div
        className={classNames(
          'pvBox',
          lastVideo ? 'pvBoxHide' : '',
          loding === 110 ? 'pvBoxShow' : 'pvBoxHide'
        )}
      >
        {/* 热点 云气图为第一个 */}
        {myData.dance.hot.map((item, index) => (
          <div
            onClick={() => hotShowFu(index)}
            key={index}
            className='pvHot'
            style={{
              top: item.loc.top,
              left: item.loc.left
            }}
          >
            <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
            <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
          </div>
        ))}

        {/* 底部 */}
        <div className='pvfloor'>
          {myData.dance.floor.map((item, index) => (
            <div
              key={index}
              onClick={() => setFloorAc(index)}
              className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
            >
              {/* 蒙版 */}
              <div className='pvflR1'></div>
              {/* 底图 */}
              <div className='pvflR2'>
                <img src={dataUrlSame + item.imgSrc} alt='' />
              </div>

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

        {/* 跳到下一章 */}
        <div className='pvBtn'>
          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
          <div onClick={lastVideoFu}>
            后厨备宴
            <ArrowRightOutlined />
          </div>
        </div>

        {/* 右下角按钮 */}
        <div className='pvRRbtn'>
          {/* <div className='pvRRbtn1' title='漫游模式'></div> */}
          {/* 更多 跳新页面 */}
          <div className='pvRRbtn2' title='更多' onClick={() => history.push('/chef')}></div>
        </div>

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

            {/* 返回按钮 */}
            <img
              className='A4fMback'
              onClick={() => setFloorAc(-1)}
              src={`${dataUrlSame}dance/back22.png`}
              alt=''
            />
            {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'
                  src={dataUrlSame + item.videoSrc}
                >
                  <source type='video/mp4' />
                  Your browser does not support the video tag.
                </video>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 点击四神云气图的动画 */}
      <div className={classNames('A4hotBox', hotInd === 0 ? 'A4hotBoxShow' : '')}>
        <video
          ref={hotVideoRef}
          playsInline
          muted
          webkit-playsinline='true'
          x5-video-player-type='h5'
          src={dataUrlSame + myData.dance.hot[0].videoSrc}
          onEnded={() => history.push('/yun')}
        >
          <source type='video/mp4' />
          Your browser does not support the video tag.
        </video>
      </div>

      {/* 点击其他热点 */}

      {hotInd > 0 ? (
        <div className={'A4othHot'}>
          <Hot2
            data={myData.dance.hot[hotInd].data}
            closeFu={() => setHotInd(-1)}
            name={myData.dance.hot[hotInd].name}
          />
        </div>
      ) : null}

      {/* 最后一个过长动画 */}
      <div className={classNames('A4last', lastVideo ? 'A4lastShow' : '')}>
        <video
          ref={videoRefLast}
          playsInline
          muted
          webkit-playsinline='true'
          x5-video-player-type='h5'
          src={dataUrlSame + myData.dance.lastVideo}
          onEnded={() => history.push('/chef')}
        >
          <source type='video/mp4' />
          Your browser does not support the video tag.
        </video>
        <div
          title='跳过'
          className='A3videoLastBtn'
          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
          onClick={() => history.push('/chef')}
        ></div>
      </div>
    </div>
  )
}

const MemoA4dance = React.memo(A4dance)

export default MemoA4dance