import React, { useEffect, useRef } from 'react'
import styles from './index.module.scss'
import BtnRight from '@/components/BtnRight'
import { GoodsType } from '@/types'
import { baseURL } from '@/utils/http'

type Props = {
  closeFu: () => void
  info: GoodsType
}

function HotInfo({ closeFu, info }: Props) {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (info.type === 'video') {
      setTimeout(() => {
        if (videoRef.current) videoRef.current.play()
      }, 100)
    }
  }, [info.type])

  return (
    <div id='HotOpCss' className={styles.HotInfo}>
      {/* 左边主体 */}
      <div className='S3Ileft'>
        {info.type === 'img' ? (
          <img src={baseURL + info.inSrc} alt='' />
        ) : info.type === 'video' ? (
          <video muted ref={videoRef} src={baseURL + info.inSrc} controls></video>
        ) : (
          <iframe
            title={info.name}
            src={`${baseURL}modelLoding/model.html?u=${info.inSrc}`}
            frameBorder='0'
          ></iframe>
        )}
      </div>

      {/* 右边文字 */}
      <div className='S3Iright'>
        <h3 className='sizeNo'>{info.name}</h3>
        <div dangerouslySetInnerHTML={{ __html: info.inTxt }}></div>
      </div>

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

const MemoHotInfo = React.memo(HotInfo)

export default MemoHotInfo