import React, { useMemo, useState } from 'react'
import styles from './index.module.scss'
import { GoodsType } from '@/pages/Zother/SonGoodsList/data'
import { FileListType } from '@/components/Z3upFiles/data'
import ImageLazy from '@/components/ImageLazy'
import classNames from 'classnames'
import { GIrowArr } from '../data'

type Props = {
  info: GoodsType
  fileList: FileListType[]
}

function GItab1({ info, fileList }: Props) {
  const imgList = useMemo(() => {
    return fileList.filter(v => v.type === 'img')
  }, [fileList])
  const [imgAc, setImgAc] = useState(0)
  const imgAcObj = useMemo(() => {
    let res: any = ''
    if (imgList.length && imgList[imgAc]) res = imgList[imgAc]
    return res
  }, [imgAc, imgList])

  return (
    <div className={styles.GItab1}>
      <div className='GI1left' style={{ width: imgList.length === 0 ? '100%' : '' }}>
        {GIrowArr.map((item, index) => (
          <div key={index} className={classNames('GI1Lrow', item.full ? 'GI1LrowFull' : '')}>
            <div>{item.name}</div>
            <p>{item.resFu ? item.resFu(info) : info[item.key as 'num'] || '（空）'}</p>
          </div>
        ))}
      </div>
      {imgList.length === 0 ? null : (
        <div className='GI1Right'>
          <div className='GI1Right1'>
            {imgAcObj ? (
              <ImageLazy
                width={240}
                height={220}
                src={imgAcObj.thumb || imgAcObj.filePath}
                srcBig={imgAcObj.filePath || imgAcObj.thumb}
              />
            ) : null}
          </div>
          <div className='GI1Right2'>
            {imgList.map((item, index) => (
              <div
                onClick={() => setImgAc(index)}
                className={classNames('GI1Rrow', imgAc === index ? 'GI1RrowAc' : '')}
                key={item.id}
              >
                <ImageLazy
                  width={64}
                  height={64}
                  src={item.thumb || item.filePath}
                  srcBig={item.filePath || item.thumb}
                  noLook={true}
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

const MemoGItab1 = React.memo(GItab1)

export default MemoGItab1
