<template>
  <div class="table-box">
    <div class="table-inner">
      <ProTable :config="config" ref="caseLRef" :api="getCreditPage" :paramCallback="paramCallback">
        <template #left_buttons>
          <el-button
            type="primary"
            :disabled="!selectdList || selectdList.length < 1"
            @click="stayCase"
            >留案
          </el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script setup name="case-manage" lang="jsx">
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue';
  import { getCreditPage } from '@/api/property';
  const caseLRef = ref();
  import { stayLoan } from '@/api/allcation';
  import { onMounted } from 'vue';
  import { useUserStore } from '@/stores/modules/user';
  const { userInfo } = useUserStore();
  const router = useRouter();
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const onCheckboxAll =(flag)=> {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  }
  const onCellClick = (row) => {
    router.push({
      path: '/property/case-detail',
      query: { id: row.id }, //这里不能直接写成 query: JSON.stringify(item)
    });
  };
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    if (userInfo.id) {
      obj['cpe'] = userInfo.id
    }
    return obj;
  };
  const stayCase = async () => {
    await ElMessageBox.confirm('是否确认留案?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });

      const ids = selectdList.value.map((v) => v.id).join(',');
      await stayLoan(ids);

      ElMessage({
        type: 'success',
        message: '留案成功！',
        plain: true,
      });
      query();
  }
  const followStatusOpt = [
    { label: '接通后挂断', value: 'hang_up' },
    { label: '接通有实质进展', value: 'progress' },
    { label: '接通有效转告', value: 'pass_on' },
    { label: '接通拒绝转告', value: 'no_pass' },
    { label: '接听后挂断', value: 'Hang_up_after_answering' },
    { label: '接通无应答', value: 'No_response_when_connected' },
    { label: '称与债人无关', value: 'Claims_unrelated_to_creditors' },
    { label: '称非本人', value: 'Claiming_not_to_be_myself' },
    { label: '无人接听', value: 'no_answer' },
    { label: '关机', value: 'Shutdown' },
    { label: '空号', value: 'dead_number' },
    { label: '占线/忙音/正在通话中', value: 'Busy' },
    { label: '停机', value: 'closing_down' },
    { label: '机器人回复', value: 'Robot_reply' },
    { label: '微信', value: 'WeChat' },
    { label: '短信', value: 'short_message' },
    { label: 'QQ', value: 'QQ' },
    { label: '飞书', value: 'fly' },
    { label: '钉钉', value: 'DING' },
  ];
  const phoneResultStatusOpt = [
    { label: '后续再跟进', value: 'later' },
    { label: '承诺还款', value: 'Promise_Repayment' },
    { label: '暂无还款意愿', value: 'No_Repay' },
    { label: '要求停催', value: 'Stop_Urging' },
    { label: '情绪激动抗拒', value: 'resistance' },
    { label: '拒绝还款', value: 'Refuse_Repayment' },
    { label: '已还款', value: 'Repaired' },
    { label: '代履行还款', value: 'repayment_others' },
  ];
  const caseStatusOpt = [
    { label: '正常', value: 'normal' },
    { label: '撤案', value: 'withdraw' },
    { label: '留案', value: 'stay' },
  ];
  const config = reactive({
    columns: [
      { type: 'checkbox', title: '', width: 40 },
      {
        field: 'caseId',
        title: '案件ID',
        search: { el: 'input', labelWidth: 80 },
        showOverflow: 'tooltip',
        width: 190,
        slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => onCellClick(row)}
                  className=" text-blue-400 underline cursor-pointer"
                >
                  {row.caseId}
                </div>
              </>
            );
          },
        },
      },
      {
        field: 'loanPlatform.name',
        title: '借款机构',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, key: 'payOrg', labelWidth: 80 },
      },
      {
        field: 'manageOrg.orgName',
        title: '资管公司',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, key: 'manageOrg', labelWidth: 80 },
      },
      {
        field: 'borrower.name',
        title: '借款人姓名',
        showOverflow: 'tooltip',
        width: 120,
        search: {
          el: 'input',
          key: 'borrowerName',
          props: { clearable: true },
          labelWidth: 80,
        },
      },
      {
        field: 'borrower.idCard',
        title: '身份证',
        showOverflow: 'tooltip',
        width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'borrowerIdCard',
          labelWidth: 80,
        },
      },
      {
        field: 'borrower.phone',
        title: '手机号',
        showOverflow: 'tooltip',
        width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'borrowerPhone',
          labelWidth: 80,
        },
      },
      {
        field: 'discount',
        title: '折扣',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'commissionAmount',
        title: '委案金额',
        showOverflow: 'tooltip',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'sumRepayAmount',
        title: '累计还款金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'sumReductionAmount',
        title: '累计减免金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'remainingAmount',
        title: '剩余待还金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'cpeDate',
        title: '分派CPE日期',
        showOverflow: 'tooltip',
        width: 130,
        search: {
          el: 'date-picker',
          props: { type: 'date', valueFormat: 'YYYY-MM-DD' },
          labelWidth: 80,
        },
      },
      {
        field: 'principalBalance',
        title: '本金余额',
        showOverflow: 'tooltip',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'debitInterest',
        showOverflow: 'tooltip',
        title: '欠息额',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'commission',
        showOverflow: 'tooltip',
        title: '手续费',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 80 },
      },
      {
        field: 'followStatus',
        showOverflow: 'tooltip',
        title: '跟进结果',
        width: 80,
        enum: followStatusOpt,
        search: { el: 'select', props: { filterable: true }, labelWidth: 80 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.followStatus
                  ? followStatusOpt.find((v) => v.value === row.followStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'phoneResultStatus',
        showOverflow: 'tooltip',
        title: '跟进状态',
        width: 80,
        enum: phoneResultStatusOpt,
        search: { el: 'select', props: { filterable: true }, labelWidth: 80 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.phoneResultStatus
                  ? phoneResultStatusOpt.find((v) => v.value === row.phoneResultStatus).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'caseStatus',
        showOverflow: 'tooltip',
        title: '案件状态',
        width: 80,
        enum: caseStatusOpt,
        search: { el: 'select', props: { filterable: true }, labelWidth: 80 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.caseStatus ? caseStatusOpt.find((v) => v.value === row.caseStatus).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>
