<template>
  <vxe-modal
    v-model="showModal"
    :title="currentInfo.title"
    @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="currentInfo.title === '结清减免还款' || currentInfo.title === '直接还款'">
        <table style="margin-bottom: 10px" v-if="currentInfo.title === '结清减免还款'">
          <tr>
            <td class="label">减免类型</td>
            <td>结清减免</td>
            <td class="label">减免申请ID</td>
            <td>30</td>
            <td class="label">减免申请时间</td>
            <td>30</td>
          </tr>
          <tr>
            <td class="label">减免金额(总计)</td>
            <td>johndoe@example.com</td>
            <td class="label">减免案件数</td>
            <td>johndoe@example.com</td>
            <td class="label">减免生效时间</td>
            <td>johndoe@example.com</td>
          </tr>
          <tr>
            <td class="label">应还金额</td>
            <td colspan="5">John Doe</td>
          </tr>
          <!-- Add more rows as needed -->
        </table>
        <table style="margin-bottom: 10px" v-else>
          <tr>
            <td class="label">案件ID</td>
            <td>1111</td>
            <td class="label">借款平台</td>
            <td>30</td>
            <td class="label">资管公司</td>
            <td>30</td>
          </tr>
          <tr>
            <td class="label">委案金额</td>
            <td>johndoe@example.com</td>
            <td class="label">累计减免金额</td>
            <td>johndoe@example.com</td>
            <td class="label">分期生效时间</td>
            <td>johndoe@example.com</td>
          </tr>
          <tr>
            <td class="label">剩余待还金额</td>
            <td>John Doe</td>
            <td class="label">累计还款金额</td>
            <td colspan="3">John Doe</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="name">
                  <div>
                    <el-input v-model="form.name" placeholder="请输入" style="width: 100%" />
                    <div class="text-red-500">*金额必须等于应还金额</div>
                  </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.datetime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="currentInfo.title === '结清减免还款'">
                <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="currentInfo.title === '分期还款'">
        <table style="margin-bottom: 10px">
          <tr>
            <td class="label">分期申请ID</td>
            <td>1111</td>
            <td class="label">还款总额</td>
            <td>30</td>
            <td class="label">分期申请时间</td>
            <td>30</td>
          </tr>
          <tr>
            <td class="label">还款期数</td>
            <td>johndoe@example.com</td>
            <td class="label">首期还款日</td>
            <td>johndoe@example.com</td>
            <td class="label">分期生效时间</td>
            <td>johndoe@example.com</td>
          </tr>
          <tr>
            <td class="label">期次</td>
            <td>111</td>
            <td class="label">期次还款到期日</td>
            <td colspan="3">John Doe</td>
          </tr>
          <tr>
            <td class="label">期次应还金额</td>
            <td>111</td>
            <td class="label">期次还款状态</td>
            <td colspan="3">John Doe</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="name">
                    <el-date-picker
                      v-model="form.datetime"
                      class="w-full"
                      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="name">
                    <div class="w-full">
                      <el-input v-model="form.name" placeholder="请输入" class="w-full" />
                      <div class="text-red-500">*金额必须等于应还金额</div>
                    </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';
  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 currentInfo = ref({ title: '结清减免还款', case: 0, money: 0 });
  const form = reactive({
    name: '',
    files: [],
    datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  });
  const radio = ref(0);
  const step = ref(0);

  const onHide = () => {
    currentInfo.value = { title: '结清减免还款', case: 0, money: 0 };
  };
  const openModal = (account) => {
    showModal.value = true;
    currentInfo.value = { title: '分期还款', case: 44, money: 1111 };
    step.value = 0;
    radio.value = 0;
  };

  const submitForm = () => {
    if (step.value || radio.value === 0) {
    } else {
      step.value = 1;
    }
  };
  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };

  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url;
    dialogVisible.value = true;
  };
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ];
  const handleFileSuccess = (response, file, fileList) => {
    console.log('888877', response, file, fileList);
  };
  const config = computed(() => {
    return {
      toolbarConfig: { enabled: false },
      columns: [
        {
          field: 'code',
          title: '案件ID',
        },
        {
          field: 'code',
          title: '借款机构',
        },
        {
          field: 'code',
          title: '剩余待还金额',
        },
      ],
    };
  });

  tabledata.value = [
    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
    { name: 'account1', code: 'account1', role: 'user', num: 1 },
    { name: 'account2', code: 'account2', role: 'user', num: 1 },
    { name: 'account3', code: 'account3', role: 'user', num: 1 },
  ];
  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>
