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

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

function Hot2({ closeFu, data, name }: Props) {
  // 底部选中
  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 id='HotOpCss' className={styles.Hot2}>
      <div className='h2Main' style={{ backgroundImage: `url(${baseURL}visit/hot2bj.png)` }}>
        {/* 标题 */}
        <div className='h2Titele'>
          <img src={`${baseURL}visit/img-yun1.png`} alt='' />
          <img className='h2TimgR' src={`${baseURL}visit/img-yun2.png`} alt='' />
          {name}
        </div>

        <div className={classNames('h2TuWen', data.length <= 1 ? 'h2TuWenDuo' : '')}>
          {/* 图片 */}
          {acData.type && acData.type === 'model' ? (
            <div className='H2model'>
              <iframe
                title={name}
                src={`${baseURL}modelLoding/model.html?u=${acData.imgArr[0]}`}
                frameBorder='0'
              ></iframe>
            </div>
          ) : (
            acData.imgArr.map((url, index) => <LazyImg src={baseURL + 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 hoverD'>
          <img onClick={closeFu} src={`${baseURL}visit/back.png`} alt='' />
        </div>
      </div>
      <div className='h2Right' onClick={closeFu}></div>
    </div>
  )
}

const MemoHot2 = React.memo(Hot2)

export default MemoHot2