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

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import history from '@/utils/history'
import classNames from 'classnames'
import B3txt from './B3txt'
import useLoding from '@/components/ownUse/useLoding'

function B3yun() {
  // 一级图标id
  const [ac1, setAc1] = useState(0)

  useEffect(() => {
    ac2FlagRef.current = true
    setAc2('')
  }, [ac1])

  // 热点点位数组
  const hotArr = useMemo(() => {
    if (myData.yun.iconArr[ac1 - 1]) return myData.yun.iconArr[ac1 - 1].dian || []
    else return []
  }, [ac1])

  // 是否进入二级状态
  const ac2Time = useRef(-1)

  const ac2FlagRef = useRef(true)

  const [ac2, setAc2] = useState('')

  // 图片的放大和位移
  const [imgChange, setImgChange] = useState('')

  const setAc2Fu = useCallback(
    (id: string) => {
      if (!ac2FlagRef.current) return

      setAc2(id)

      // 控制图片放大
      const chage = hotArr.find(v => v.id === id)?.change

      if (chage) setImgChange(chage)
      // else setImgChange('')

      ac2FlagRef.current = false

      clearTimeout(ac2Time.current)

      ac2Time.current = window.setTimeout(() => {
        ac2FlagRef.current = true
        setImgChange('')
        setAc2('')
      }, 3000)
    },
    [hotArr]
  )

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

  return (
    <div className={styles.B3yun}>
      <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.yun.bjImg} alt='' />

      {/* 左侧主体 */}
      <div className='yunll' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
        {/* 主要 */}
        <div className='yunllCon'>
          <div className='yunll1' style={{ transform: imgChange }}>
            <img onLoad={imgNumFu} id='bgImgBox' src={`${baseURL}yun/di.jpg`} alt='' />

            {/* 高亮白色盒子 */}
            {ac1 > 0 && imgNow ? (
              <div
                style={{ backgroundImage: `url(${baseURL}yun/liang${ac1}.png)` }}
                className={classNames('yunll1Ac', ac2 ? 'yunll1AcHide' : '')}
              >
                {/* 点 */}
                {hotArr.map(v => (
                  <div
                    className='yunDian'
                    onClick={() => setAc2Fu(v.id)}
                    key={v.id}
                    style={{ top: v.loc.top, left: v.loc.left }}
                  >
                    <img src={`${baseURL}yun/hot.png`} alt='' />
                  </div>
                ))}
              </div>
            ) : null}

            {/* 二级别高亮 */}
            {imgNow ? (
              <div className={classNames('yunAc2Box', ac2 ? 'yunAc2BoxAc' : '')}>
                {ac2 ? <img className='yunShan' src={`${baseURL}yun/${ac2}.png`} alt='' /> : null}
              </div>
            ) : null}

            {/* {ac1 > 0 && ac2 ? <div className=''></div> : null} */}
          </div>
        </div>

        {imgNow ? (
          <div className='yunll2'>
            {myData.yun.iconArr.map(item => (
              <div
                onClick={() => setAc1(item.id)}
                className={classNames('yunll2Row', ac1 === item.id ? 'yunll2RowAc' : '')}
                key={item.id}
                title={item.title}
              ></div>
            ))}
          </div>
        ) : null}
      </div>

      {/* 右侧文字 */}
      {imgNow ? (
        <div className='yunrr' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
          <div className='yunrr1'>
            <h2>{myData.yun.name}</h2>
            <div style={{ backgroundImage: `url(${baseURL}yun/titLiang.png)` }}>
              {myData.yun.tit}
            </div>
          </div>

          <div className='yunrr2'>
            <div>
              <B3txt ac1={ac1} ac2={ac2} setAc2Fu={val => setAc2Fu(val)} />
            </div>
          </div>
        </div>
      ) : null}

      {/* 右下角的图标 */}
      {imgNow ? (
        <div className='yunBtn'>
          <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
          <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
        </div>
      ) : null}
    </div>
  )
}

const MemoB3yun = React.memo(B3yun)

export default MemoB3yun