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

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> {A2AtopTypeEditLabel(info.type)}日期 ：
        </div>
        <div className='lLtxtRight'>{info.dateStart}</div>
      </div>

      {['ZL', 'WX'].includes(info.type) ? (
        <div className='lLtxt'>
          <div className='lLtxtLeft'>{info.type === 'ZL' ? '预计归还日期' : '完成日期'}：</div>
          <div className='lLtxtRight'>{info.dateEnd || '（空）'}</div>
        </div>
      ) : null}

      {['BX', 'DS', 'WX'].includes(info.type) ? (
        <div className='lLtxt'>
          <div className='lLtxtLeft'>
            {info.type === 'BX' ? '问题描述' : info.type === 'DS' ? '定损结果' : '处理结果'}：
          </div>
          <div
            className='lLtxtRight'
            dangerouslySetInnerHTML={{
              __html: info.rtfDesc.isSection ? '（空）' : info.rtfDesc.txtArr[0].txt
            }}
          ></div>
        </div>
      ) : null}

      {['DS'].includes(info.type) ? (
        <div className='lLtxt'>
          <div className='lLtxtLeft'>
            <span>*</span> 定损报价：
          </div>
          <div className='lLtxtRight'>{info.price || '（空）'}</div>
        </div>
      ) : null}

      {['DS', 'WX'].includes(info.type) ? (
        <div className='lLtxt'>
          <div className='lLtxtLeft'>{info.type === 'DS' ? '报损单发送对象' : '处理人'}：</div>
          <div className='lLtxtRight'>{info.user || '（空）'}</div>
        </div>
      ) : null}

      <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
