/* eslint-disable jsx-a11y/iframe-has-title */
import { RootState } from '@/store';
import { modelItem } from '@/types';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import styles from './index.module.scss'

type props = {
  modelId: number,
  closeModel: () => void
}
export default function Model({ modelId, closeModel }: props) {

  const { modelInfo } = useSelector((state: RootState) => state.homeStore)
  const { list } = modelInfo
  const [info, setInfo] = useState({} as modelItem)

  const closeModelFu =()=>{
    setInfo({} as modelItem)
    closeModel()
  }
  useEffect(() => {
    if (modelId) {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      const info = list.filter(v => v.id === modelId)[0]
      setInfo(info)
      console.log('-------', info);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [modelId])

  return (
    <div className={styles.Model}>
      <div className='ifrBox'>
        {info.fileName?(<iframe src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>):null}
        
      </div>
      <div className='rightTxt'>
        <div className='model_title'>{info.name}</div>
        {
        info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
        }
        {
          info.dictAgeFront ? (<div className='model_age' title={info.dictAgeFront}>年代：{info.dictAgeFront}</div>) : <div className='model_age'>暂无信息</div>
        }
        {
          <div className='model_size'>
            {info.sizeLength||info.sizeWidth||info.sizeHeight?(<div>尺寸</div>):'暂无信息'}
            {info.sizeLength?(<div>长 {info.sizeLength.replace(',','')}</div>):null}
            {info.sizeWidth?(<div>宽 {info.sizeWidth.replace(',','')}</div>):null}
            {info.sizeHeight?(<div>高 {info.sizeHeight.replace(',','')}</div>):null}
          </div>
        }

      </div>

        <div className='flootBtnBox'>
        <div className='flootRow'>+</div>
        <div className='flootRow'>-</div>
        <div className='flootRow'>1</div>
        <div className='flootRow'>2</div>
        <div className='flootRow' onClick={() => closeModelFu()}>3</div>
        </div>
          
    </div>
  )
}