import React, { useEffect, useMemo, useRef } from 'react'
import styles from './index.module.scss'
import { B1listType } from '@/pages/B1ledger/data'
import ImageLazy from '@/components/ImageLazy'
import { pageShowArr1, pageShowArr2 } from './data'
import classNames from 'classnames'
import Z3upFiles from '@/components/Z3upFiles'
import { goodsSelect } from '@/utils/select'

type Props = {
  info: B1listType
  auto?: boolean
}

function Tab1info({ info, auto }: Props) {
  // 上传附件的ref
  const filesRef = useRef<any>(null)

  useEffect(() => {
    filesRef.current?.showList(info.file || [])
  }, [info.file])

  // 藏品状态
  const goodsSta = useMemo(() => {
    let txt = ''
    const obj = goodsSelect.find(v => v.value === info.status)
    if (obj) txt = obj.label
    return txt
  }, [info.status])

  return (
    <div className={styles.Tab1info} style={{ height: auto ? 'auto' : '100%' }}>
      {info.id ? (
        <>
          <div className='T1_1'>
            <div className='T1_1ll'>
              {pageShowArr1.map(v => (
                <div className={classNames('T1_1row', v.full ? 'T1_1rowFull' : '')} key={v.name}>
                  <span>{v.name}：</span>
                  <p>{v.fu ? v.fu(info) : info[v.key as 'num'] || '（空）'}</p>
                </div>
              ))}
            </div>
            {goodsSta ? (
              <div className='T1_1rr'>
                <span>藏品状态：</span>
                <p>{goodsSta}</p>
              </div>
            ) : null}
          </div>

          <div className='T1_1 T1_2'>
            <div className='T1_1ll'>
              {pageShowArr2.map(v => (
                <div className={classNames('T1_1row', v.full ? 'T1_1rowFull' : '')} key={v.name}>
                  <span>{v.name}：</span>
                  <p>{v.fu ? v.fu(info) : info[v.key as 'num'] || '（空）'}</p>{' '}
                </div>
              ))}
            </div>
            <div className='T1_1rr'>
              <ImageLazy
                width={150}
                height={150}
                srcBig={info.thumbPc || info.thumb}
                src={info.thumb}
              />
            </div>
          </div>

          <div className='T1_3'>
            <div>附件：</div>
            <div>
              <Z3upFiles
                isLook={true}
                size={500}
                ref={filesRef}
                fileCheck={false}
                dirCode='goodsAdd'
                myUrl='cms/order/register/upload'
              />
            </div>
          </div>
        </>
      ) : null}
    </div>
  )
}

const MemoTab1info = React.memo(Tab1info)

export default MemoTab1info
