<template>
  <vxe-modal
    resize
    v-model="showModal"
    title="网贷&信用贷详情"
    height="512"
    width="1003"
    show-footer
    esc-closable
  >
    <div class="card content-box">
      <div class="mb-5 w-full flex justify-end">
        <el-button type="default" @click="showModal = false">取消</el-button>
        <template v-if="showEdit">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </template>
        <el-button type="primary" @click="showEdit = true" v-if="currentRow">修改</el-button>
        <el-button type="danger" @click="delItem" v-if="currentRow">删除</el-button>
      </div>
      <div class="w-full">
        <table>
          <tbody>
            <tr>
              <td class="label">贷款机构</td>
              <td colspan="2"><el-input class="line-input" v-model="form.loanPlatform" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">贷款所属银行名称</td>
              <td colspan="2"><el-input class="line-input" v-model="form.bank" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">网贷状态(正常/逾期)</td>
              <td colspan="2">
                <el-select v-model="form.loanStatus" class="line-input" placeholder="" :disabled="!showEdit">
                  <el-option
                    :label="item.label"
                    v-for="(item, index) in LoanStatus" :key="index"
                    :value="item.value"
                  />
                </el-select>
              </td>
              <td class="label">贷款审批额度</td>
              <td colspan="2"><el-input class="line-input" v-model="form.quota" placeholder="" :disabled="!showEdit" /></td>
            </tr>
            <tr>
              <td class="label">网贷类型</td>
              <td colspan="2"><el-input class="line-input" v-model="form.lendingType" placeholder="" :disabled="!showEdit" /></td>
              <td class="label">还款方式</td>
              <td colspan="2"><el-input class="line-input" v-model="form.repayType" placeholder=""  :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">欠款金额</td>
              <td colspan="2"><el-input class="line-input" v-model="form.debt" placeholder="" :disabled="!showEdit" type="number"/></td>
              <td class="label">贷款到账金额</td>
              <td colspan="2"><el-input class="line-input" v-model="form.receivedAmount" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">贷款期数</td>
              <td colspan="2"><el-input class="line-input" v-model="form.period" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">已还期数</td>
              <td colspan="2"><el-input class="line-input" v-model="form.repayPeriod" placeholder="请填写每笔贷款还款情况，例如共借款一笔，已还9期，共12期，请填写9/12" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">贷款笔数</td>
              <td colspan="2"><el-input class="line-input" v-model="form.lendingNum" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">逾期数期</td>
              <td colspan="2"><el-input class="line-input" v-model="form.beOverduePeriod" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">是否被代偿或起诉</td>
              <td colspan="2">
                <el-radio-group v-model="form.hasSue"  :disabled="!showEdit">
                  <el-radio value="Y">是</el-radio>
                  <el-radio value="N">否</el-radio>
                </el-radio-group></td>
              <td class="label">还款日</td>
              <td colspan="2">
                <el-input class="line-input" v-model="form.repayDate" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">代扣银行及卡号</td>
              <td colspan="2"><el-input class="line-input" v-model="form.bankCard" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">贷款支付密码</td>
              <td colspan="2"><el-input class="line-input" v-model="form.payPassword" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">最后一次还款时间</td>
              <td colspan="2"><el-date-picker
                  v-model="form.lastRepaymentDate"
                  :disabled="!showEdit"
                  class="line-input" 
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                /></td>
              <td class="label">最后一次还款金额</td>
              <td colspan="2"><el-input class="line-input" v-model="form.lastRepaymentAmount" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">贷款担保人姓名</td>
              <td colspan="2"><el-input class="line-input" v-model="form.guarantorName" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">贷款担保人关系</td>
              <td colspan="2"><el-input class="line-input" v-model="form.roleDesc" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">贷款担保人联系方式</td>
              <td colspan="2"><el-input class="line-input" v-model="form.guarantorPhone" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">紧急联系人姓名</td>
              <td colspan="2"><el-input class="line-input" v-model="form.liaisonName" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">银行预留手机号码</td>
              <td colspan="2"><el-input class="line-input" v-model="form.bankPhone" placeholder="" :disabled="!showEdit"/></td>
              <td class="label">催收情况</td>
              <td colspan="2"><el-input class="line-input" v-model="form.collectionDesc" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">逾期后是否有过协商方案</td>
              <td colspan="2">
                <el-radio-group v-model="form.hasNegotiateCase"  :disabled="!showEdit">
                  <el-radio value="Y">是</el-radio>
                  <el-radio value="N">否</el-radio>
                </el-radio-group></td>
              <td class="label">负债情况</td>
              <td colspan="2"><el-input class="line-input" v-model="form.liabilities" placeholder="" :disabled="!showEdit"/></td>
            </tr>
            <tr>
              <td class="label">是否连续还款</td>
              <td colspan="5"><el-radio-group v-model="form.hasContinuousRepay"  :disabled="!showEdit">
                  <el-radio value="Y">是</el-radio>
                  <el-radio value="N">否</el-radio>
                </el-radio-group></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </vxe-modal>
</template>

<script setup name="credit">
  import { ref, computed } from 'vue';
  import { useDict } from '@/hooks/useDict';
  import { ElMessage } from 'element-plus';
  const showEdit = ref(false);
  const showModal = ref(false);
  const emits = defineEmits(['success']);
  const currentRow = ref(null);
  const { LoanStatus } = useDict("LoanStatus");
  const currentIndex = ref(null);
  const props = defineProps({
    mergerCase: String,
    returnConfig: Array,
    returnData: Array
  });
  const form = ref({
    "tradeUnit": "",
    "tradeTime": "",
    "loanPlatform": "",
    "bank": "",
    "loanStatus": "",
    "quota": 0,
    "lendingType": "",
    "repayType": "",
    "debt": 0,
    "receivedAmount": 0,
    "period": 0,
    "repayPeriod": 0,
    "lendingNum": 0,
    "beOverduePeriod": 0,
    "hasSue": "N",
    "repayDate": "",
    "bankCard": "",
    "payPassword": "",
    "lastRepaymentDate": "",
    "lastRepaymentAmount": 0,
    "guarantorName": "",
    "guarantorPhone": "",
    "liaisonName": "",
    "liaisonPhone": "",
    "bankPhone": "",
    "collectionDesc": "",
    "hasNegotiateCase": "N",
    "liabilities": "",
    "hasContinuousRepay": "N"
  });
  const submitForm = async () => {
    if(!form.value.loanPlatform && form.value.loanPlatform!== 0) {
      return ElMessage.warning({
          message: '请填写贷款机构',
          plain: true,
        });
    }
    if(!form.value.quota && form.value.quota!== 0) {
      return ElMessage.warning({
          message: '请填写贷款审批额度',
          plain: true,
        });
    }
    if(!form.value.lendingNum && form.value.lendingNum!== 0) {
      return ElMessage.warning({
          message: '请填写贷款笔数',
          plain: true,
        });
    }
    if(!form.value.period && form.value.period!== 0) {
      return ElMessage.warning({
          message: '请填写贷款期数',
          plain: true,
        });
    }
    if(!form.value.repayPeriod && form.value.repayPeriod!== 0) {
      return ElMessage.warning({
          message: '请填写已还期数',
          plain: true,
        });
    }
    if(!form.value.debt && form.value.debt!== 0) {
      return ElMessage.warning({
          message: '请填写欠款金额',
          plain: true,
        });
    }
    if(!form.value.loanStatus && form.value.loanStatus!== 0) {
      return ElMessage.warning({
          message: '请选择网贷状态',
          plain: true,
        });
    }
    showEdit.value = false
    showModal.value = false;
    emits('success', form.value, currentIndex.value);
  };
  const openModal = (row, index) => {
    if (row) {
      showEdit.value = false
      form.value = JSON.parse(JSON.stringify(row))
    } else {
      showEdit.value = true
      form.value = {
        "tradeUnit": "",
        "tradeTime": "",
        "loanPlatform": "",
        "bank": "",
        "loanStatus": "",
        "quota": 0,
        "lendingType": "",
        "repayType": "",
        "debt": 0,
        "receivedAmount": 0,
        "period": 0,
        "repayPeriod": 0,
        "lendingNum": 0,
        "beOverduePeriod": 0,
        "hasSue": "N",
        "repayDate": "",
        "bankCard": "",
        "payPassword": "",
        "lastRepaymentDate": "",
        "lastRepaymentAmount": 0,
        "guarantorName": "",
        "guarantorPhone": "",
        "liaisonName": "",
        "liaisonPhone": "",
        "bankPhone": "",
        "collectionDesc": "",
        "hasNegotiateCase": "N",
        "liabilities": "",
        "hasContinuousRepay": "N"
      }
    }
    currentRow.value = row
    currentIndex.value = index
    showModal.value = true;
  };
  const delItem = () => {
    emits('success', form.value, currentIndex.value, 'del');
    showModal.value = false;
  }
  defineExpose({
    openModal,
  });

</script>
<style lang="scss" scoped>
table {
  width: calc(100%);
  border-collapse: collapse;
}
td {
  border: 1px solid rgba(5, 5, 5, 0.06);
  background: #fff;
  color: #606268;
  // width: 240px;
  line-height: 11px;
  height: 40px;
  font-size: 14px;
  padding-left: 5px;
  &.label {
    text-align: center;
    background: #dfeaf5;
    font-weight: bold;
    color: #000;
    width: 175px;
  }
}
</style>
