<template>
  <div class="view-income-plan">
    <cy-comm-table
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :count="total"
    />
  </div>
</template>

<script>
import { handleMoney } from '@/utils'
import { getLoanDisbursementPlan } from '@/api/divideAccountsManage/divideAccountsManage'
export default {
  name: 'ViewIncomePlan',
  props: {
    incomePlanData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      total: 0,
      loading: false,
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '金额类型',
          prop: 'amountType.name',
          showTooltip: true
        },
        {
          label: '收放款类型',
          prop: 'paymentCollectionType',
          showTooltip: true
        },
        {
          label: '收款主体',
          prop: 'receivingSubject',
          showTooltip: true
        },
        {
          label: '约定日期',
          prop: 'planDate',
          showTooltip: true
        },
        {
          label: '应收/付金额',
          prop: 'amount',
          showTooltip: true,
          render: (h, row) => {
            return <span> { handleMoney(row.amount) }</span>
          }

        },
        {
          label: '实收/付日期',
          prop: 'postName',
          showTooltip: true,
          render: (h, row) => {
            let list = []
            if (row.paymentCollectionType === '放款') {
              list = row.loanRecordList.map(item => {
                return { amount: item.thisLoanAmount, date: item.thisLoanDate }
              })
            } else {
              list = row.amountAllocationList.map(item => {
                return { amount: item.actualAmount, date: item.actualDate }
              })
            }
            return list.map(item => {
              return <div> { item.date }</div>
            })
          }
        },
        {
          label: '实收/付总金额',
          prop: 'toAssignedAmount',
          showTooltip: true,
          render: (h, row) => {
            let list = []
            if (row.paymentCollectionType === '放款') {
              list = row.loanRecordList.map(item => {
                return { amount: item.thisLoanAmount, date: item.thisLoanDate }
              })
            } else {
              list = row.amountAllocationList.map(item => {
                return { amount: item.actualAmount, date: item.actualDate }
              })
            }
            return list.map(item => {
              return <div> { handleMoney(item.amount) }</div>
            })
          }
        },
        {
          label: '状态',
          prop: 'status.name',
          showTooltip: true
        }
      ]
    }
  },
  watch: {
    incomePlanData: {
      handler(val) {
        if (val === undefined) return
        this.fetchData(val)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    fetchData(row) {
      this.loading = true
      const { billingFactoringBusinessLoanRecordId, sopAccountsReceivableId } = this.incomePlanData
      const params = {
        page: this.page || 1,
        rows: this.size || 10,
        billingFactoringBusinessLoanRecordId,
        sopAccountsReceivableId
      }
      getLoanDisbursementPlan(params).then(({ rows, records }) => {
        this.loading = false
        this.tableData = rows
        this.total = records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-income-plan {

}
</style>
