tieTa3D/src/pages/ALookPage/components/LookTxt/index.tsx

import React, { useEffect, useRef } from 'react'
import styles from './index.module.scss'
import { A2AListType } from '@/types'
import Z3upFiles from '@/components/Z3upFiles'

type Props = {
  info: A2AListType
}

function LookTxt({ info }: Props) {
  // 合同附件的ref
  const listFilesRef = useRef<any>(null)

  useEffect(() => {
    // 回显 合同附件
    listFilesRef.current.sonFilesShowFu(info.files)
  }, [info.files])

  return (
    <div className={styles.LookTxt}>
      <div className='lLtxt'>
        <div className='lLtxtLeft'>
          <span>*</span> 钉钉审批编号：
        </div>
        <div className='lLtxtRight'>{info.dingNum}</div>
      </div>

      <div className='lLtxt'>
        <div className='lLtxtLeft'>合同附件：</div>
        <div className='lLtxtRight'>
          <Z3upFiles
            max={5}
            accept='*'
            isLook={true}
            ref={listFilesRef}
            fileCheck={false}
            dirCode='A2business'
            myUrl='cms/order/upload'
            topType={info.type}
          />
        </div>
      </div>

      <div className='lLtxt'>
        <div className='lLtxtLeft'>
          <span>*</span> 租赁日期 ：
        </div>
        <div className='lLtxtRight'>{info.dateStart}</div>
      </div>

      <div className='lLtxt'>
        <div className='lLtxtLeft'>预计归还日期：</div>
        <div className='lLtxtRight'>{info.dateEnd || '（空）'}</div>
      </div>

      <div className='lLtxt'>
        <div className='lLtxtLeft'>备注：</div>
        <div
          className='lLtxtRight'
          dangerouslySetInnerHTML={{
            __html: info.rtf.isSection ? '（空）' : info.rtf.txtArr[0].txt
          }}
        ></div>
      </div>
    </div>
  )
}

const MemoLookTxt = React.memo(LookTxt)

export default MemoLookTxt