import ImageLazy from '@/components/ImageLazy'
import React from 'react'
import classNames from 'classnames'
import { Y11infoArr1, Y11infoArr2, Y11infoArr3, Y11infoArr4, Y11infoArr5 } from './data'
import { C1GoodType } from '@/pages/A3_ledger/C1ledger/type'

type Props = {
  info: C1GoodType
}

function Y11com({ info }: Props) {
  return (
    <div className='Y1rowZ'>
      <div className='Y1tit'>档案信息</div>
      <div className='Y1z1'>
        <div className='Y1rowZll'>
          {Y11infoArr1.map((v, i) => (
            <div className='Y1row' key={v.name}>
              <div className='Y1rowll'>{v.name}：</div>
              <div className='Y1rowrr'>{info[v.key] || '（空）'}</div>
            </div>
          ))}
        </div>
        <div className='Y1rowZrr'>
          <ImageLazy
            width={200}
            height={200}
            srcBig={info.thumbPc || info.filePath}
            src={info.thumb}
          />
        </div>
      </div>

      <div className='Y1z2'>
        <div className='Y1tit'>藏品基本信息</div>
        <div className='y1z2_1'>
          {Y11infoArr2.map((v, i) => (
            <div className={classNames('y1z2_1row1', v.full ? 'y1z2_1row1Full' : '')} key={v.name}>
              <div className='y1z2_1r11'>{v.name}：</div>

              <div className='y1z2_1r12'>{v.backFu ? v.backFu(info) : info[v.key] || '（空）'}</div>
            </div>
          ))}
        </div>
      </div>

      <div className='Y1z2'>
        <div className='Y1tit'>尺寸和质量</div>
        <div className='y1z2_1'>
          {Y11infoArr3.map((v, i) => (
            <div className={classNames('y1z2_1row1', v.full ? 'y1z2_1row1Full' : '')} key={v.name}>
              <div className='y1z2_1r11'>{v.name}：</div>
              <div className='y1z2_1r12'>{v.backFu ? v.backFu(info) : info[v.key] || '（空）'}</div>
            </div>
          ))}
        </div>
      </div>

      <div className='Y1z2'>
        <div className='Y1tit'>入藏及来源</div>
        <div className='y1z2_1'>
          {Y11infoArr4.map((v, i) => (
            <div className={classNames('y1z2_1row1', v.full ? 'y1z2_1row1Full' : '')} key={v.name}>
              <div className='y1z2_1r11'>{v.name}：</div>
              <div className='y1z2_1r12'>{v.backFu ? v.backFu(info) : info[v.key] || '（空）'}</div>
            </div>
          ))}
        </div>
      </div>

      <div className='Y1z2'>
        <div className='Y1tit'>藏品历史及流传</div>
        <div className='y1z2_1'>
          {Y11infoArr5.map((v, i) => (
            <div className={classNames('y1z2_1row1')} key={v.name}>
              <div className={classNames('y1z2_1r11', v.name.length >= 7 ? 'y1z2_1r11long' : '')}>
                {v.name}：
              </div>
              <div className='y1z2_1r12'>{v.backFu ? v.backFu(info) : info[v.key] || '（空）'}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const MemoY11com = React.memo(Y11com)

export default MemoY11com
