management/src/pages/Contract/Content/Summary/index.tsx

import Header from '@/components/Header'
import { tenderStore } from '@/store/mobx'
import consts from '@/utils/consts'
import React, { useEffect, useState, useMemo } from 'react'
import { useActivate } from 'react-activation'
import { apiGetContractSurvey } from './api'
import Content from './components/Content'
import './index.scss'

type ireturnDate = {
  [key: string]: number
}
interface iBaseState {
  closeNumber: number
  performNumber: number
  returnDate: ireturnDate
  totalContractPrice: number
  totalContractPriceShow: number
  uncloseNumber: number
}
interface iExpenditureState extends iBaseState {
  totalPaidPriceShow: number
}

interface iIncomeState extends iBaseState {
  totalReturnPriceShow: number
}

interface iContractSummaryState {
  expenditureData: iExpenditureState
  incomeData: iIncomeState
}

export default function Summary() {
  useEffect(() => {
    initData()
  }, [ tenderStore.bid ])
  useActivate(() => initData())
  const [ state, setState ] = useState<iContractSummaryState>({
    expenditureData: {
      closeNumber: 0,
      performNumber: 0,
      returnDate: {},
      totalContractPrice: 0,
      totalContractPriceShow: 0,
      totalPaidPriceShow: 0,
      uncloseNumber: 0
    },
    incomeData: {
      closeNumber: 0,
      performNumber: 0,
      returnDate: {},
      totalContractPrice: 0,
      totalContractPriceShow: 0,
      totalReturnPriceShow: 0,
      uncloseNumber: 0
    }
  })
  const initData = async () => {
    const { code = -1, data } = await apiGetContractSurvey(tenderStore.bid)
    if (code === consts.RET_CODE.SUCCESS) {
      setState({ ...state, ...data })
    }
  }

  const expenditurePieData = useMemo(() => {
    const { closeNumber, performNumber, uncloseNumber,  totalContractPrice, totalContractPriceShow, totalPaidPriceShow, returnDate  } = state.expenditureData
    const pieData = [
      {
        type: '正常关闭',
        value: closeNumber
      },
      {
        type: '履行中',
        value: performNumber
      },
      {
        type: '待关闭',
        value: uncloseNumber
      }
    ]
    const dualAxes = []
    for (const key in returnDate) {
      if (Object.prototype.hasOwnProperty.call(returnDate, key)) {
        const value = returnDate[key]
        dualAxes.push({ month: key, value })
      }
    }

    const newDualAxes = dualAxes.map(item => {
      return { ...item, count: item.value / totalContractPrice * 100 }
    })
    const progress = totalPaidPriceShow ? (totalPaidPriceShow / totalContractPrice) : 0
    return { pieData, returnDate: newDualAxes, totalContractPrice, totalContractPriceShow, totalPaidPriceShow, progress }
  }, [ state.expenditureData ])

  const incomePieData = useMemo(() => {
    const { closeNumber, performNumber, uncloseNumber, returnDate, totalContractPrice, totalContractPriceShow, totalReturnPriceShow } = state.incomeData

    const pieData = [
      {
        type: '正常关闭',
        value: closeNumber
      },
      {
        type: '履行中',
        value: performNumber
      },
      {
        type: '待关闭',
        value: uncloseNumber
      }
    ]

    const dualAxes = []
    for (const key in returnDate) {
      if (Object.prototype.hasOwnProperty.call(returnDate, key)) {
        const value = returnDate[key] as number
        dualAxes.push({ month: key, value })
      }
    }
    const newDualAxes = dualAxes.map(item => {
      return { ...item, count: item.value / totalContractPrice * 100 }
    })
    const progress = totalReturnPriceShow ? (totalReturnPriceShow / totalContractPrice) : 0
    return { pieData, returnDate: newDualAxes, totalContractPrice, totalContractPriceShow, totalReturnPriceShow, progress }
  }, [ state.incomeData ])
  return (
    <div className="wrap-contaniner">
      <Header title="合同概况"></Header>
      <div className="wrap-content m-3 pi-grid pi-col-2 pi-col-space-3">
        <Content data={expenditurePieData} type="expenditure"></Content>
        <Content data={incomePieData} type="income"></Content>
      </div>
    </div>
  )
}