<template>
  <div class="card content-box">
    <div class="table-inner">
      <ProTable :config="config" :data="data" ref="caseLRef">
        <template #left_buttons>
          <div class="topgrp">
            <div class="topbox">
              <div class="topinner">
                <p>统计值</p>
                <p>111</p>
              </div>
            </div>
          </div>
        </template>
      </ProTable>
    </div>
    <caseModal ref="caseModalRef" />
  </div>
</template>

<script setup name="case-manage">
  import caseModal from './components/caseModal.vue';
  import { useRouter } from 'vue-router'
  import { reactive, ref } from 'vue';
  const caseModalRef = ref();
  const caseLRef = ref();
  
 const router = useRouter()
  const options = ref([])
  const onCellClick = ({row, rowIndex}) => {
    let obj = JSON.stringify(row)
    router.push({
      path: '/property/case-detail',
      query: { item: obj },		//这里不能直接写成 query: JSON.stringify(item)
    })
  }
  const config = reactive({
    columns: [
      { 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: '委案金额',
        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: '分配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: '跟进结果',
        enum: options,
        search: { el: 'select', props:{filterable:true },span: 1 },
        fieldNames:{ label:"genderLabel", value: "genderValue" }
      },
      {
        field: 'role',
        title: '跟进状态',
        enum: options,
        search: { el: 'select', props:{filterable:true },span: 1 },
        fieldNames:{ label:"genderLabel", value: "genderValue" }
      },
      {
        field: 'role',
        title: '案件状态',
        enum: options,
        search: { el: 'select', props:{filterable:true },span: 1 },
        fieldNames:{ label:"genderLabel", value: "genderValue" }
      }
    ],
    onCellClick: onCellClick
  });
 
  const allocation = (row) => {
    if (!caseLRef.value.element.getCheckboxRecords() || caseLRef.value.element.getCheckboxRecords().length === 0) return
    console.log('111', caseLRef.value.element.getCheckboxRecords() )
    caseModalRef.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' },
  ];
</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);
      }
    }
    
  }
  :deep(.card)  {
    border: none;
    box-shadow: none;
  }
}
</style>
