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

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

function A6plow() {
  // 初始显示和隐藏
  const [cutVideoShow, setCutVideoShow] = useState(false)

  // 控制视频播放的方法
  const videoPlayFu = useCallback((index: number) => {
    setTimeout(() => {
      const domAll: any = document.querySelectorAll('.A6video')
      if (domAll && domAll.length) {
        domAll.forEach((v: HTMLVideoElement, i: number) => {
          if (index === i) v.play()
          else {
            v.pause()
            v.currentTime = 0
          }
        })
      }
    }, 100)
  }, [])

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

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

  // 左侧按钮的选中
  const [leftAc, setLeftAc] = useState(0)

  const leftAcFu = useCallback(
    (index: number) => {
      videoPlayFu(index)
      setLeftAc(index)
    },
    [videoPlayFu]
  )

  // 底部文字
  const floorTxt = useMemo(() => {
    return myData.plow.info[leftAc].txt
  }, [leftAc])

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

  // 汉代庄园田耕记二维码
  const [code, setCode] = useState(false)

  // 蔬菜-庄家切换
  const [staCut, setStaCut] = useState('蔬菜')

  // useEffect(() => {
  //   setLeftAc(0)
  // }, [staCut])

  // 打开热点
  const [acName, setAcName] = useState('')

  const hotInfo = useMemo(() => {
    let info = {} as PlowHotType

    const temp = [...myData.plow.isSSSArr, ...myData.plow.info[leftAc].hot]

    if (temp && temp.find(v => v.name === acName)) {
      info = temp.find(v => v.name === acName)
    }

    return info
  }, [acName, leftAc])

  return (
    <div className={styles.A6plow}>
      {/* 初始静态图 */}
      <BaseImg
        isShow={cutVideoShow}
        iconSrc={`${baseURL}plow/mulu.png`}
        parentFu={() => btnStart()}
        bgImg={`${baseURL}${myData.plow.baseImg}`}
        imgNow={imgNow}
        imgNumFu={imgNumFu}
        bird='tianJian'
        num={50}
      />

      {/* 蔬菜的盒子 */}
      <div
        className='A6SS'
        hidden={staCut !== '蔬菜'}
        style={{ backgroundImage: `url(${baseURL}plow/bg.jpg)` }}
      >
        {/* 热点 */}
        {myData.plow.isSSSArr.map((v: PlowHotType, i) => (
          <HotIcon
            isModel={v.isModel ? true : false}
            style={{
              top: v.locPage.top,
              left: v.locPage.left
            }}
            key={i}
            index={i}
            clickSon={() => setAcName(v.name)}
            hoverSrc={v.hoverSrc}
            isXiao={0.67}
          />
        ))}
      </div>

      {/* 底部2个按钮 */}
      {imgNow ? (
        <div className='A6floorBox' hidden={!cutVideoShow}>
          {myData.plow.flooBtn.map((v, i1) => (
            <div
              onClick={() => {
                setStaCut(v)
                // 每次切换都是播放第4个视频
                leftAcFu(0)
              }}
              className={classNames(v === staCut ? 'A6FrowAc' : '')}
              key={v}
            >
              {v}
            </div>
          ))}
        </div>
      ) : null}

      {/*  庄稼 主要内容 */}
      {imgNow ? (
        <div className={classNames('A6main', cutVideoShow ? 'A6mainShow' : '')}>
          {/* 左侧title */}
          <div
            className='A6Lbtn'
            hidden={staCut !== '庄稼'}
            style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}
          >
            {myData.plow.info.map((item, index) => (
              <div
                hidden={item.name === '施肥'}
                key={index}
                className='A6LbtnRow'
                onClick={() => leftAcFu(index)}
                style={{
                  backgroundImage: `url(${baseURL}plow/left${leftAc === index ? 'Ac' : ''}.png)`,
                  color: leftAc === index ? '#BD7656' : '#DACB8B'
                }}
              >
                {item.name}
              </div>
            ))}
          </div>

          {/* 底部文字 */}
          <div
            hidden={staCut !== '庄稼'}
            className='A6txt'
            style={{ backgroundImage: `url(${baseURL}plow/txtBg.png)` }}
            dangerouslySetInnerHTML={{ __html: floorTxt }}
          ></div>

          {/* 视频加热点 */}
          <div className='A6videoBox'>
            {myData.plow.info.map((item, index) => (
              <div className={classNames(leftAc === index ? 'A6vShow' : '')} key={index}>
                <video
                  className='A6video'
                  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>

                {/* 热点 */}
                {item.hot.map((v: PlowHotType, i) =>
                  v.name === '汉代农具' ? (
                    <div
                      onClick={() => setAcName('汉代农具')}
                      key={i}
                      className='A6leftBtn'
                      style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
                    >
                      汉代农具
                    </div>
                  ) : (
                    <HotIcon
                      isModel={v.isModel ? true : false}
                      style={{
                        top: v.locPage.top,
                        left: v.locPage.left
                      }}
                      key={i}
                      index={i}
                      clickSon={() => setAcName(v.name)}
                      hoverSrc={v.hoverSrc}
                      isXiao={0.67}
                    />
                  )
                )}
              </div>
            ))}
          </div>

          {/* 跳到下一章 */}
          <NextPage clickSon={() => setLastVideo(true)} txt='结束饮宴' />
          {/* 右下角按钮 */}
          <FloorBtn plowFu={() => setCode(true)} />
        </div>
      ) : null}

      {acName && hotInfo.name ? (
        <Hot2 data={hotInfo.data} closeFu={() => setAcName('')} name={hotInfo.name} />
      ) : null}

      {/* 二维码弹窗 */}
      {imgNow ? (
        <div className={classNames('A6codeBox', code ? 'A6codeBoxShow' : '')}>
          <img className='A6cimg' src={baseURL + 'plow/code.png'} alt='' />
          <p>{isPc ? '扫码二维码，体验小游戏' : '长按图片，保存二维码'}</p>
          <p>{isPc ? '' : '体验小游戏'}《汉代庄园田耕记》</p>

          {/* 右下角的返回按钮 */}
          <BtnRight imgName='back' clickSon={() => setCode(false)} title='返回' />
        </div>
      ) : null}

      {/* 结尾动画 */}
      {imgNow ? (
        <EndVideo
          lastVideo={lastVideo}
          delDom='.A6main'
          src={baseURL + myData.plow.lastVideo}
          path='/xianJu'
          noBtn={true}
        />
      ) : null}
    </div>
  )
}

const MemoA6plow = React.memo(A6plow)

export default MemoA6plow