HeNan_HanJia/Code/src/pages/A2visit/PanoVideo/Hot2/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { VisitHotDataType } from '@/types'
import classNames from 'classnames'
import LazyImg from '@/components/LazyImg'
import useDataUrl from '@/components/ownUse/useDataUrl'

type Props = {
  closeFu: () => void
  data: VisitHotDataType
  name: string
}

function Hot2({ closeFu, data, name }: Props) {
  const { dataUrlSame } = useDataUrl()

  const [opShow, setOpShow] = useState(false)

  useEffect(() => {
    setTimeout(() => {
      setOpShow(true)
    }, 300)
  }, [])

  // 底部选中
  const [flooInd, setFlooInd] = useState(0)

  const acData = useMemo(() => {
    return data[flooInd] || []
  }, [data, flooInd])

  // 点击切换底部
  const flooIndFu = useCallback((ind: number) => {
    const dom = document.querySelector('.h2TuWen')
    if (dom) dom.scrollTop = 0
    setFlooInd(ind)
  }, [])

  return (
    <div className={styles.Hot2} style={{ opacity: opShow ? 1 : 0 }}>
      <div className='h2Main' style={{ backgroundImage: `url(${dataUrlSame}visit/hot2bj.png)` }}>
        {/* 标题 */}
        <div className='h2Titele'>
          <img src={`${dataUrlSame}visit/img-yun1.png`} alt='' />
          <img className='h2TimgR' src={`${dataUrlSame}visit/img-yun2.png`} alt='' />
          {name}
        </div>

        <div className={classNames('h2TuWen', data.length <= 1 ? 'h2TuWenDuo' : '')}>
          {/* 图片 */}
          {acData.imgArr.map((url, index) => (
            <LazyImg src={dataUrlSame + url} key={index} />
          ))}

          {/* 文字 */}
          <div className='h2txt' dangerouslySetInnerHTML={{ __html: acData.txt }}></div>
        </div>

        {/* 底部 */}
        {data.length <= 1 ? null : (
          <div className='h2FlooBox'>
            <div className='h2Floo'>
              {data.map((item, index) => (
                <div
                  onClick={() => flooIndFu(index)}
                  className={classNames(
                    'h2FlooRow sizeNo',
                    flooInd === index ? 'h2FlooRowShow' : ''
                  )}
                  key={index}
                >
                  {item.name}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 返回按钮 */}
        <div className='h2Back'>
          <img onClick={closeFu} src={`${dataUrlSame}visit/back.png`} alt='' />
        </div>
      </div>
      <div className='h2Right' onClick={closeFu}></div>
    </div>
  )
}

const MemoHot2 = React.memo(Hot2)

export default MemoHot2