<template>
  <vxe-modal
    resize
    v-model="showModal"
    title="信用卡详情"
    height="512"
    width="1303"
    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.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) => {
    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
    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>
