<template>
  <vxe-modal
    resize
    v-model="showModal"
    title="案件明细"
    @hide="onHide"
    height="582"
    width="1003"
    show-footer
    esc-closable
  >
    <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button>
    <ProTable
      :config="config"
      :paramCallback="paramCallback"
      :api="pengLoanExcel"
      ref="ProTableRef"
      :showToolBar="false"
    />
    <template #footer> </template>
  </vxe-modal>
</template>

<script setup lang="jsx">
  import { idCardEncipher } from '@/utils/jiaoyan'
  import { computed } from 'vue';
  import { reactive, ref, nextTick } from 'vue';
  import { pengLoanExcel } from '@/api/import';
  import { useDict } from '@/hooks/useDict';
  const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, AuditStatus, CaseStatus } =
    useDict(
      'PhoneResultStatus',
      'ReduceType',
      'FlowStatus',
      'FollowStatus',
      'AuditStatus',
      'CaseStatus'
    );
  const ProTableRef = ref();
  const showModal = ref(false);
  const data = ref([]);
  const currentAccount = ref(undefined);
  const exportEvent = () => {
    if (ProTableRef.value && ProTableRef.value.element) {
      ProTableRef.value.element.exportData({
        type: 'csv',
      });
    }
  };
  const config = reactive({
    exportConfig: {},
    maxHeight: 500,
    toolbarConfig: { enabled: false },
    columns: [
      {
        field: 'caseId',
        title: '案件ID',
        // search: { el: 'input', labelWidth: 90 },
        width: 190,
      },
      {
        field: 'loanPlatform.name',
        title: '借款平台',
        width: 100,
        // search: { el: 'input', props: { clearable: true }, key: 'payOrg', labelWidth: 90 },
      },
      {
        field: 'manageOrg.orgName',
        title: '资管公司',
        width: 100,
        // search: { el: 'input', props: { clearable: true }, key: 'manageOrg', labelWidth: 90 },
      },
      {
        field: 'borrower.name',
        title: '借款人姓名',
        width: 120,
        // search: {
        //   el: 'input',
        //   key: 'borrowerName',
        //   props: { clearable: true },
        //   labelWidth: 90,
        // },
      },
      {
        field: 'borrower.idCard',
        title: '身份证',
        slots: {
            default: ({ row }) => {
              return (
                <>
                  {idCardEncipher(row.borrower.idCard)}
                </>
              );
            },
          },
        width: 140,
        // search: {
        //   el: 'input',
        //   props: { clearable: true },
        //   key: 'borrowerIdCard',
        //   labelWidth: 90,
        // },
      },
      {
        field: 'borrower.phone',
        title: '手机号',
        width: 140,
        // search: {
        //   el: 'input',
        //   props: { clearable: true },
        //   key: 'borrowerPhone',
        //   labelWidth: 90,
        // },
      },
      {
        field: 'discount',
        title: '折扣',
        width: 80,
      },
      {
        field: 'weiyuejin',
        title: '当前逾期违约金',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'faxi',
        title: '当前逾期罚息',
        showOverflow: 'tooltip',
        width: 80,
      },
      {
        field: 'commissionAmount',
        title: '委案金额',
        width: 80,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'sumRepayAmount',
        title: '累计还款金额',
        width: 100,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'sumReductionAmount',
        title: '累计减免金额',
        width: 100,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'remainingAmount',
        title: '剩余待还金额',
        width: 100,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },

      {
        field: 'cpe.username',
        title: 'CPE',
        width: 80,
        // search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 90 },
      },
      {
        field: 'cpeDate',
        title: '分派CPE日期',
        width: 130,
        // search: {
        //   el: 'date-picker',
        //   props: { type: 'date', valueFormat: 'YYYY-MM-DD' },
        //   labelWidth: 90,
        // },
      },
      {
        field: 'principalBalance',
        title: '本金余额',
        width: 80,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'commission',
        title: '手续费',
        width: 80,
        // search: { el: 'input', props: { clearable: true }, labelWidth: 90 },
      },
      {
        field: 'followStatus',
        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',
        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: '案件状态',
        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 paramCallback = (param) => {
    const obj = JSON.parse(JSON.stringify(param));
    console.log('asdasd', obj)
    obj['batchCode'] = currentAccount.value.code
    return obj;
  }
  const onHide = () => {
    currentAccount.value = null;
  };
  const query = () => ProTableRef.value?.search();
  const openModal = (account) => {
    showModal.value = true;
    currentAccount.value = account;
    nextTick(() => {
      query()
    })
  };

  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped></style>
