<template>
  <div class="table-box">
    <div>
      <ProTable :config="config" :data="data" ref="caseLRef">
        <template #table_top>
          <div class="flex">
            <div>未分配案件数：<span class="text-blue-500 mr-1">1000</span>件</div>
            <div>未分配CPE数：<span class="text-blue-500 mr-1">1000</span>件</div>
            <div>未分配总金额数：<span class="text-blue-500 mr-1">1000</span>元</div>
          </div>
        </template>
        <!-- 表格 header 按钮 -->
        <template #left_buttons>
          <el-button type="primary" @click="allocation">分配 </el-button>
          <el-button type="primary">撤回 </el-button>
          <el-button type="primary">撤案 </el-button>
        </template>
      </ProTable>
    </div>
    <allocationModal ref="allocationModalRef" />
  </div>
</template>

<script setup name="case-allocation">
  import allocationModal from './components/allocationModal.vue';

  import { reactive, ref } from 'vue';
  const allocationModalRef = ref();
  const caseLRef = ref();
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const config = reactive({
    columns: [
      { type: 'checkbox', title: '', width: '40px' },
      { field: 'name', title: '案件ID/案件号', search: { el: 'input' } },
      {
        field: 'code',
        title: '所属区域',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'code',
        title: '借款机构',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '分配状态',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '调解中心',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '资管公司',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: 'CPE',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '分配中心日期',
        search: { el: 'date-picker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' } },
      },
      {
        field: 'role',
        title: '债权总额',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '分配CPE日期',
        search: { el: 'date-picker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' } },
      },
      {
        field: 'role',
        title: '借款人姓名',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '已还总额',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '身份证',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '手机',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '剩余本金',
      },
      {
        field: 'role',
        title: '剩余利息',
      },
      {
        field: 'role',
        title: '违约金',
      },
    ],
    onCheckboxChange: onCheckboxChange,
  });

  const allocation = (row) => {
    if (
      !caseLRef.value.element.getCheckboxRecords() ||
      caseLRef.value.element.getCheckboxRecords().length === 0
    )
      return;
    console.log('111', caseLRef.value.element.getCheckboxRecords());
    allocationModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
  const data = [
    { name: 'admin', code: 'admin', role: 'superadmin' },
    { name: 'account1', code: 'account1', role: 'user' },
    { name: 'account2', code: 'account2', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
  ];
</script>
