<template>
  <div class="base-info">
    <cy-info-title>授信信息</cy-info-title>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-position="top"
      label-width="120px"
      class="rule-form-orange"
    >
      <el-form-item label="申请日期" prop="applyDate">
        <el-date-picker
          v-model="ruleForm.applyDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择申请日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请状态" prop="applyStatus">
        <el-input
          v-model="ruleForm.applyStatus"
          :disabled="disabled"
          placeholder="请输入申请状态"
        />
      </el-form-item>
      <el-form-item label="下次可申请日期" prop="nextApplyDate">
        <el-date-picker
          v-model="ruleForm.nextApplyDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择下次可申请日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="拒绝原因" prop="rejectReason">
        <el-input
          v-model="ruleForm.rejectReason"
          :disabled="disabled"
          placeholder="请输入拒绝原因"
        />
      </el-form-item>
      <el-form-item label="额度状态" prop="limitStatus">
        <el-input
          v-model="ruleForm.limitStatus"
          :disabled="disabled"
          placeholder="请输入额度状态"
        />
      </el-form-item>
      <el-form-item label="签约有效期" prop="validityPeriod">
        <el-date-picker
          v-model="ruleForm.validityPeriod"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择签约有效期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="循环标志" prop="loopFlag">
        <el-input
          v-model="ruleForm.loopFlag"
          :disabled="disabled"
          placeholder="请输入循环标志"
        />
      </el-form-item>
      <el-form-item label="授信总额度" prop="creditLimit">
        <cy-amount-input
          v-model="ruleForm.creditLimit"
          :disabled="disabled"
          :is-unit="true"
          unit-name="CNY"
          placeholder="请输入授信总额度"
        />
      </el-form-item>
      <el-form-item label="剩余可用额度" prop="remainingAvailableCreditLimit">
        <cy-amount-input
          v-model="ruleForm.remainingAvailableCreditLimit"
          :disabled="disabled"
          :is-unit="true"
          unit-name="CNY"
          placeholder="请输入剩余可用额度"
        />
      </el-form-item>
      <el-form-item label="生效日期" prop="effectiveDate">
        <el-date-picker
          v-model="ruleForm.effectiveDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="expiringDate">
        <el-date-picker
          v-model="ruleForm.expiringDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择失效日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="批复利率（%）" prop="approvedInterestRate">
        <el-input
          v-model="ruleForm.approvedInterestRate"
          :disabled="disabled"
          placeholder="请输入批复利率"
        />
      </el-form-item>
      <el-form-item label="是否有待还借据" prop="pendingLoanReceipt">
        <el-input
          v-model="ruleForm.pendingLoanReceipt"
          :disabled="disabled"
          placeholder="请输入是否有待还借据"
        />
      </el-form-item>
      <el-form-item label="用户唯一标识" prop="openId">
        <el-input
          v-model="ruleForm.openId"
          :disabled="disabled"
          placeholder="请输入用户唯一标识"
        />
      </el-form-item>
      <el-form-item label="担保方式" prop="guaranteeMethod">
        <el-input
          v-model="ruleForm.guaranteeMethod"
          :disabled="disabled"
          placeholder="请输入担保方式"
        />
      </el-form-item>
      <el-form-item label="还款账号" prop="repaymentAccount">
        <el-input
          v-model="ruleForm.repaymentAccount"
          :disabled="disabled"
          placeholder="请输入还款账号"
        />
      </el-form-item>
      <el-form-item label="还款账户名" prop="repaymentAccountName">
        <el-input
          v-model="ruleForm.repaymentAccountName"
          :disabled="disabled"
          placeholder="请输入还款账户名"
        />
      </el-form-item>
      <el-form-item label="还款账户账号类型" prop="repaymentAccountType">
        <el-input
          v-model="ruleForm.repaymentAccountType"
          :disabled="disabled"
          placeholder="请输入还款账户账号类型"
        />
      </el-form-item>
      <!-- <el-form-item
        label="个人征信授权书"
        prop="desc"
        class="form-required"
        style="width: 100%;"
      >
        <cy-upload
          ref="authBookRef"
          :upload-params="{
            mouldName: 'authBookRef'
          }"
          :file-data="ruleForm.authBookFiles"
          :upload-from-orange-status="true"
          placeholder="请上传个人征信授权书"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item
        label="企业征信授权书"
        prop="desc"
        class="form-required"
        style="width: 100%;"
      >
        <cy-upload
          ref="authBookRef"
          :upload-params="{
            mouldName: 'authBookRef'
          }"
          :file-data="ruleForm.authBookFiles"
          :upload-from-orange-status="true"
          placeholder="请上传企业征信授权书"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item
        label="个人综合信息授权书"
        prop="desc"
        class="form-required"
        style="width: 100%;"
      >
        <cy-upload
          ref="authBookRef"
          :upload-params="{
            mouldName: 'authBookRef'
          }"
          :file-data="ruleForm.authBookFiles"
          :upload-from-orange-status="true"
          placeholder="请上传个人综合信息授权书"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item
        label="企业综合信息授权书"
        prop="desc"
        class="form-required"
        style="width: 100%;"
      >
        <cy-upload
          ref="authBookRef"
          :upload-params="{
            mouldName: 'authBookRef'
          }"
          :file-data="ruleForm.authBookFiles"
          :upload-from-orange-status="true"
          placeholder="请上传企业综合信息授权书"
          :disabled="disabled"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        applyDate: '',
        applyStatus: '',
        nextApplyDate: '',
        rejectReason: '',
        limitStatus: '',
        validityPeriod: '',
        loopFlag: '',
        creditLimit: '',
        remainingAvailableCreditLimit: '',
        effectiveDate: '',
        expiringDate: '',
        approvedInterestRate: '',
        pendingLoanReceipt: '',
        openId: '',
        guaranteeMethod: '',
        repaymentAccount: '',
        repaymentAccountName: '',
        repaymentAccountType: '',
        authBookFiles: []
      },
      rules: {}
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val && Object.keys(val).length) {
          const {
            applyDate,
            applyStatus,
            nextApplyDate,
            rejectReason,
            limitStatus,
            validityPeriod,
            loopFlag,
            creditLimit,
            remainingAvailableCreditLimit,
            effectiveDate,
            expiringDate,
            approvedInterestRate,
            pendingLoanReceipt,
            openId,
            guaranteeMethod,
            repaymentAccount,
            repaymentAccountName,
            repaymentAccountType
          } = val

          this.ruleForm = {
            applyDate,
            applyStatus,
            nextApplyDate,
            rejectReason,
            limitStatus,
            validityPeriod,
            loopFlag,
            creditLimit,
            remainingAvailableCreditLimit,
            effectiveDate,
            expiringDate,
            approvedInterestRate,
            pendingLoanReceipt,
            openId,
            guaranteeMethod,
            repaymentAccount,
            repaymentAccountName,
            repaymentAccountType
          }
        }
      },
      immediate: true
    }
  }
}
</script>
