<template>
  <div class="table-box">
    <div class="table-inner">
      <ProTable :config="config" ref="caseLRef" :api="getCreditPage" :paramCallback="paramCallback">
        <template #table_top>
          <div class="style-lable" style="width: 100%">
            <div class="item_warp" style="width: 19%">
              <div class="img_warp">
                <img src="@/assets/images/caselist.svg" />
              </div>
              <div class="title_warp">
                <div class="items">案件数量</div>
                <div class="item items1">{{statisis.caseNum}}</div>
              </div>
            </div>
            <div class="item_warp" style="width: 19%">
              <div class="img_warp">
                <img src="@/assets/images/userlist.svg" />
              </div>
              <div class="title_warp">
                <div class="items">案人人数</div>
                <div class="item items1">{{statisis.cpeNum}}</div>
              </div>
            </div>
            <div class="item_warp" style="width: 19%">
              <div class="img_warp">
                <img src="@/assets/images/money.svg" />
              </div>
              <div class="title_warp">
                <div class="items">委案金额</div>
                <div class="item items1">￥{{statisis.amount}}</div>
              </div>
            </div>
            <div class="item_warp" style="width: 19%">
              <div class="img_warp">
                <img src="@/assets/images/tocrash.svg" />
              </div>
              <div class="title_warp">
                <div class="items">待还金额</div>
                <div class="item items1">￥{{statisis.unAmount}}</div>
              </div>
            </div>
          </div>
        </template>
      </ProTable>
    </div>
    <caseModal ref="caseModalRef" />
  </div>
</template>

<script setup name="case-manage" lang="jsx">
  import caseModal from './components/caseModal.vue';
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue';
  import { getCreditPage, getCreditTotal } from '@/api/property';
  import { ElButton, ElMessage, ElTag } from 'element-plus';
  const caseModalRef = ref();
  const caseLRef = ref();
  const statisis = ref({});

  import { onMounted } from 'vue';
  import { getPlatformPage } from '@/api/platform';
  import { getManageOrgPage } from '@/api/manageOrg';
  import { useDict } from '@/hooks/useDict';
  const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, AuditStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","AuditStatus", "CaseStatus");
  const router = useRouter();
  const onCellClick = (row) => {
    router.push({
      path: '/property/case-detail',
      query: { id: row.id }, //这里不能直接写成 query: JSON.stringify(item)
    });
  };
  const getStatisis = (params) => {
    getCreditTotal(params).then((res) => {
      if (res.success) {
        statisis.value = res.result;
      }
    });
  };
  const paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    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['trackTime']) {
      if (obj['trackTime'][0]) obj['trackTimeBegin'] = obj['trackTime'][0];
      if (obj['trackTime'][1]) obj['trackTimeEnd'] = obj['trackTime'][1];
      delete obj['trackTime'];
    }
    if (obj['tenantTime']) {
      if (obj['tenantTime'][0]) obj['tenantTimeBegin'] = obj['tenantTime'][0];
      if (obj['tenantTime'][1]) obj['tenantTimeEnd'] = obj['tenantTime'][1];
      delete obj['tenantTime'];
    }
    getStatisis(obj);
    return obj;
  };
  const config = reactive({
    columns: [
      {
        field: 'caseId',
        title: '案件ID',
        showOverflow: 'tooltip',
        search: { el: 'input', labelWidth: 90 },
        width: 190,
        slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <div
                  onClick={() => onCellClick(row)}
                  className=" text-blue-400 cursor-pointer"
                >
                  {row.caseId}
                </div>
              </>
            );
          },
        },
      },
      {
        field: 'loanPlatform.name',
        showOverflow: 'tooltip',
        enum: () => getPlatformPage({ current: 1, size: 999999999, status: 'enable' }),
        search: { el: 'select', props: { filterable: true }, key: 'loanPlatform', labelWidth: 90 },
        fieldNames: { label: 'name', value: 'id' },
        title: '借款平台',
        width: 100,
      },
      {
        field: 'manageOrg.orgName',
        title: '资管公司',
        enum: () => getManageOrgPage({ current: 1, size: 999999999, status: 'enable' }),
        fieldNames: { label: 'orgName', value: 'id' },
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'select', props: { clearable: true }, key: 'manageOrg', labelWidth: 90 },
      },
      {
        field: 'borrower.name',
        title: '借款人姓名',
        showOverflow: 'tooltip',
        width: 120,
        search: {
          el: 'input',
          key: 'borrowerName',
          props: { clearable: true },
          labelWidth: 90,
        },
      },
      {
        field: 'borrower.idCard',
        title: '身份证',
        showOverflow: 'tooltip',
        width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'borrowerIdCard',
          labelWidth: 90,
        },
      },
      {
        field: 'borrower.phone',
        title: '手机号',
        showOverflow: 'tooltip',
        width: 140,
        search: {
          el: 'input',
          props: { clearable: true },
          key: 'borrowerPhone',
          labelWidth: 90,
        },
      },
      {
        field: 'discount',
        title: '折扣',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'repayStatus',
        title: '还款状态',
        showOverflow: 'tooltip',
        width: 80,
        slots: {
          default: ({ row }) => {
            return <div>{row.repayStatus == 'over' ? '已还款' : '待还款'}</div>;
          },
        },
      },
      {
        field: 'commissionAmount',
        title: '委案金额',
        showOverflow: 'tooltip',
        width: 80,
        search: { render: ({ searchParam }) => {
          return (
            <div class="flex">
              <el-input vModel_trim={searchParam.commissionAmountBegin} placeholder="" />
              <span class="mr-1 ml-1">-</span>
              <el-input vModel_trim={searchParam.commissionAmountEnd} placeholder="" />
            </div>
          );
        }, props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'maxStagesNum',
        title: '分期最大期数',
        width: 60,
        showOverflow: 'tooltip',
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'minAmount',
        title: '最低分期金额',
        width: 80,
        showOverflow: 'tooltip',
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'mergerCase',
        title: '是否共案处理',
        showOverflow: 'tooltip',
        width: 100,
        slots: {
          default: ({ row }) => {
            return <ElTag>{row.mergerCase == 'Y' ? '是' : '否'}</ElTag>;
          },
        },
      },
      {
        field: 'sumRepayAmount',
        title: '累计还款金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'sumReductionAmount',
        title: '累计减免金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'remainingAmount',
        title: '剩余待还金额',
        showOverflow: 'tooltip',
        width: 100,
        search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },

      {
        field: 'cpe.username',
        showOverflow: 'tooltip',
        title: 'CPE',
        width: 80,
        search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 90 },
      },
      {
        field: 'cpeDate',
        title: '分派CPE日期',
        showOverflow: 'tooltip',
        width: 130,
        search: {
          el: 'date-picker',
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
          labelWidth: 90
        },
      },
      {
        field: 'trackTime',
        title: '跟进时间',
        showOverflow: 'tooltip',
        width: 130,
        search: {
          el: 'date-picker',
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
          labelWidth: 90
        },
      },
      {
        field: 'principalBalance',
        showOverflow: 'tooltip',
        title: '本金余额',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'commission',
        showOverflow: 'tooltip',
        title: '手续费',
        width: 80,
        search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'followStatus',
        showOverflow: 'tooltip',
        title: '跟进结果',
        width: 80,
        enum: FollowStatus,
        search: { el: 'select', props: { filterable: true }, labelWidth: 90 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.followStatus
                  ? FollowStatus.value?.find((v) => v.value === row.followStatus)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'phoneResultStatus',
        showOverflow: 'tooltip',
        title: '跟进状态',
        width: 80,
        enum: PhoneResultStatus,
        search: { el: 'select', props: { filterable: true }, labelWidth: 90 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.phoneResultStatus
                  ? PhoneResultStatus.value?.find((v) => v.value === row.phoneResultStatus)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'caseStatus',
        title: '案件状态',
        showOverflow: 'tooltip',
        width: 80,
        enum: CaseStatus,
        search: { el: 'select', props: { filterable: true }, labelWidth: 90 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.caseStatus ? CaseStatus.value?.find((v) => v.value === row.caseStatus)?.label : ''}
              </>
            );
          },
        },
      },
      {
        field: 'credit?.borrowingTime',
        title: '借款时间',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.litigationStatus',
        title: '诉讼执行状态',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.litigationCaseNo',
        title: '诉讼案号',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.executeCaseNo',
        title: '执行案号',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.closingStatus',
        title: '结案状态',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.constantNo',
        title: '合同编号',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.planAmountOrg',
        title: '资金方名称',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.planAmount',
        title: '申请金额',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.paymentDate',
        title: '借款日期',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overDate',
        title: '到期日期',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.period',
        title: '期数',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.lastPaymentDate',
        title: '最后还款日期',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.yearRate',
        title: '年化利率',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.paymentAmount',
        title: '订单总应还金额',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.interest',
        title: '订单总应还利息',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.free',
        title: '订单总应还其他费用',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overdue',
        title: '逾期日期',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overdueDays',
        title: '逾期天数',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overduePeriod',
        title: '逾期期数',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overBalance',
        title: '已还本金',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overInterest',
        title: '已还利息',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.overFree',
        title: '已还其他费用',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.remark',
        title: '备注',
        showOverflow: 'tooltip',
        width: 80
      },
      {
        field: 'credit?.disbursement',
        title: '垫付费用',
        showOverflow: 'tooltip',
        width: 80
      },
    ],
  });

  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>
