<template>
  <vxe-modal
    resize
    v-model="showModal"
    title="修复申请"
    @hide="onHide"
    height="350"
    width="800"
    show-footer
    esc-closable
  >
    <div class="w-full px-3 h-full overflow-auto flex-col flex">
      <div class="box-title">案人基本信息</div>
      <el-form ref="formRef" inline :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item class="w-full" label="姓名：" prop="name" label-width="72px">
              {{ currentDetail?.borrower?.name }}
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item class="w-full" label="身份证号：" prop="code" label-width="85px">
              {{ currentDetail?.borrower?.idCard }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="w-full" label="联系人姓名：" prop="newName">
              <el-input v-model="form.newName" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="号码类型：" prop="role"> 修复 </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="w-full" label="与案人关系：" prop="kinship">
              <el-select v-model="form.kinship" placeholder="请选择关系">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="修复前联系号码：" prop="role" label-width="140px">
              {{ currentDetail?.borrower?.phone }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </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 { saveRepairRecord } from '@/api/property';
  import { ElMessage } from 'element-plus';

  import { reactive, ref } from 'vue';
  const data = ref([]);
  const mytransfer = ref();
  const tabledata = ref([]);

  const showModal = ref(false);
  const currentDetail = ref({ people: 0, case: 0, money: 0 });
  const form = reactive({
    newName: '',
    kinship: '',
  });

  const onHide = () => {
    currentDetail.value = { people: 0, case: 0, money: 0 };
  };
  const openModal = (account) => {
    console.log('currentDetail', currentDetail.value);
    showModal.value = true;
    currentDetail.value = account;
  };

  const submitForm = () => {
    saveRepairRecord({
      borrower: currentDetail.value?.borrower,
      oldName: '',
      newName: form.newName,
      oldPhone: JSON.stringify([currentDetail.value?.borrower?.phone]),
      newPhone: JSON.stringify([]),
      kinship: form.kinship,
      flowStatus: 'pending',
      status: 'enable',
      repairStatus: 'Y',
      tenantId: 0,
    }).then((res) => {
      console.log('sadas', res);
      if (res.success) {
        ElMessage.success({
          message: '保存成功',
        });
        showModal.value = false;
      }
    });
  };
  const options = [
    {
      value: '本人',
      label: '本人',
    },
    {
      value: '非本人',
      label: '非本人',
    },
  ];

  const config = computed(() => {
    return {
      columns: [
        { type: 'checkbox', width: 60 },
        { type: 'seq', width: 50, title: '序号' },
        {
          field: 'code',
          title: '联系人姓名',
        },
        {
          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: 16px;
    color: #000000;
    line-height: 43px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
  }
</style>
