management/src/pages/Contract/Content/Income/components/Tabs/Detail/index.tsx

import { ContractType } from '@/store/mobx/contract'
import { iContractState } from '@/types/contract'
import { contractConsts } from '@/utils/common/constStatus'
import { dayjsFormat, formatMoney } from '@/utils/util'
import { Tooltip } from 'antd'
import React, { useMemo } from 'react'
import styles from './index.module.scss'
import { BigNumber } from "bignumber.js"

interface DetailProps {
  contract: iContractState
  type: "income" | "expenditure"
}
const Detail:React.FC<DetailProps> = (props) => {
  const { contract, type } = props
  const type_name = type === ContractType.INCOME ? '回款' : '支付'
  const progress = useMemo(() => {
    const i = new BigNumber(type === ContractType.INCOME ? contract.returned : contract.paid).dividedBy(contract.price).toFixed(2)
    const j = new BigNumber(1).minus(i)
    const k = new BigNumber(contract.price).minus(type === ContractType.INCOME ? contract.returned : contract.paid)
    return { returned: new BigNumber(i).multipliedBy(100) + '%', unReturned: new BigNumber(j).multipliedBy(100) + '%', unReturnedMoney: k }
  }, [ contract ])
  return contract.id ? (
    <div className={styles.detailTab}>
      <table className={styles.detailTable}>
        <tbody>
        <tr><th style={{ width: '10%' }}>项目内容</th><td style={{ width: '40%' }}>{contract.content}</td><th style={{ width: '10%' }}>合同名称</th><td style={{ width: '40%' }}>{contract.name}</td></tr>
        <tr><th>合同编号</th><td>{contract.code}</td><th>状态</th><td><span className={contractConsts[contract.status].className}>{contractConsts[contract.status].text}</span></td></tr>
        <tr><th>合同金额</th><td>{formatMoney(contract.price)}</td><th>创建时间</th><td>{contract.createTime}</td></tr>
        <tr><th>{type_name}金额</th><td>{formatMoney(type === ContractType.INCOME ? contract.returned : contract.paid)}</td><th>未{type_name}金额</th><td>{formatMoney(progress.unReturnedMoney)}</td></tr>
          <tr><th>{type_name}进度</th><td className={styles.progressContainer} colSpan={3}><div className={styles.progressContent}>
            <Tooltip title={`已${type_name}：￥ ${formatMoney(type === ContractType.INCOME ? contract.returned : contract.paid)}`}>
              <div className={[ styles.progressBar, 'pi-bg-success' ].join(' ')} style={{ width: progress.returned }}>{progress.returned}</div>
            </Tooltip>
            <Tooltip title={`未${type_name}：￥ ${formatMoney(progress.unReturnedMoney)}`}>
              <div className={[ styles.progressBar, 'pi-bg-gray' ].join(' ')} style={{ width: progress.unReturned }}>{progress.unReturned}</div>
            </Tooltip>
          </div></td></tr>
        <tr><th>甲方</th><td>{contract.partyA}</td><th>甲方签约人</th><td>{contract.partyASigner}</td></tr>
        <tr><th>乙方</th><td>{contract.partyB}</td><th>乙方签约人</th><td>{contract.partyBSigner}</td></tr>
        <tr><th>签约日期</th><td colSpan={3}>{dayjsFormat(contract.signerTime, 'YYYY-MM-DD')}</td></tr>
        <tr><th>备注</th><td colSpan={3}>{contract.remarks}</td></tr>
        </tbody>
      </table>
    </div>
  ) : null
}


export default Detail