<template>
  <div class="table-box">
    <ProTable :config="config" ref="ProTableRef" :api="getByStagesPage">
      <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 class="flex">
            <div class="w-2/3 pr-2">
              <div>案件明细</div>
              <div class="expand-table">
                <div v-for="(item, index) in row.loans" :key="index">
                  <div class="public-header">
                    {{ item?.caseId }}
                  </div>
                  <table
                    ><tbody>
                      <tr>
                        <td class="label">案件ID</td>
                        <td>{{ item?.caseId }}</td>
                        <td class="label">借款机构</td>
                        <td>{{ item?.loanPlatform?.name }}</td>
                      </tr>
                      <tr>
                        <td class="label">资管公司</td>
                        <td>{{ item?.manageOrg.orgName }}</td>
                        <td class="label">身份证</td>
                        <td>{{ item?.borrower?.idCard }}</td>
                      </tr>
                      <tr>
                        <td class="label">手机号</td>
                        <td>{{ item?.borrower?.phone }}</td>
                        <td class="label">折扣</td>
                        <td>{{ item?.discount }}</td>
                      </tr>
                      <tr>
                        <td class="label">累计还款金额</td>
                        <td>{{ item?.sumRepayAmount }}</td>
                        <td class="label">累计减免金额</td>
                        <td>{{ item?.sumReductionAmount }}</td>
                      </tr>
                      <tr>
                        <td class="label">剩余待还金额</td>
                        <td>{{ item?.remainingAmount }}</td>
                        <td class="label">CPE</td>
                        <td>{{ item?.cpe?.username }}</td>
                      </tr>
                      <tr>
                        <td class="label">分派CPE日期</td>
                        <td>{{ item?.cpeDate }}</td>
                        <td class="label">本金余额</td>
                        <td>{{ item?.principalBalance }}</td>
                      </tr>
                      <tr>
                        <td class="label">手续费</td>
                        <td>{{ item?.commission }}</td>
                      </tr>
                      <tr>
                        <td class="label">委案金额</td>
                        <td>{{ item?.commissionAmount }}</td>
                        <td class="label">案件状态</td>
                        <td>
                          {{
                            item?.caseStatus
                              ? CaseStatus.find((v) => v.value === item?.caseStatus)?.label
                              : ''
                          }}</td
                        >
                      </tr>
                      <tr>
                        <td class="label">跟进结果</td>
                        <td>{{
                          item?.followStatus
                            ? FollowStatus.find((v) => v.value === item?.followStatus)?.label
                            : ''
                        }}</td>
                        <td class="label">跟进状态</td>
                        <td>{{
                          item?.phoneResultStatus
                            ? PhoneResultStatus.find((v) => v.value === item?.phoneResultStatus)
                                .label
                            : ''
                        }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="flex-1">
              <div>分期明细</div>
              <div class="expand-table">
                <ProTable
                  :config="splitDeConfig"
                  :data="row.byStagesRecords"
                  :showPagination="false"
                  :showToolBar="false"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
    </ProTable>
    <vxe-modal
      resize
      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 { getByStagesPage, byStagesflowStatusByIds } from '@/api/property';
  import { onMounted } from 'vue';
  import { ElMessageBox, ElMessage, ElButton } from 'element-plus';
  import { getTenantPage } from '@/api/tenant';
  import { useDict } from '@/hooks/useDict';
  const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus", "CaseStatus");

  const ProTableRef = ref();
  const showModal = ref(false);
  const selectdList = ref([]);
  const onCheckboxChange = (row) => {
    console.log('row', row);
    selectdList.value = row.records;
  };
  const onCheckboxAll = (flag) => {
    if (flag.checked) {
      selectdList.value = flag.records;
    } else {
      selectdList.value = [];
    }
  };
  const options = [
    {
      value: 2,
      label: '2',
    },
    {
      value: 3,
      label: '3',
    },
    {
      value: 4,
      label: '4',
    },
    {
      value: 5,
      label: '5',
    },
    {
      value: 6,
      label: '6',
    },
  ];
  const splitDeConfig = reactive({
    columns: [
      {
        field: 'period',
        title: '期次',
        showOverflow: 'tooltip',
      },
      {
        field: 'playApplyDate',
        title: '到期日',
        showOverflow: 'tooltip',
      },
      {
        field: 'repayStatus',
        title: '状态',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <>{row.repayStatus ? (row.repayStatus === 'over' ? '已还款' : '待还款') : ''}</>;
          },
        },
      },
      {
        field: 'applyAmount',
        title: '期次应还金额',
        showOverflow: 'tooltip',
      },
    ],
    toolbarConfig: { enabled: false },
  });
  const changeStatus = async () => {
    showModal.value = true;
  };
  const submitForm = async (type) => {
    const ids = selectdList.value.map((v) => v.id).join(',');
    await byStagesflowStatusByIds({
      ids: ids,
      flowStatus: type,
    });

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

    query();
  };

  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 <>{Array.from(new Set(row.loans.map((v) => v.caseId))).join(',')}</>;
            },
          },
          width: 80,
        },
        {
          field: 'loanPlatform.name',
          showOverflow: 'tooltip',
          title: '借款机构',
          slots: {
            default: ({ row }) => {
              return (
                <>{Array.from(new Set(row.loans.map((v) => v.loanPlatform.name))).join(',')}</>
              );
            },
          },
          // search: { el: 'input', labelWidth: 80 },
        },
        {
          field: 'borrower.name',
          showOverflow: 'tooltip',
          title: '借款人名字',
          search: { el: 'input', key: 'borrower', labelWidth: 80 },
          width: 90,
        },
        {
          title: 'CPE',
          showOverflow: 'tooltip',
          width: 60,
          slots: {
            default: ({ row }) => {
              if (row.cpe?.username) {
                return (
                  <>{row.cpe?.username}</>
                );
              } else {
                return (
                  <>{Array.from(new Set(row.loans.map((v) => v?.cpe?.username))).join(',')}</>
                );
              }
            },
          },
          // search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 78 },
        },
        {
          showOverflow: 'tooltip',
          slots: {
            default: ({ row }) => {
              if (row.tenant?.name) {
                return (
                  <>{row.tenant?.name}</>
                );
              } else {
                return (
                  <>{Array.from(new Set(row.loans.map((v) => v?.tenant?.name))).join(',')}</>
                );
              }
            },
          },
          enum: () => getTenantPage({ current: 1, size: 999999999, status: 'enable' }),
          // search: { el: 'select', props: { filterable: true }, key: 'tenantId', labelWidth: 78 },
          fieldNames: { label: 'name', value: 'id' },
          title: '调解中心',
          width: 100,
        },
        {
          field: 'totalRepayAmount',
          showOverflow: 'tooltip',
          title: '还款总额',
          search: { el: 'input', labelWidth: 80 },
          width: 80,
        },
        {
          field: 'applyDate',
          title: '分期申请时间',
          showOverflow: 'tooltip',
          search: {
            el: 'date-picker',
            labelWidth: 80,
            props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
          width: 115,
        },
        {
          field: 'effectiveTime',
          showOverflow: 'tooltip',
          title: '分期生效时间',
          search: {
            el: 'date-picker',
            labelWidth: 80,
            props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
          width: 115,
        },
        {
          field: 'totalPeriod',
          showOverflow: 'tooltip',
          title: '还款期数',
          enum: options,
          search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 80 },
          fieldNames: { label: 'label', value: 'value' },
          width: 80,
        },
        {
          field: 'firstApplyDate',
          showOverflow: 'tooltip',
          title: '首期还款日',
          search: {
            el: 'date-picker',
            props: { type: 'date', valueFormat: 'YYYY-MM-DD' },
            labelWidth: 80,
          },
          width: 100,
        },
        {
          field: 'remainingAmount',
          showOverflow: 'tooltip',
          title: '剩余待还金额',
          search: { el: 'input', labelWidth: 80 },
          width: 110,
        },
        {
          field: 'flowStatus',
          title: '审核状态',
          showOverflow: 'tooltip',
          width: 80,
          enum: FlowStatus,
          search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 80 },
          fieldNames: { label: 'label', value: 'value' },
          slots: {
            default: ({ row }) => {
              return (
                <>
                  {row.flowStatus
                    ? FlowStatus.value?.find((v) => v.value === row.flowStatus)?.label
                    : ''}
                </>
              );
            },
          },
        },
      ],
      onCheckboxChange: onCheckboxChange,
      onCheckboxAll: onCheckboxAll,
    };
  });
  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;
        line-height: 11px;
        &.label {
          text-align: center;
          background: var(--el-color-primary-light-9);
        }
      }
    }
  }
</style>
