<template>
  <div class="table-box">
    <div>
      <ProTable :config="config" ref="caseLRef" :api="getLoanpage" :paramCallback="paramCallback">
        <!-- 表格 header 按钮 -->
        <template #left_buttons>
          <el-button
            type="primary"
            @click="backCase"
            >撤案
          </el-button>
        </template>
      </ProTable>
    </div>
    <vxe-modal
      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="primary" @click="submitForm('withdraw')">撤案</el-button>
        <el-button type="danger" @click="submitForm('fullWithdraw')">强制撤案</el-button>

      </template>
    </vxe-modal>
  </div>
</template>

<script setup name="case-allocation" lang="jsx">
  import { getLoantotal, getLoanpage, withdraw, fullWithdraw } from '@/api/allcation';
  import { reactive, ref } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import citydata from '../../../assets/citydata';
  import { onMounted } from 'vue';
  const caseLRef = ref();
  const selectdList = ref([]);
  const curParam = ref({});
  const showModal = ref(false);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const statisis = ref({});
  const getStatisis = (params) => {
    getLoantotal(params).then((res) => {
      if (res.success) {
        statisis.value = res.result;
      }
    });
  };
  const backCase = async () => {
    showModal.value = true
  };
  const submitForm = async (type) => {
    const ids = selectdList.value.map((v) => v.id).join(',');
    if (type === 'withdraw') {
      await withdraw(ids);
      ElMessage({
        type: 'success',
        message: '撤案成功！',
        plain: true,
      });
    } else {
      await fullWithdraw(ids);
      ElMessage({
        type: 'success',
        message: '强制撤案成功！',
        plain: true,
      });
    }
    query();
  }
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    if (obj.arealist && obj.arealist.length > 0) {
      obj['province'] = obj.arealist[0];
      obj['city'] = obj.arealist.length > 1 ? obj.arealist[1] : null;
      obj['district'] = obj.arealist.length > 2 ? obj.arealist[2] : null;
      delete obj['arealist'];
    }
    if (obj['cpeDate']) {
      if (obj['cpeDate'][0]) obj['cpeDateBegin'] = obj['cpeDate'][0];
      if (obj['cpeDate'][1]) obj['cpeDateEnd'] = obj['cpeDate'][1];
      delete obj['cpeDate'];
    }
    if (obj['tenantTime']) {
      if (obj['tenantTime'][0]) obj['tenantTimeBegin'] = obj['tenantTime'][0];
      if (obj['tenantTime'][1]) obj['tenantTimeEnd'] = obj['tenantTime'][1];
      delete obj['tenantTime'];
    }
    curParam.value = obj;
    // getStatisis(obj);
    return obj;
  };
  const distributeStatusOpt = [
    { label: '未分派', value: 'undistributed' },
    { label: '分派到调解中心', value: 'tenant' },
    { label: '分派到CPE', value: 'CPE' },
  ];
  const onCheckboxAll =(flag)=> {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  }
  console.log('citydatacitydata', citydata);
  const config = reactive({
    columns: [
      { type: 'checkbox', title: '', width: 40 },
      {
        field: 'caseId',
        title: '案件ID',
        showOverflow: 'tooltip',
        search: { el: 'input', labelWidth: 78 },
        width: 100,
      },
      {
        field: 'arealist',
        enum: citydata,
        title: '所属区域',
        showOverflow: 'tooltip',
        width: 100,
        fieldNames: { label: 'label', value: 'value' },
        search: { el: 'cascader', props: { clearable: true, checkStrictly: true }, labelWidth: 78 },
        slots: {
          default: ({ row }) => {
            return (
              <div>
                {row.manageOrg.province}
                {row.manageOrg.city ? '-' + row.manageOrg.city : ''}
                {row.manageOrg.district ? '-' + row.manageOrg.district : ''}
              </div>
            );
          },
        },
      },
      {
        field: 'loanPlatform.name',
        title: '借款机构',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, key: 'payOrg', labelWidth: 78 },
      },
      {
        field: 'manageOrg.orgName',
        showOverflow: 'tooltip',
        title: '资管公司',
        width: 100,
        search: { el: 'input', props: { clearable: true }, key: 'manageOrg', labelWidth: 78 },
      },
      {
        field: 'batchCode',
        title: '导入批次',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, key: 'batchCode', labelWidth: 78 },
      },
      {
        field: 'distributeStatus',
        title: '分派状态',
        showOverflow: 'tooltip',
        width: 80,
        enum: distributeStatusOpt,
        search: { el: 'select', props: { filterable: true }, labelWidth: 78 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.distributeStatus
                  ? distributeStatusOpt.find((v) => v.value === row.distributeStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'tenant.name',
        title: '调解中心',
        showOverflow: 'tooltip',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 78 },
      },
      {
        field: 'discount',
        title: '折扣',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'cpe.name',
        title: 'CPE',
        showOverflow: 'tooltip',
        width: 60,
        search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 78 },
      },
      {
        field: 'tenantTime',
        title: '分派中心日期',
        showOverflow: 'tooltip',
        width: 130,
        search: {
          el: 'date-picker',
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
          labelWidth: 78,
        },
      },
      {
        field: 'commissionAmount',
        title: '债权总额',
        showOverflow: 'tooltip',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 78 },
      },
      {
        field: 'cpeDate',
        title: '分派CPE日期',
        showOverflow: 'tooltip',
        width: 130,
        search: {
          el: 'date-picker',
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
          labelWidth: 78,
        },
      },
      {
        field: 'borrower.name',
        title: '借款人姓名',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', key: 'borrowerName', props: { clearable: true }, labelWidth: 78 },
      },
      {
        field: 'sumRepayAmount',
        title: '已还总额',
        showOverflow: 'tooltip',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 78 },
      },
      {
        field: 'borrower.idCard',
        title: '身份证',
        showOverflow: 'tooltip',
        width: 140,
        search: { el: 'input', props: { clearable: true }, key: 'idCard', labelWidth: 78 },
      },
      {
        field: 'borrower.phone',
        key: 'borrowerPhone',
        showOverflow: 'tooltip',
        title: '手机',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 78 },
      },
      {
        field: 'principalBalance',
        title: '剩余本金',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'remaininginterest',
        title: '剩余利息',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'commission',
        title: '违约金',
        showOverflow: 'tooltip',
        width: 80,
      },
    ],
    onCheckboxChange: onCheckboxChange,
    onCheckboxAll: onCheckboxAll
  });

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

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