<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="payoutNo">
        <el-input
          v-model="ruleForm.payoutNo"
          :disabled="disabled"
          placeholder="请输入申请编号"
        />
      </el-form-item>
      <el-form-item label="借据编号" prop="dueBillNo">
        <el-input
          v-model="ruleForm.dueBillNo"
          :disabled="disabled"
          placeholder="请输入借据编号"
        />
      </el-form-item>
      <el-form-item label="申请状态" prop="payoutStatus">
        <el-input
          :value="getPayoutStatus(ruleForm.payoutStatus)"
          :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="payoutDate">
        <el-date-picker
          v-model="ruleForm.payoutDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择放款日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到期日期" prop="maturityDate">
        <el-date-picker
          v-model="ruleForm.maturityDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择到期日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="提款申请时间" prop="loanApplyDate">
        <el-date-picker
          v-model="ruleForm.loanApplyDate"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择提款申请时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="还款方式" prop="repayMethod">
        <el-input
          :value="ruleForm.repayMethod === '2' ? '按月还息到期还款' : ''"
          :disabled="disabled"
          placeholder="请输入还款方式"
        />
      </el-form-item>
      <el-form-item label="长银融资期限" prop="term">
        <el-input
          v-model="ruleForm.term"
          :disabled="disabled"
          placeholder="请输入长银融资期限"
        />
      </el-form-item>
      <el-form-item label="支付方式" prop="payWay">
        <el-input
          :value="ruleForm.payWay === '1' ? '受托支付' : '自主支付'"
          :disabled="disabled"
          placeholder="请输入支付方式"
        ></el-input>
        <!-- <el-select
          v-model="ruleForm.payWay"
          :disabled="disabled"
          placeholder="请选择支付方式"
        >
          <el-option v-for="item in []" :key="item.label"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="收款卡标识" prop="payeeInnerCardFlag">
        <el-input
          :value="ruleForm.payeeInnerCardFlag === '0' ? '本行卡' : '他行卡'"
          :disabled="disabled"
          placeholder="请输入收款卡标识"
        />
      </el-form-item>
      <el-form-item label="收款账户" prop="payeeAcctThNumber">
        <el-input
          v-model="ruleForm.payeeAcctThNumber"
          :disabled="disabled"
          placeholder="请输入收款账户"
        />
      </el-form-item>
      <el-form-item label="收款账户名" prop="payeeAcctThName">
        <el-input
          v-model="ruleForm.payeeAcctThName"
          :disabled="disabled"
          placeholder="请输入收款账户名"
        />
      </el-form-item>
      <el-form-item label="还款账号" prop="repayAcctNo">
        <el-input
          v-model="ruleForm.repayAcctNo"
          :disabled="disabled"
          placeholder="请输入还款账号"
        />
      </el-form-item>
      <el-form-item label="还款账户名" prop="repayAcctName">
        <el-input
          v-model="ruleForm.repayAcctName"
          :disabled="disabled"
          placeholder="请输入还款账户名"
        />
      </el-form-item>
      <el-form-item label="还款账户账号类型" prop="repayAcctType">
        <el-input
          v-model="ruleForm.repayAcctType"
          :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: {
        payoutNo: '',
        dueBillNo: '',
        payoutStatus: '',
        failMsg: '',
        payoutDate: '',
        maturityDate: '',
        loanApplyDate: '',
        repayMethod: '',
        term: '',
        payWay: '',
        payeeAcctThNumber: '',
        payeeAcctThName: '',
        payeeInnerCardFlag: '',
        repayAcctNo: '',
        repayAcctName: '',
        repayAcctType: ''
      }
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        console.log('baseinfo-------')
        console.log(val)
        if (val && Object.keys(val).length) {
          const {
            payoutNo,
            dueBillNo,
            payoutStatus,
            failMsg,
            payoutDate,
            maturityDate,
            loanApplyDate,
            repayMethod,
            term,
            payWay,
            payeeAcctThNumber,
            payeeAcctThName,
            payeeInnerCardFlag,
            repayAcctNo,
            repayAcctName,
            repayAcctType
          } = val

          this.ruleForm = {
            payoutNo,
            dueBillNo,
            payoutStatus,
            failMsg,
            payoutDate,
            maturityDate,
            loanApplyDate,
            repayMethod,
            term,
            payWay,
            payeeAcctThNumber,
            payeeAcctThName,
            payeeInnerCardFlag,
            repayAcctNo,
            repayAcctName,
            repayAcctType
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    getPayoutStatus(status) {
      const map = {
        '01': '处理中',
        '02': '放款成功',
        '03': '放款失败'
      }
      return map[status] || ''
    }
  }
}
</script>
