<template>
  <vxe-modal
    v-model="showModal"
    :title="currentType"
    @hide="onHide"
    height="482"
    width="1003"
    show-footer
    esc-closable
  >
    <div class="w-full px-3 h-full overflow-auto flex-col flex mytable">
      <template v-if="currentType === '结清减免还款' || currentType === '直接还款'">
        <table style="margin-bottom: 10px" v-if="currentType === '结清减免还款'">
          <tr>
            <td class="label">减免类型</td>
            <td>结清减免</td>
            <td class="label">减免申请ID</td>
            <td>{{ currentInfo.id }}</td>
            <td class="label">减免申请时间</td>
            <td>{{ currentInfo.applyDate }}</td>
          </tr>
          <tr>
            <td class="label">减免金额(总计)</td>
            <td>{{ currentInfo.totalReduceAmount }}</td>
            <td class="label">减免案件数</td>
            <td>{{ currentInfo.totalNumber }}</td>
            <td class="label">减免生效时间</td>
            <td>{{ currentInfo.inEffectDate }}</td>
          </tr>
          <tr>
            <td class="label">应还金额</td>
            <td colspan="5">{{ currentInfo.totalPayAmount }}</td>
          </tr>
          <!-- Add more rows as needed -->
        </table>
        <table style="margin-bottom: 10px" v-else>
          <tr>
            <td class="label">案件ID</td>
            <td>{{ currentInfo.caseId }}</td>
            <td class="label">借款平台</td>
            <td>{{ currentInfo.payOrg }}</td>
            <td class="label">资管公司</td>
            <td>{{ currentInfo.manageOrg }}</td>
          </tr>
          <tr>
            <td class="label">委案金额</td>
            <td>{{ currentInfo.commissionAmount }}</td>
            <td class="label">累计减免金额</td>
            <td>{{ currentInfo.sumReductionAmount }}</td>
            <td class="label">剩余待还金额</td>
            <td>{{ currentInfo.remainingAmount }}</td>
          </tr>
          <tr>
            <td class="label">累计还款金额</td>
            <td colspan="5">{{ currentInfo.sumRepayAmount }}</td>
          </tr>
          <!-- Add more rows as needed -->
        </table>
        <div>
          <el-form ref="formRef" inline :model="form" :rules="rules" label-width="110px">
            <el-row>
              <el-col :span="8">
                <el-form-item class="w-full" label="实际还款金额：" prop="realRepayAmount">
                  <div>
                    <el-input
                      v-model="form.realRepayAmount"
                      placeholder="请输入"
                      style="width: 100%"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="w-full" label="实际还款时间：" prop="name">
                  <el-date-picker
                    v-model="form.realRepayTime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="currentType === '结清减免还款'">
                <el-form-item class="w-full" label="付款凭证：" prop="name">
                  <el-upload
                    v-model:file-list="form.files"
                    :action="url"
                    list-type="picture-card"
                    class="mypicture"
                    :on-success="handleFileSuccess"
                    :auto-upload="true"
                    :on-remove="handleRemove"
                  >
                    <div class="text-center">
                      <el-icon><Plus /></el-icon>
                      <div>付款相关附件</div>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <template v-if="currentType === '分期还款'">
        <table style="margin-bottom: 10px">
          <tr>
            <td class="label">分期申请ID</td>
            <td>{{ currentDetail.id }}</td>
            <td class="label">还款总额</td>
            <td>{{ currentDetail.totalRepayAmount }}</td>
            <td class="label">分期申请时间</td>
            <td>{{ currentDetail.applyDate }}</td>
          </tr>
          <tr>
            <td class="label">还款期数</td>
            <td>{{ currentDetail.totalPeriod }}</td>
            <td class="label">首期还款日</td>
            <td>{{ currentDetail.firstApplyDate }}</td>
            <td class="label">分期生效时间</td>
            <td>{{ currentDetail.effectiveTime }}</td>
          </tr>
          <tr>
            <td class="label">期次</td>
            <td>{{ currentInfo.period }}</td>
            <td class="label">期次还款到期日</td>
            <td colspan="3">{{ currentInfo.playApplyDate }}</td>
          </tr>
          <tr>
            <td class="label">期次应还金额</td>
            <td>{{ currentInfo.applyAmount }}</td>
            <td class="label">期次还款状态</td>
            <td colspan="3">{{
              currentInfo.repayStatus
                ? currentInfo.repayStatus === 'over'
                  ? '已还款'
                  : '待还款'
                : ''
            }}</td>
          </tr>
        </table>
        <div class="flex">
          <div class="w-2/5 pr-11">
            <el-form ref="formRef" inline :model="form" :rules="rules" label-width="110px">
              <el-row>
                <el-col :span="24">
                  <el-form-item class="w-full" label="实际还款时间：" prop="realRepayTime">
                    <el-date-picker
                      v-model="form.realRepayTime"
                      class="w-full"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      type="datetime"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="w-full" label="实际还款金额：" prop="realRepayAmount">
                    <div class="w-full">
                      <el-input
                        v-model="form.realRepayAmount"
                        placeholder="请输入"
                        class="w-full"
                      />
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="w-3/5">
            <ProTable
              :config="config"
              :data="tabledata"
              :showPagination="false"
              :showToolBar="false"
            />
          </div>
        </div>
      </template>
    </div>
    <template #footer>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </vxe-modal>
</template>

<script setup lang="jsx" name="allocationModal">
  import { computed } from 'vue';
  import dayjs from 'dayjs';
  import { reactive, ref } from 'vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { ElMessage } from 'element-plus';

  import { saveRepayRecord } from '@/api/property';
  const envs = getAppEnvConfig();
  const data = ref([]);
  const mytransfer = ref();
  const tabledata = ref([]);
  const url = envs.VITE_GLOB_API_URL_PREFIX + '/sys/upload';
  const showModal = ref(false);
  const currentType = ref('');
  const formRef = ref();
  const currentInfo = ref({});
  const currentDetail = ref({});
  const emits = defineEmits(['success']);
  const form = reactive({
    realRepayAmount: '',
    files: [],
    realRepayTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  });
  const radio = ref(0);
  const validaterealRepayAmount = (rule, value, callback) => {
    if (
      Number(value) !== Number(currentInfo.value.totalPayAmount) &&
      currentType.value === '结清减免还款'
    ) {
      callback(new Error('*金额必须等于应还金额'));
    } else if (
      Number(value) !== Number(currentInfo.value.remainingAmount) &&
      currentType.value === '直接还款'
    ) {
      callback(new Error('*金额必须等于应还金额'));
    } else if (
      Number(value) !== Number(currentInfo.value.applyAmount) &&
      currentType.value === '分期还款'
    ) {
      callback(new Error('*金额必须等于应还金额'));
    } else {
      callback();
    }
  };
  const rules = ref({
    realRepayAmount: [{ validator: validaterealRepayAmount, trigger: 'blur' }],
  });
  const onHide = () => {
    currentInfo.value = {};
  };
  const openModal = (info, detail, type) => {
    showModal.value = true;
    currentInfo.value = info;
    console.log('currentInfo', currentInfo.value);
    currentDetail.value = detail;
    currentType.value = type;
    tabledata.value = detail.loans;
  };

  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };

  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url;
    dialogVisible.value = true;
  };
  const options = [
    {
      value: 'repay',
      label: '直接还款',
    },
    {
      value: 'by_stages',
      label: '分期还款',
    },
    {
      value: 'settle',
      label: '结清减免还款',
    },
  ];
  const submitForm = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        saveRepayRecord({
          repayType: options.find((v) => v.label === currentType.value).value,
          ...form,
          borrower: currentInfo.value.borrower,
          flowStatus: 'pending',
          repayStatus: 'over',
          status: 'enable',
        }).then((res) => {
          console.log('res', res);
          if (res.success) {
            ElMessage.success({
              message: '保存成功',
              plain: true,
            });
            showModal.value = false;
            emits('success');
          }
        });
      }
    });
  };
  const handleFileSuccess = (response, file, fileList) => {
    console.log('888877', response, file, fileList);
  };
  const config = computed(() => {
    return {
      toolbarConfig: { enabled: false },
      columns: [
        {
          field: 'caseId',
          title: '案件ID',
        },
        {
          field: 'payOrg',
          title: '借款机构',
        },
        {
          field: 'remainingAmount',
          title: '剩余待还金额',
        },
      ],
    };
  });
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  .box-title {
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    line-height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
  }
  .mytable {
    .el-form-item {
      margin-right: 0;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    td {
      border: 1px solid rgba(5, 5, 5, 0.06);
      background: #fff;
      padding: 8px;
      width: 240px;
      &.label {
        width: 160px;
        background: #f5f7f9;
      }
    }
  }
  .mypicture {
    :deep(.el-upload--picture-card) {
      width: 100px;
      height: 100px;
    }
  }
</style>
