<template>
  <div>
    <BaseInfo
      ref="baseInfoRef"
      :details-info="baseInfo"
      :disabled="$route.query.type === 'see'"
    ></BaseInfo>
    <AuthInfo
      ref="authInfoRef"
      :details-info="authInfo"
      :disabled="$route.query.type === 'see'"
    ></AuthInfo>

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

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

export default {
  components: {
    BaseInfo: () => import('./components/BaseInfo.vue'),
    AuthInfo: () => import('./components/AuthInfo.vue')
  },
  data() {
    return {
      baseInfo: {},
      authInfo: {}
    }
  },
  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 getLoanDetails({ id })

      if (res.success) {
        const {
          customerType,
          supplierName,
          socialCreditCode,
          financingManagementId,
          financingInstitutionName,
          payeeInnerCardFlag,
          loanAmount,
          openId,
          payoutNo,
          dueBillNo,
          payoutStatus,
          failMsg,
          payoutDate,
          maturityDate,
          loanApplyDate,
          repayMethod,
          term,
          payWay,
          payeeAcctThNumber,
          payeeAcctThName,
          repayAcctNo,
          repayAcctName,
          repayAcctType
        } = res.data

        this.baseInfo = {
          customerType,
          supplierName,
          socialCreditCode,
          financingManagementId,
          financingInstitutionName,
          openId,
          loanAmount
        }

        this.authInfo = {
          payoutNo,
          dueBillNo,
          payoutStatus,
          failMsg,
          payoutDate,
          maturityDate,
          loanApplyDate,
          repayMethod,
          term,
          payWay,
          payeeAcctThNumber,
          payeeAcctThName,
          payeeInnerCardFlag,
          repayAcctNo,
          repayAcctName,
          repayAcctType
        }
      }
    }
  }
}
</script>

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