<template>
  <div class="table-box">
    <div class="table-inner">
      <ProTable :config="config" ref="caseLRef" :api="getRepairRecord">
        <!-- <ProTable :config="config" ref="caseLRef" :data="data"> -->
        <!-- <template #table_top>
          <div class="topgrp">
            <div class="topbox">
              <div class="topinner">
                <p>统计值</p>
                <p>111</p>
              </div>
            </div>
          </div>
        </template> -->
      </ProTable>
    </div>
  </div>
</template>

<script setup name="case-manage" lang="jsx">
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue';
  import { getRepairRecord } from '@/api/property';
  const caseLRef = ref();
  import { onMounted } from 'vue';

  const router = useRouter();
  const onCellClick = (row) => {
    router.push({
      path: '/property/case-detail',
      query: { id: row.id }, //这里不能直接写成 query: JSON.stringify(item)
    });
  };
  const flowStatusOpt = [
    { label: '待审核', value: 'pending' },
    // { label: '审核中', value: 'in_review' },
    { label: '通过', value: 'pass' },
    { label: '未通过', value: 'fail' }
  ];

  const config = reactive({
    columns: [
      {
        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
                  : ''}
              </>
            );
          },
        },
      }
    ],
  });

  const query = () => caseLRef.value?.search();

  onMounted(() => {
    query();
  });
</script>
<style lang="scss" scoped>
  .table-inner {
    width: 100%;
    :deep(.topgrp) {
      display: flex;
      margin-bottom: 8px;
      .topbox {
        margin-right: 10px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 16px;
        width: 146px;
        height: 97px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        p:nth-child(1) {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
</style>
