<!--
 * @Author: Fly
 * @Date: 2025-12-12 17:32:24
 * @LastEditTime: 2025-12-23 14:09:46
 * @Description: 平台提现明细
-->
<template>
  <div class="app-container">
    <el-form :model="search" :size="ELsize" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
      <el-form-item label="提现单号">
        <el-input v-model="search.withdrawalNo" placeholder="请输入提现单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="提现人手机号">
        <el-input v-model="search.withdrawalPhone" placeholder="请输入提现人手机号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="提现人姓名">
        <el-input v-model="search.withdrawalName" placeholder="请输入提现人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="提现状态">
        <el-select v-model="search.status" placeholder="请选择提现状态" clearable>
          <el-option v-for="item in WithdrawalStatusOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="提现来源">
        <el-select v-model="search.withdrawalSource" placeholder="请选择提现来源" clearable>
          <el-option v-for="item in WithdrawalSourceOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="提现方式">
        <el-select v-model="search.withdrawalMethod" placeholder="请选择提现方式" clearable>
          <template v-for="item in WithdrawalMethodOption">
            <el-option :label="item.label" :value="item.value" />
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="申请时间">
        <el-date-picker v-model="search.createTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="打款时间">
        <el-date-picker v-model="search.paymentTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" :size="ELsize" @click="handleExport">导出</el-button>
      </el-col>
      <div class="table-top-statistics">
        <span :class="['table-top-type', ELsize]">
          提现金额合计：<span class="table-top-num">{{ statisticsInfo.amount || 0 }}</span>
        </span>
        <span :class="['table-top-type', ELsize]">
          手续费合计：<span class="table-top-num">{{ statisticsInfo.fee || 0 }}</span>
        </span>
        <span :class="['table-top-type', ELsize]">
          实际到账合计（扣除手续费）：<span class="table-top-num">{{ statisticsInfo.paymentAmount || 0 }}</span>
        </span>
      </div>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="提现单号" align="center" prop="withdrawalNo" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.withdrawalNo | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现人手机号" align="center" prop="withdrawalPhone">
        <template slot-scope="{ row }">
          {{ row.withdrawalPhone | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现人" align="center" prop="withdrawalName">
        <template slot-scope="{ row }">
          {{ row.withdrawalName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现来源 " align="center" prop="withdrawalSource">
        <template slot-scope="{ row }">
          {{ row.withdrawalSource | WithdrawalSourceOptionFilter | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现金额" align="center" prop="amount">
        <template slot-scope="{ row }">
          {{ row.amount | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现手续费" align="center" prop="fee">
        <template slot-scope="{ row }">
          {{ row.fee | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现方式" align="center" prop="withdrawalMethod">
        <template slot-scope="{ row }">
          {{ row.withdrawalMethod | WithdrawalMethodOptionFilter | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="createTime" width="160">
        <template slot-scope="{ row }">
          {{ row.createTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="打款时间" align="center" prop="paymentTime" width="160">
        <template slot-scope="{ row }">
          {{ row.paymentTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提现状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <StatusTag :status-vo="row.status | WithdrawalStatusOptionFilter(true)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button :size="ELTableSize" type="text"
            @click.stop="$refs.AuditWithdrawRef.openHandle(row, 'detail')">查看</el-button>

          <el-button :size="ELTableSize" type="text" v-if="row.auditStatus === AuditStatusEnum.AUDIT_PENDING"
            @click.stop="$refs.AuditWithdrawRef.openHandle(row, 'audit')">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <AuditWithdraw ref="AuditWithdrawRef" @success="handleQuery" />
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import {
  getWithdrawalPage,
  getWithdrawalStatistics,
  exportWithdrawalApi
} from "@/api/financeManage";
import { WithdrawalMethodOption, WithdrawalStatusOption, WithdrawalSourceOption, AuditStatusEnum } from "@/utils/statusEnum";
import AuditWithdraw from "@/views/financeManage/components/auditWithdraw.vue";
export default {
  mixins: [getListApi],
  components: { AuditWithdraw },
  data() {
    return {
      AuditStatusEnum,
      WithdrawalMethodOption,
      WithdrawalStatusOption,
      WithdrawalSourceOption,
      listURL: getWithdrawalPage,

      statisticsInfo: {},
      dateRangeMapping: {
        createTime: { start: "createStartTime", end: "createEndTime" },
        paymentTime: { start: "paymentStartTime", end: "paymentEndTime" },
      },
      exportObj: {
        url: exportWithdrawalApi,
        name: '提现列表'
      }
    };
  },

  methods: {
    handleRefreshPage() {
      this.getList();
      this.getStatistics();
    },
    // 获取补贴队列业务统计
    async getStatistics() {
      try {
        // 处理日期范围参数
        const Params = this.processDateRangeParams({
          ...this.queryParams,
          ...this.search,
        });
        const { data } = await getWithdrawalStatistics(Params);
        this.statisticsInfo = data || {};
      } catch (error) {
        this.statisticsInfo = {};
      }
    },
  },
};
</script>
