<template>
  <div>
    <BaseInfo
      ref="baseInfoRef"
      :details-info="baseInfo"
      :disabled="$route.query.type === 'see'"
    ></BaseInfo>
    <PayInfo
      ref="payInfoRef"
      :details-info="payInfo"
      :disabled="$route.query.type === 'see'"
    ></PayInfo>

    <div class="submit-btn">
      <el-button
        @click="
          () => {
            $router.go(-1)
          }
        "
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import { getPaymentDetails } from '@/api/capitalFinancialManage'

export default {
  components: {
    BaseInfo: () => import('./components/BaseInfo.vue'),
    PayInfo: () => import('./components/PayInfo.vue')
  },
  data() {
    return {
      baseInfo: {},
      payInfo: {}
    }
  },
  watch: {
    $route: {
      handler(val) {
        if (val && val.query && val.query.id) {
          this.queryDetail(val.query.id)
        }
      },
      immediate: true
    }
  },
  methods: {
    async queryDetail(id) {
      const res = await getPaymentDetails({ id })

      if (res.success) {
        const {
          customerType,
          financingManagementId,
          financingInstitutionName,
          openId,
          quotaDisburseBatch,
          contractNo,
          hxAmt,
          dueBillNo,
          repayStatus,
          repayDate,
          repayType,
          repayNo,
          hxCapi,
          hxInte,
          hxFinte,
          hxCint,
          hxFine,
          remark,
          enterprise
        } = res.data

        this.baseInfo = {
          customerType,
          supplierName: enterprise.corporateName || '',
          socialCreditCode: enterprise.socialCreditCode || '',
          financingManagementId,
          financingInstitutionName,
          openId,
          quotaDisburseBatch,
          contractNo,
          hxAmt
        }

        this.payInfo = {
          dueBillNo,
          repayStatus,
          repayDate,
          repayType,
          repayNo,
          hxCapi,
          hxInte,
          hxFinte,
          hxCint,
          hxFine,
          remark
        }
      }
    }
  }
}
</script>

<style lang="sass" scoped></style>
