<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.bank"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">开户时间</td>
              <td colspan="2"
                ><el-date-picker
                  v-model="form.issuanceDate"
                  class="line-input"
                  :disabled="!showEdit"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
              /></td>
            </tr>
            <tr>
              <td class="label">卡号</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.card"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">卡片状态(正常/逾期)</td>
              <td colspan="2">
                <el-select
                  v-model="form.creditCardStatus"
                  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>
            </tr>
            <tr>
              <td class="label">授信额度</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.quota"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">已用额度</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.usedQuota"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
            </tr>
            <tr>
              <td class="label">近6个月平均使用额度</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.sixDevUsedQuota"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">当前欠款金额</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.debt"
                  type="number"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
            </tr>
            <tr>
              <td class="label">逾期期数</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.beOverduePeriod"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">逾期后是否有过协商</td>
              <td colspan="2"
                ><el-radio-group v-model="form.hasNegotiate" :disabled="!showEdit">
                  <el-radio value="Y">是</el-radio>
                  <el-radio value="N">否</el-radio>
                </el-radio-group></td
              >
            </tr>
            <tr>
              <td class="label">有无分期</td>
              <td colspan="2"
                ><el-radio-group v-model="form.hasStages" :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-radio-group v-model="form.hasNegotiateCase" :disabled="!showEdit">
                  <el-radio value="Y">是</el-radio>
                  <el-radio value="N">否</el-radio>
                </el-radio-group></td
              >
            </tr>
            <tr>
              <td class="label">查询密码</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.queryPassword"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <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>
            </tr>
            <tr>
              <td class="label">支付密码</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.payPassword"
                  placeholder=""
                  :disabled="!showEdit"
              /></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-radio-group v-model="form.hasBigQuotaStages" :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.bigQuotaType"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
            </tr>
            <tr>
              <td class="label">大额专项分期额度</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.bigQuotaStagesAmount"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">大额专项分期开立日期</td>
              <td colspan="2"
                ><el-date-picker
                  v-model="form.bigQuotaStagesDate"
                  :disabled="!showEdit"
                  class="line-input"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
              /></td>
            </tr>
            <tr>
              <td class="label">大额专项分期到期日期</td>
              <td colspan="2"
                ><el-date-picker
                  v-model="form.bigQuotaStagesExpireDate"
                  :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.bigQuotaRepayPeriod"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
            </tr>
            <tr>
              <td class="label">银行预留手机号码</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.phone"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">银行预留家庭地址</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.address"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
            </tr>
            <tr>
              <td class="label">银行预留紧急联系人姓名</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.liaisonName"
                  placeholder=""
                  :disabled="!showEdit"
              /></td>
              <td class="label">银行预留紧急联系人电话</td>
              <td colspan="2"
                ><el-input
                  class="line-input"
                  v-model="form.liaisonPhone"
                  placeholder=""
                  :disabled="!showEdit"
              /></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 { LoanStatus } = useDict('LoanStatus');
  const emits = defineEmits(['success']);
  const currentRow = ref(null);
  const currentIndex = ref(null);
  const props = defineProps({
    mergerCase: String,
    returnConfig: Array,
    returnData: Array,
  });
  const form = ref({
    bank: '',
    issuanceDate: '',
    card: '',
    creditCardStatus: '',
    quota: 0,
    usedQuota: 0,
    sixDevUsedQuota: 0,
    debt: 0,
    beOverduePeriod: 0,
    hasNegotiate: 'N',
    hasStages: 'N',
    hasNegotiateCase: 'N',
    negotiateCase: '',
    queryPassword: '',
    payPassword: '',
    lastRepaymentDate: '',
    lastRepaymentAmount: 0,
    hasBigQuotaStages: 'N',
    bigQuotaType: '',
    bigQuotaStagesAmount: 0,
    bigQuotaStagesDate: '',
    bigQuotaStagesExpireDate: '',
    bigQuotaRepayPeriod: 0,
    phone: '',
    address: '',
    liaisonName: '',
    liaisonPhone: '',
  });
  const submitForm = async () => {
    if (!form.value.bank && form.value.bank !== 0) {
      return ElMessage.warning({
        message: '请填写发卡银行',
        plain: true,
      });
    }
    if (!form.value.quota && form.value.quota !== 0) {
      return ElMessage.warning({
        message: '请填写授信额度',
        plain: true,
      });
    }
    if (!form.value.usedQuota && form.value.usedQuota !== 0) {
      return ElMessage.warning({
        message: '请填写已用额度',
        plain: true,
      });
    }
    if (!form.value.debt && form.value.debt !== 0) {
      return ElMessage.warning({
        message: '请填写当前欠款金额',
        plain: true,
      });
    }
    if (!form.value.bigQuotaStagesAmount && form.value.bigQuotaStagesAmount !== 0) {
      return ElMessage.warning({
        message: '请填写大额专项分期额度',
        plain: true,
      });
    }
    if (!form.value.beOverduePeriod && form.value.beOverduePeriod !== 0) {
      return ElMessage.warning({
        message: '请填写逾期期数',
        plain: true,
      });
    }
    if (!form.value.sixDevUsedQuota && form.value.sixDevUsedQuota !== 0) {
      return ElMessage.warning({
        message: '请填写近6个月平均使用额度',
        plain: true,
      });
    }
    if (!form.value.hasNegotiate && form.value.hasNegotiate !== 0) {
      return ElMessage.warning({
        message: '请选择逾期后是否有过协商',
        plain: true,
      });
    }
    if (!form.value.creditCardStatus && form.value.creditCardStatus !== 0) {
      return ElMessage.warning({
        message: '请选择卡片状态',
        plain: true,
      });
    }

    showEdit.value = false;
    showModal.value = false;
    emits('success', form.value, currentIndex.value);
  };
  const delItem = () => {
    emits('success', form.value, currentIndex.value, 'del');
    showModal.value = false;
  };
  const openModal = (row, index, complete) => {
    if (row) {
      showEdit.value = false;
      form.value = JSON.parse(JSON.stringify(row));
    } else {
      showEdit.value = true;
      form.value = {
        bank: '',
        issuanceDate: '',
        card: '',
        creditCardStatus: '',
        quota: 0,
        usedQuota: 0,
        sixDevUsedQuota: 0,
        debt: 0,
        beOverduePeriod: 0,
        hasNegotiate: 'N',
        hasStages: 'N',
        hasNegotiateCase: 'N',
        negotiateCase: '',
        queryPassword: '',
        payPassword: '',
        lastRepaymentDate: '',
        lastRepaymentAmount: 0,
        hasBigQuotaStages: 'N',
        bigQuotaType: '',
        bigQuotaStagesAmount: 0,
        bigQuotaStagesDate: '',
        bigQuotaStagesExpireDate: '',
        bigQuotaRepayPeriod: 0,
        phone: '',
        address: '',
        liaisonName: '',
        liaisonPhone: '',
      };
    }
    currentRow.value = row;
    if (row) {
      currentRow.value['complete'] = complete;
    }
    currentIndex.value = index;
    showModal.value = true;
  };
  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;
      width: 175px;
      color: #000;
    }
  }
</style>
