miniapp/src/pages/mine/mortgageCalc/components/Result.jsx

import React, { useEffect, useState } from 'react'
import { ScrollView } from '@tarojs/components'
import InnerTabs from '@/components/Tabs'
import './style.scss'

const tabs = ['等额本息', '等额本金']

const getMixList = (lst1, lst2) => {
  const len = lst1.length > lst2.length ? lst1.length : lst2.length
  const rtn = []

  let lastPaid1 = 0;
  let lastPaid2 = 0;
  for (let i = 0; i < len; i += 1) {
    const it1 = lst1[i] || {}
    const it2 = lst2[i] || {}

    const paid1 = it1.paid || 0;
    const paid2 = it2.paid || 0;

    rtn.push({
      benjin: (it1.benjin || 0) + (it2.benjin || 0),
      benxi: (it1.benxi || 0) + (it2.benxi || 0),
      rate: (it1.rate || 0) + (it2.rate || 0),
      paid: (paid1 || lastPaid1) + (paid2 || lastPaid2),
    })

    if (paid1 > 0) {
      lastPaid1 = paid1;
    }
    if (paid2 > 0) {
      lastPaid2 = paid2;
    }
  }

  return rtn;
}

export default (props) => {
  const { dataSource, isMixed, onClose } = props

  const [current, setCurrent] = useState(1)
  const [data, setData] = useState({})
  const [summary, setSummary] = useState({})
  const [list, setList] = useState([])

  const tipText = current === 1 ? '每月还款' : '贷款总额'

  useEffect(() => {
    if (!dataSource[0] && !dataSource[1]) return;

    if (isMixed) {

      //
      const bj = {

        summary: {
          money: dataSource[0].bj.summary.money + dataSource[1].bj.summary.money,
          moneyOfFirstMonth: dataSource[0].bj.summary.moneyOfFirstMonth + dataSource[1].bj.summary.moneyOfFirstMonth,
          totalRate: dataSource[0].bj.summary.totalRate + dataSource[1].bj.summary.totalRate,
          totalMoney: dataSource[0].bj.summary.totalMoney + dataSource[1].bj.summary.totalMoney,
        },
        list: getMixList(dataSource[0].bj.list, dataSource[1].bj.list)
      }

      const bx = {
        summary: {
          money: dataSource[0].bx.summary.money + dataSource[1].bx.summary.money,
          moneyOfFirstMonth: dataSource[0].bx.summary.moneyOfFirstMonth + dataSource[1].bx.summary.moneyOfFirstMonth,
          totalRate: dataSource[0].bx.summary.totalRate + dataSource[1].bx.summary.totalRate,
          totalMoney: dataSource[0].bx.summary.totalMoney + dataSource[1].bx.summary.totalMoney,
        },
        list: getMixList(dataSource[0].bx.list, dataSource[1].bx.list)
      }

      setData({ bj, bx })
    } else {
      const res = dataSource[0] || dataSource[1]
      setData(res)
    }
  }, [dataSource, isMixed])

  useEffect(() => {
    const { bj, bx } = data || {}
    if (current === 1) {
      setSummary(bx?.summary || {})
      setList(bx?.list || [])
    } else {
      setSummary(bj?.summary || {})
      setList(bj?.list || [])
    }
  }, [current, data])

  return (
    <view className='calc-result'>
      <view className='header-nav'>
        <InnerTabs tabs={tabs} current={current} onChange={setCurrent} />
        <view className='header-close' onClick={onClose}>
          <text>重新计算</text>
        </view>
      </view>

      <view className='summary-card'>
        <view className='tip'>{tipText}</view>
        <view className='money'>
          {current !== 1 ? Number(summary.money / 10000).toFixed(0) : Number(summary.moneyOfFirstMonth || 0).toFixed(2)}
          <text className='small'>{current !== 1 ? '万元' : '元'}</text>
        </view>
        <view className='footer flex'>
          <view>
            <view>{`${Number((summary.totalRate || 0) / 10000).toFixed(2)}万`}</view>
            <view className='label'>利息总额</view>
          </view>
          <view>
            <view>{`${Number((summary.totalMoney || 0) / 10000).toFixed(2)}万`}</view>
            <view className='label'>还款总额</view>
          </view>
          {
            current === 1 && (
              <view>
                <view>{`${Number(summary.money || 0 / 10000).toFixed(0)}万`}</view>
                <view className='label'>贷款金额</view>
              </view>
            )
          }
          {
            !isMixed && (
              <view>
                <view>{`${summary.year || 0}年`}</view>
                <view className='label'>贷款期限</view>
              </view>
            )
          }
        </view>
      </view>

      <view className='result-list'>
        <view className='flex result-list-item result-list-title'>
          <view>期数</view>
          <view>月供总额</view>
          <view>月供本金</view>
          <view>月供利息</view>
          <view>剩余还款</view>
        </view>
        <ScrollView scrollY className='result-scroll'>
          {
            list.map((it, inx) => {
              const no = inx + 1
              const benxi = Number(it.benxi).toFixed(0)
              const benjin = Number(it.benjin).toFixed(0)
              const rate = Number(it.rate).toFixed(0)
              const left = Number(summary.totalMoney - it.paid).toFixed(0)

              return (
                <view className='flex result-list-item' key={inx}>
                  <view>{no}</view>
                  <view>{benxi}</view>
                  <view>{benjin}</view>
                  <view>{rate}</view>
                  <view>{left}</view>
                </view>
              )
            })
          }
        </ScrollView>
      </view>
    </view>
  )
}