import React, { useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { GoodsRow } from '@/types'
import { baseURL } from '@/utils/history'
import { Image } from 'antd'
import LazyImg from '../LazyImg'

type Props = {
  info: GoodsRow
  closeFu: () => void
  type: 'img' | 'model' | 'video'
}

function LookGood({ info, closeFu, type }: Props) {
  const [imgLook, setImgLook] = useState('')

  return (
    <div className={classNames(styles.LookGood)} id='LookGood'>
      {/* 关闭按钮 */}
      <img onClick={closeFu} className='Lcolse' src={baseURL + 'goods/close.png'} alt='' />

      <div className={classNames('Lmain', type === 'model' ? 'LmainFull' : '')}>
        <div className='LmainCen'>
          {type === 'img' ? (
            <div className='Limg' onClick={() => setImgLook(baseURL + info.lookSrc)}>
              <LazyImg src={baseURL + info.lookSrc} />
            </div>
          ) : null}
          {type === 'model' ? (
            <iframe
              title={'模型'}
              src={`${baseURL}modelLoding/model.html?u=${info.lookSrc}`}
              frameBorder='0'
            ></iframe>
          ) : null}
          {type === 'video' ? <video src={baseURL + info.lookSrc} controls /> : null}
        </div>

        <div className='LmTxt'>{info.name}</div>
      </div>

      {/* pc端查看图片 */}
      {imgLook ? (
        <Image
          preview={{
            visible: !!imgLook,
            src: imgLook,
            onVisibleChange: () => setImgLook('')
          }}
        />
      ) : null}
    </div>
  )
}

const MemoLookGood = React.memo(LookGood)

export default MemoLookGood