<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="dueBillNo">
        <el-input
          v-model="ruleForm.dueBillNo"
          :disabled="disabled"
          placeholder="请输入借据编号"
        />
      </el-form-item>
      <el-form-item label="还款状态" prop="repayStatus">
        <el-input
          :value="getRepayStatus(ruleForm.repayStatus)"
          :disabled="disabled"
          placeholder="请输入还款状态"
        />
      </el-form-item>
      <el-form-item label="还款日期" prop="repayDate">
        <el-date-picker
          v-model="ruleForm.repayDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择还款日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="还款方式" prop="repayType">
        <el-input
          v-model="ruleForm.repayType"
          :disabled="disabled"
          placeholder="请输入还款方式"
        />
      </el-form-item>
      <el-form-item label="还款编号" prop="repayNo">
        <el-input
          v-model="ruleForm.repayNo"
          :disabled="disabled"
          placeholder="请输入还款编号"
        />
      </el-form-item>
      <el-form-item label="归还本金" prop="repayNo">
        <cy-amount-input
          v-model="ruleForm.repayNo"
          :disabled="disabled"
          placeholder="请输入归还本金"
        />
      </el-form-item>
      <el-form-item label="归还利息" prop="hxInte">
        <cy-amount-input
          v-model="ruleForm.hxInte"
          :disabled="disabled"
          placeholder="请输入归还利息"
        />
      </el-form-item>
      <el-form-item label="归还罚息" prop="hxFinte">
        <cy-amount-input
          v-model="ruleForm.hxFinte"
          :disabled="disabled"
          placeholder="请输入归还罚息"
        />
      </el-form-item>
      <el-form-item label="归还复息" prop="hxCint">
        <cy-amount-input
          v-model="ruleForm.hxCint"
          :disabled="disabled"
          placeholder="请输入归还复息"
        />
      </el-form-item>
      <el-form-item label="失败原因" prop="remark">
        <el-input
          v-model="ruleForm.remark"
          :disabled="disabled"
          placeholder="请输入失败原因"
        />
      </el-form-item>
      <!-- <el-form-item label="还款期数" prop="failMsg">
        <el-input
          v-model="ruleForm.failMsg"
          :disabled="disabled"
          placeholder="请输入还款期数"
        />
      </el-form-item>
      <el-form-item label="还款方式" prop="failMsg">
        <el-input
          v-model="ruleForm.failMsg"
          :disabled="disabled"
          placeholder="请输入还款方式"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        dueBillNo: '',
        repayStatus: '',
        repayDate: '',
        repayType: '',
        repayNo: '',
        hxCapi: '',
        hxInte: '',
        hxFinte: '',
        hxCint: '',
        hxFine: '',
        remark: ''
      }
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        console.log('baseinfo-------')
        console.log(val)
        if (val && Object.keys(val).length) {
          const {
            dueBillNo,
            repayStatus,
            repayDate,
            repayType,
            repayNo,
            hxCapi,
            hxInte,
            hxFinte,
            hxCint,
            hxFine,
            remark
          } = val

          this.ruleForm = {
            dueBillNo,
            repayStatus,
            repayDate,
            repayType,
            repayNo,
            hxCapi,
            hxInte,
            hxFinte,
            hxCint,
            hxFine,
            remark
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    getRepayStatus(status) {
      const map = {
        '01': '还款成功',
        '02': '还款失败',
        '03': '还款中'
      }

      return map[status] || ''
    }
  }
}
</script>
