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'

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('')
      }, 4000)
    },
    [hotArr]
  )

  return (
    <div className={styles.B3yun} style={{ backgroundImage: `url(${baseURL + myData.yun.bjImg})` }}>
      {/* 左侧主体 */}
      <div className='yunll' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
        {/* 主要 */}
        <div className='yunllCon'>
          <div
            className='yunll1'
            style={{ backgroundImage: `url(${baseURL}yun/di.jpg)`, transform: imgChange }}
          >
            {/* 高亮白色盒子 */}
            {ac1 > 0 ? (
              <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}

            {/* 二级别高亮 */}

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

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

        <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>
      </div>

      {/* 右侧文字 */}
      <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>

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

const MemoB3yun = React.memo(B3yun)

export default MemoB3yun