﻿<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- 搜索区域 -->
			<el-card class="search-card" shadow="never">
				<div slot="header" class="search-header">
					<i class="el-icon-search"></i>
					<span>搜索条件</span>
				</div>
				<el-form :model="query" size="small" label-width="80px" class="search-form">
					<el-row :gutter="15" type="flex" align="middle">
						<el-col :span="4">
							<el-form-item label="申请号">
								<el-input v-model="query.walletNo" placeholder="请输入申请号" clearable prefix-icon="el-icon-search" />	
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="卡号">
								<el-input v-model="query.bankAccountNumber" placeholder="请输入卡号" clearable prefix-icon="el-icon-credit-card" />	
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="审核状态">
								<el-select v-model="query.auditStatus" placeholder="审核状态" clearable style="width: 100%">
									<el-option label="待审核" :value="0">
										<el-tag type="warning" size="mini">待审核</el-tag>
									</el-option>
									<el-option label="审核通过" :value="1">
										<el-tag type="success" size="mini">审核通过</el-tag>
									</el-option>
									<el-option label="审核驳回" :value="2">
										<el-tag type="danger" size="mini">审核驳回</el-tag>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="转账状态">
								<el-select v-model="query.transferStatus" placeholder="转账状态" clearable style="width: 100%">
									<el-option label="未转账" :value="0">
										<el-tag type="info" size="mini">未转账</el-tag>
									</el-option>
									<el-option label="已转账" :value="1">
										<el-tag type="success" size="mini">已转账</el-tag>
									</el-option>
									<el-option label="转账失败" :value="2">
										<el-tag type="danger" size="mini">转账失败</el-tag>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4" style="text-align: right;">
							<el-button type="primary" icon="el-icon-search" @click="search()" :loading="listLoading">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			<!-- 统计信息卡片 -->
			<el-row :gutter="20" class="stats-row" v-if="statsData">
				<el-col :span="6">
					<el-card class="stats-card" shadow="hover">
						<div class="stats-content">
							<div class="stats-icon pending">
								<i class="el-icon-time"></i>
							</div>
							<div class="stats-info">
								<div class="stats-number">{{ statsData.pendingCount || 0 }}</div>
								<div class="stats-label">待审核</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="stats-card" shadow="hover">
						<div class="stats-content">
							<div class="stats-icon approved">
								<i class="el-icon-check"></i>
							</div>
							<div class="stats-info">
								<div class="stats-number">{{ statsData.approvedCount || 0 }}</div>
								<div class="stats-label">审核通过</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="stats-card" shadow="hover">
						<div class="stats-content">
							<div class="stats-icon transferred">
								<i class="el-icon-success"></i>
							</div>
							<div class="stats-info">
								<div class="stats-number">{{ statsData.transferredCount || 0 }}</div>
								<div class="stats-label">已转账</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="stats-card" shadow="hover">
						<div class="stats-content">
							<div class="stats-icon total">
								<i class="el-icon-money"></i>
							</div>
							<div class="stats-info">
								<div class="stats-number">¥{{ statsData.totalAmount || 0 }}</div>
								<div class="stats-label">总金额</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div class="NCC-common-head-left">
						<h3 class="page-title">提现申请管理</h3>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
                <NCC-table v-loading="listLoading" :data="list" :table-layout="'auto'" stripe>
					<el-table-column prop="walletNo" label="提现申请号" align="left" min-width="160" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-link type="primary" @click="viewDetail(scope.row.id)">{{ scope.row.walletNo }}</el-link>
						</template>
					</el-table-column>
					<el-table-column prop="amount" label="提现金额" align="right" width="130" sortable="custom">
						<template slot-scope="scope">
							<span class="amount-text">¥{{ scope.row.amount }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="bankAccountName" label="收款户名" align="left" min-width="120" show-overflow-tooltip />
					<el-table-column prop="bankAccountNumber" label="收款卡号" align="left" min-width="180" show-overflow-tooltip>
						<template slot-scope="scope">
							<span class="bank-card">{{ formatBankCard(scope.row.bankAccountNumber) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="bankName" label="收款银行" align="left" min-width="120" show-overflow-tooltip />
					<el-table-column prop="applyTime" label="申请时间" align="center" width="160" sortable="custom">
						<template slot-scope="scope">
							<span v-if="scope.row.applyTime">{{ formatDateTime(scope.row.applyTime) }}</span>
							<span v-else class="text-muted">-</span>
						</template>
					</el-table-column>
					<el-table-column prop="auditStatus" label="审核状态" align="center" width="110">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.auditStatus === 0" type="warning" size="small">
								<i class="el-icon-time"></i> 待审核
							</el-tag>
							<el-tag v-else-if="scope.row.auditStatus === 1" type="success" size="small">
								<i class="el-icon-check"></i> 审核通过
							</el-tag>
							<el-tag v-else-if="scope.row.auditStatus === 2" type="danger" size="small">
								<i class="el-icon-close"></i> 审核驳回
							</el-tag>
							<el-tag v-else type="info" size="small">未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="transferStatus" label="转账状态" align="center" width="110">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.transferStatus === 0" type="info" size="small">
								<i class="el-icon-minus"></i> 未转账
							</el-tag>
							<el-tag v-else-if="scope.row.transferStatus === 1" type="success" size="small">
								<i class="el-icon-success"></i> 已转账
							</el-tag>
							<el-tag v-else-if="scope.row.transferStatus === 2" type="danger" size="small">
								<i class="el-icon-error"></i> 转账失败
							</el-tag>
							<el-tag v-else type="info" size="small">未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="transferTime" label="转账时间" align="center" width="160">
						<template slot-scope="scope">
							<span v-if="scope.row.transferTime">{{ formatDateTime(scope.row.transferTime) }}</span>
							<span v-else class="text-muted">-</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="180">
						<template slot-scope="scope">
							<el-button type="text" @click="viewDetail(scope.row.id)" size="small" icon="el-icon-view">详情</el-button>
							<el-button v-if="scope.row.auditStatus === 0" type="text" @click="auditHandle(scope.row.id)" size="small" icon="el-icon-edit" class="audit-btn">审核</el-button>
							<el-button v-if="scope.row.auditStatus === 1 && scope.row.transferStatus === 0" type="text" @click="processHandle(scope.row.id)" size="small" icon="el-icon-check" class="process-btn">处理</el-button>
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
		<AuditForm v-if="auditFormVisible" ref="AuditForm" @refresh="refresh" />
		<ProcessForm v-if="processFormVisible" ref="ProcessForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>
</template>
<script>
    import request from '@/utils/request'
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
    import AuditForm from './AuditForm'
    import ProcessForm from './ProcessForm'
    import ExportBox from './ExportBox'
    import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
        components: { AuditForm, ProcessForm, ExportBox },
        data() {
            return {
				query: {
                    walletNo:undefined,
                    bankAccountNumber:undefined,
                    auditStatus: undefined,
                    transferStatus: undefined,
				},
                list: [],
                listLoading: true,
                multipleSelection: [], 
                total: 0,
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                auditFormVisible: false,
                processFormVisible: false,
                exportBoxVisible: false,
                statsData: {
                    pendingCount: 0,
                    approvedCount: 0,
                    transferredCount: 0,
                    totalAmount: 0
                },
                columnList: [
                    { prop: 'walletNo', label: '提现申请号' },
                    { prop: 'amount', label: '提现金额' },
                    { prop: 'bankAccountName', label: '收款账户户名' },
                    { prop: 'bankAccountNumber', label: '收款账户卡号' },
                    { prop: 'bankName', label: '收款银行名称' },
				],
			}
        },
		computed: {},
		created() {
			this.initData()
		},
		methods: {
			initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                let query = {}
                for (let key in _query) {
                    if (Array.isArray(_query[key])) {
                        query[key] = _query[key].join()
                    } else {
                        query[key] = _query[key]
                    }
                }
                
                // 并行请求列表数据和统计数据
                Promise.all([
                    request({
                        url: `/api/Extend/UavWalletWithdrawApply`,
                        method: 'GET',
                        data: query
                    }),
                    request({
                        url: `/api/Extend/UavWalletWithdrawApply/Statistics`,
                        method: 'GET'
                    })
                ]).then(([listRes, statsRes]) => {
                    this.list = listRes.data.list
                    this.total = listRes.data.pagination.total
                    this.statsData = statsRes.data
                    this.listLoading = false
                }).catch(() => {
                    this.listLoading = false
                })
            },
            formatDateTime(dateTime) {
                if (!dateTime) return '-'
                const date = new Date(dateTime)
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                })
            },
            formatBankCard(cardNumber) {
                if (!cardNumber) return '-'
                // 银行卡号脱敏显示：前4位 + **** + 后4位
                if (cardNumber.length > 8) {
                    return cardNumber.substring(0, 4) + ' **** **** ' + cardNumber.substring(cardNumber.length - 4)
                }
                return cardNumber
            },
			viewDetail(id) {
                this.auditFormVisible = true
                this.$nextTick(() => {
                    this.$refs.AuditForm.init(id, true)
                })
            },
			auditHandle(id) {
                this.auditFormVisible = true
                this.$nextTick(() => {
                    this.$refs.AuditForm.init(id, false)
                })
            },
			processHandle(id) {
                this.processFormVisible = true
                this.$nextTick(() => {
                    this.$refs.ProcessForm.init(id)
                })
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.auditFormVisible = false
                this.processFormVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
		}
    }
</script>

<style scoped>
/* 搜索卡片样式 */
.search-card {
    margin-bottom: 20px;
    border-radius: 8px;
}

.search-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #303133;
}

.search-header i {
    margin-right: 8px;
    color: #409EFF;
    font-size: 16px;
}

/* 搜索表单样式 */
.search-form {
    margin-bottom: 0;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.search-form .el-form-item__label {
    font-size: 13px;
    color: #606266;
    font-weight: 500;
}

.search-form .el-input__inner {
    font-size: 13px;
}

.search-form .el-select {
    width: 100%;
}

.search-form .el-button {
    margin-left: 8px;
    font-size: 13px;
}

.search-form .el-button:first-child {
    margin-left: 0;
}

/* 统计卡片样式 */
.stats-row {
    margin-bottom: 20px;
}

.stats-card {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stats-content {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.stats-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    color: white;
}

.stats-icon.pending {
    background: linear-gradient(135deg, #ff9500, #ffb84d);
}

.stats-icon.approved {
    background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stats-icon.transferred {
    background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stats-icon.total {
    background: linear-gradient(135deg, #f56c6c, #f78989);
}

.stats-info {
    flex: 1;
}

.stats-number {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    line-height: 1;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 14px;
    color: #909399;
}

/* 页面标题样式 */
.page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

/* 表格样式优化 */
.amount-text {
    color: #f56c6c;
    font-weight: bold;
    font-size: 14px;
}

.bank-card {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #606266;
}

.text-muted {
    color: #c0c4cc;
}

/* 操作按钮样式 */
.audit-btn {
    color: #409EFF !important;
}

.audit-btn:hover {
    color: #66b1ff !important;
}

.process-btn {
    color: #67C23A !important;
}

.process-btn:hover {
    color: #85ce61 !important;
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .stats-card .stats-content {
        flex-direction: column;
        text-align: center;
    }
    
    .stats-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .stats-row .el-col {
        margin-bottom: 10px;
    }
}
</style>