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'

const domArr = [
  { name: '藏品基本信息', arr: Y11infoArr2 },
  { name: '尺寸和质量', arr: Y11infoArr3 },
  { name: '入藏及来源', arr: Y11infoArr4 },
  { name: '藏品历史及流传', arr: Y11infoArr5 }
]

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>

      {domArr.map(v1 => (
        <div className='Y1z2' key={v1.name}>
          <div className='Y1tit'>{v1.name}</div>
          <div className='y1z2_1'>
            {v1.arr.map((v2, i) => (
              <div
                className={classNames('y1z2_1row1', v2.full ? 'y1z2_1row1Full' : '')}
                key={v2.name}
              >
                <div className='y1z2_1r11'>{v2.name}：</div>

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

const MemoY11com = React.memo(Y11com)

export default MemoY11com
