<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 && currentRow.complete !== 'Y'"
          >修改</el-button
        >
        <el-button type="danger" @click="delItem" v-if="currentRow && currentRow.complete !== 'Y'"
          >删除</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, complete) => {
    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;
    if (row) {
      currentRow.value['complete'] = complete;
    }
    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;
      color: #000;
      width: 175px;
    }
  }
</style>
