<template>
  <div class="table-box">
    <ProTable :config="config" ref="caseLRef" :api="getRepairRecord">
      <template #left_buttons>
        <!-- <el-button type="primary">下载申请 </el-button> -->
        <el-button
          type="primary"
          @click="changeStatus"
          :disabled="!selectdList || selectdList.length > 1"
          >审批
        </el-button>
        <!-- <el-button type="primary">下载 </el-button>
        <el-button type="primary">批量修复上传 </el-button> -->
      </template>
    </ProTable>
    <vxe-modal resize
      v-model="showModal"
      title="审批提示"
      height="282"
      width="450"
      show-footer
      esc-closable
    >
      <div class="w-full px-3 h-full overflow-auto flex-col flex mytable">
        是否审批通过选中的数据？
      </div>
      <template #footer>
        <el-button type="default" @click="showModal = false">取消</el-button>
        <el-button type="danger" @click="submitForm('fail')">不通过</el-button>
        <el-button type="primary" @click="submitForm('pass')">通过</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup name="systemLog" lang="jsx">
  import { computed } from 'vue';
  import { onMounted } from 'vue';
  import { reactive, ref } from 'vue';
  import { getRepairRecord, RepairRecordStatusByIds } from '@/api/property';
  import { ElMessageBox, ElMessage, ElButton } from 'element-plus';

  const tabledata = ref([]);
  const showModal = ref(false);
  const caseLRef = ref();
  const flowStatusOpt = [
    { label: '待审核', value: 'pending' },
    // { label: '审核中', value: 'in_review' },
    { label: '通过', value: 'pass' },
    { label: '未通过', value: 'fail' }
  ];
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    console.log('row', row);
    selectdList.value = row.records;
  };
  const onCheckboxAll =(flag)=> {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  }
  const changeStatus = async () => {
    showModal.value = true;
  };
  const submitForm = async (type) => {
    const ids = selectdList.value.map((v) => v.id).join(',');
    await RepairRecordStatusByIds({
      ids: ids,
      flowStatus: type,
    });

    ElMessage.success({
      message: '审核成功',
      plain: true,
    });
    showModal.value = false;

    query();
  };

  const config = reactive({
    columns: [
    { type: 'checkbox', width: 50 },
      {
        field: 'borrower.name',
        title: '借款人姓名',
        showOverflow: 'tooltip',
        width: 120,
        // search: {
        //   el: 'input',
        //   key: 'name',
        //   props: { clearable: true },
        //   labelWidth: 95,
        // },
      },
      {
        field: 'borrower.idCard',
        title: '借款人身份证',
        showOverflow: 'tooltip',
        width: 140,
        // search: {
        //   el: 'input',
        //   props: { clearable: true },
        //   key: 'borrowerIdCard',
        //   labelWidth: 95,
        // },
      },
      {
        field: 'newName',
        title: '联系人姓名',
        showOverflow: 'tooltip',
        width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'name',
          labelWidth: 95,
        },
      },
      {
        field: 'oldPhone',
        title: '修复前联系方式',
        showOverflow: 'tooltip',
        // width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'oldPhone',
          labelWidth: 95,
        },
      },
      {
        field: 'newPhone',
        title: '修复后联系方式',
        showOverflow: 'tooltip',
        // width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'newPhone',
          labelWidth: 95,
        },
      },
      {
        field: 'kinship',
        title: '与债权人关系',
        showOverflow: 'tooltip',
        // width: 140,
        // search: {
        //   el: 'input',
        //   props: { clearable: true },
        //   key: 'newPhone',
        //   labelWidth: 95,
        // },
      },
      {
        field: 'flowStatus',
        showOverflow: 'tooltip',
        title: '审核状态',
        width: 95,
        enum: flowStatusOpt,
        search: { el: 'select', props: { filterable: true }, labelWidth: 95 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.flowStatus
                  ? flowStatusOpt.find((v) => v.value === row.flowStatus).label
                  : ''}
              </>
            );
          },
        },
      }
    ],
    onCheckboxChange: onCheckboxChange,
    onCheckboxAll: onCheckboxAll
  });
  const query = () => caseLRef.value?.search();

  onMounted(() => {
    query();
  });
</script>
