<template>
  <div class="table-box">
    <ProTable :config="config" ref="ProTableRef" :api="getReducePage">
      <template #left_buttons>
        <!-- <el-button type="primary">下载申请 </el-button> -->
        <el-button
          type="primary"
          @click="changeStatus"
          :disabled="!selectdList || selectdList.length > 1"
          >审批
        </el-button>
        <!-- <el-button type="primary">下载 </el-button>
        <el-button type="primary">批量修复上传 </el-button> -->
      </template>
      <template #expand_content="{ row }">
        <div class="expand-box">
          <div>案件明细</div>
          <div class="expand-table">
            <table v-for="(item, index) in row.reduceRecords" :key="index"
              ><tbody>
                <tr>
                  <td class="label">案件ID：</td>
                  <td>{{ item?.loan?.caseId }}</td>
                  <td class="label">借款机构：</td>
                  <td>{{ item?.loan?.loanPlatform?.name }}</td>
                  <td class="label">资管公司：</td>
                  <td>{{ item?.loan?.manageOrg.orgName }}</td>
                </tr>
                <tr>
                  <td class="label">身份证：</td>
                  <td>{{ item?.loan?.borrower?.idCard }}</td>
                  <td class="label">手机号：</td>
                  <td>{{ item?.loan?.borrower?.phone }}</td>
                  <td class="label">折扣：</td>
                  <td>{{ item?.loan?.discount }}</td>
                  <td class="label">委案金额：</td>
                  <td>{{ item?.loan?.commissionAmount }}</td>
                </tr>
                <tr>
                  <td class="label">累计还款金额：</td>
                  <td>{{ item?.loan?.sumRepayAmount }}</td>
                  <td class="label">累计减免金额：</td>
                  <td>{{ item?.loan?.sumReductionAmount }}</td>
                  <td class="label">剩余待还金额：</td>
                  <td>{{ item?.loan?.remainingAmount }}</td>
                </tr>
                <tr>
                  <td class="label">CPE：</td>
                  <td>{{ item?.loan?.cpe.username }}</td>
                  <td class="label">分配CPE日期：</td>
                  <td>{{ item?.loan?.cpeDate }}</td>
                  <td class="label">本金余额：</td>
                  <td>{{ item?.loan?.principalBalance }}</td>
                  <td class="label">案件状态：</td>
                  <td>
                    {{
                      item?.loan?.caseStatus
                        ? caseStatusOpt.find((v) => v.value === item?.loan?.caseStatus).label
                        : ''
                    }}</td
                  >
                </tr>
                <tr>
                  <td class="label">欠息额：</td>
                  <td>{{ item?.loan?.debitInterest }}</td>
                  <td class="label">手续费：</td>
                  <td>{{ item?.loan?.commission }}</td>
                  <td class="label">跟进结果：</td>
                  <td>{{
                    item?.loan?.followStatus
                      ? followStatusOpt.find((v) => v.value === item?.loan?.followStatus).label
                      : ''
                  }}</td>
                  <td class="label">跟进状态：</td>
                  <td>{{
                    item?.loan?.phoneResultStatus
                      ? phoneResultStatusOpt.find((v) => v.value === item?.loan?.phoneResultStatus)
                          .label
                      : ''
                  }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </template>
    </ProTable>
    <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="danger" @click="submitForm('fail')">不通过</el-button>
        <el-button type="primary" @click="submitForm('pass')">通过</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup name="systemLog" lang="jsx">
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';
  import { getReducePage, flowStatusByIds } from '@/api/property';
  import { onMounted } from 'vue';
  import { ElMessageBox, ElMessage, ElButton } from 'element-plus';

  const ProTableRef = ref();
  const showModal = ref(false);
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    console.log('row', row);
    selectdList.value = row.records;
  };
  const reduceTypeOpt = [
    { label: '结清减免', value: 'settle' },
    { label: '分期减免', value: 'by_stages' },
  ];
  const flowStatusOpt = [
    { label: '待审核', value: 'pending' },
    { label: '通过', value: 'pass' },
    { label: '未通过', value: 'fail' },
  ];
  const changeStatus = async () => {
    showModal.value = true;
  };
  const submitForm = async (type) => {
    const ids = selectdList.value.map((v) => v.id).join(',');
    await flowStatusByIds({
      ids: ids,
      flowStatus: type,
    });

    ElMessage.success({
      message: '审核成功',
      plain: true,
    });
    showModal.value = false;

    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 = computed(() => {
    return {
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'expand', width: 80, slots: { content: 'expand_content' } },
        {
          field: 'caseId',
          title: '案件ID',
          showOverflow: 'tooltip',
          search: { el: 'input', labelWidth: 80 },
          slots: {
            default: ({ row }) => {
              return <>{row.reduceRecords.map((v) => v.loan.caseId).join(',')}</>;
            },
          },
          width: 120,
        },
        {
          field: 'borrower.name',
          title: '借款人名字',
          showOverflow: 'tooltip',
          search: { el: 'input', key: 'borrower', labelWidth: 80 },
          width: 90,
        },
        {
          field: 'totalReduceAmount',
          showOverflow: 'tooltip',
          title: '减免金额',
          search: { el: 'input', labelWidth: 80 },
          width: 120,
        },
        {
          field: 'totalNumber',
          showOverflow: 'tooltip',
          title: '减免案件数',
          search: { el: 'input', labelWidth: 80 },
          width: 120,
        },
        {
          field: 'remainingAmount',
          showOverflow: 'tooltip',
          title: '剩余待还金额',
          search: { el: 'input', labelWidth: 80 },
          width: 120,
        },
        {
          field: 'totalPayAmount',
          showOverflow: 'tooltip',
          title: '累计还款金额',
          search: { el: 'input', labelWidth: 80 },
          width: 120,
        },
        {
          field: 'reduceType',
          title: '减免类型',
          showOverflow: 'tooltip',
          width: 80,
          enum: reduceTypeOpt,
          search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 80 },
          fieldNames: { label: 'label', value: 'value' },
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.reduceType
                    ? reduceTypeOpt.find((v) => v.value === row.reduceType).label
                    : ''}
                </>
              );
            },
          },
        },
        {
          field: 'flowStatus',
          title: '审核状态',
          showOverflow: 'tooltip',
          width: 80,
          enum: flowStatusOpt,
          search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 80 },
          fieldNames: { label: 'label', value: 'value' },
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.flowStatus
                    ? flowStatusOpt.find((v) => v.value === row.flowStatus).label
                    : ''}
                </>
              );
            },
          },
        },
        {
          field: 'applyDate',
          title: '减免截止时间',
          showOverflow: 'tooltip',
          search: {
            el: 'date-picker',
            labelWidth: 80,
            props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
        },
        {
          field: 'inEffectDate',
          title: '减免生效时间',
          showOverflow: 'tooltip',
          search: {
            el: 'date-picker',
            labelWidth: 80,
            props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
        },
      ],
      onCheckboxChange: onCheckboxChange,
    };
  });
  const query = () => ProTableRef.value?.search();

  onMounted(() => {
    query();
  });
</script>
<style lang="scss" scoped>
  .expand-box {
    background: #fff;
    padding: 10px;
    .expand-table {
      color: #000;
      table {
        width: 100%;
        margin-top: 10px;
        border-collapse: collapse;
      }
      td {
        border: 1px solid rgba(5, 5, 5, 0.06);
        background: #fff;
        padding: 8px;
        width: 240px;
        &.label {
          background: #f5f7f9;
        }
      }
    }
  }
</style>
