<template>
  <div class="page-wrapper">
    <div class="statistics-panel">
      <el-card class="filter-card" shadow="never">
        <el-form :model="query" inline>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="query.start_date"
              type="date"
              placeholder="选择开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="startDateOptions"
            />
          </el-form-item>

          <el-form-item label="结束日期">
            <el-date-picker
              v-model="query.end_date"
              type="date"
              placeholder="选择结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="endDateOptions"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getData" :loading="loading">
              查询
            </el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <div class="stats-container">
        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-coin" style="color: #f0a70a;"></i>
                <span class="currency-name">用户统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">会员新增</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.total_user) }}
                    <span class="currency-unit">个</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-user" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">今日会员新增</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.today_user) }}
                    <span class="currency-unit">个</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总虚拟会员</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.total_virtual_user) }}
                    <span class="currency-unit">个</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-user" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">今日虚拟会员新增</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.today_virtual_user) }}
                    <span class="currency-unit">个</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-coin" style="color: #f0a70a;"></i>
                <span class="currency-name">USDT 充值统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">成功金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.recharge_usd.total_success) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    成功率: {{ rechargeSuccessRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日成功: {{ formatNumber(formData.recharge_usd.today_success) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-error" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">失败金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.recharge_usd.total_fail) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    失败率: {{ rechargeFailRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日失败: {{ formatNumber(formData.recharge_usd.today_fail) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总充值金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.recharge_usd.total_amount) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    处理进度: {{ recharge_ProcessRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日总充值: {{ formatNumber(formData.recharge_usd.today_amount) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-coin" style="color: #f0a70a;"></i>
                <span class="currency-name">USDT 提现统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">已处理金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.withdraw_usdt.total_success) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    成功率: {{ calculateSuccessRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日已处理: {{ formatNumber(formData.withdraw_usdt.today_success) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-error" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">失败金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.withdraw_usdt.total_fail) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    失败率: {{ calculateFailRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日失败: {{ formatNumber(formData.withdraw_usdt.today_fail) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总提现金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.withdraw_usdt.total_amount) }}
                    <span class="currency-unit">USDT</span>
                  </div>
                  <div class="stat-rate">
                    处理进度: {{ calculateProcessRate('usdt') }}%
                  </div>
                  <div class="stat-rate">
                    今日总提现: {{ formatNumber(formData.withdraw_usdt.today_amount) }} USDT
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>


        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-money" style="color: #409eff;"></i>
                <span class="currency-name">RMB 充值统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">成功金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.recharge_rmb.total_success) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    成功率: {{ rechargeSuccessRate('RMB') }}%
                  </div>
                  <div class="stat-rate">
                    今日成功: {{ formatNumber(formData.recharge_rmb.today_success) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-error" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">失败金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.recharge_rmb.total_fail) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    失败率: {{ rechargeFailRate('RMB') }}%
                  </div>
                  <div class="stat-rate">
                    今日失败: {{ formatNumber(formData.recharge_rmb.today_fail) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总充值金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.recharge_rmb.total_amount) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    处理进度: {{ recharge_ProcessRate('RMB') }}%
                  </div>
                  <div class="stat-rate">
                    今日总充值: {{ formatNumber(formData.recharge_rmb.today_amount) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-loading" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">处理中金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.recharge_rmb.total_processing) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    今日处理中: {{ formatNumber(formData.recharge_rmb.today_processing) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-magic-stick" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">待处理金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.recharge_rmb.total_pending) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    今日待处理: {{ formatNumber(formData.recharge_rmb.today_pending) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-money" style="color: #409eff;"></i>
                <span class="currency-name">RMB 提现统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-success" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">已处理金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.withdraw_rmb.total_success) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    成功率: {{ calculateSuccessRate('rmb') }}%
                  </div>
                  <div class="stat-rate">
                    今日已处理: {{ formatNumber(formData.withdraw_rmb.today_success) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-error" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">失败金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.withdraw_rmb.total_fail) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    失败率: {{ calculateFailRate('rmb') }}%
                  </div>
                  <div class="stat-rate">
                    今日失败: {{ formatNumber(formData.withdraw_rmb.today_fail) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总提现金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.withdraw_rmb.total_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    处理进度: {{ calculateProcessRate('rmb') }}%
                  </div>
                  <div class="stat-rate">
                    今日总提现: {{ formatNumber(formData.withdraw_rmb.today_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-loading" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">处理中金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.withdraw_rmb.total_processing) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    今日处理中: {{ formatNumber(formData.withdraw_rmb.today_processing) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-magic-stick" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">待处理金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.withdraw_rmb.total_pending) }}
                    <span class="currency-unit">RMB</span>
                  </div>
                  <div class="stat-rate">
                    今日待处理: {{ formatNumber(formData.withdraw_rmb.today_pending) }} RMB
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-s-data" style="color: #e6a23c;"></i>
                <span class="currency-name">投注统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总投注金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.bet.amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日投注: {{ formatNumber(formData.bet.today_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-refresh-left" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总退款金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.bet.refund_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日退款: {{ formatNumber(formData.bet.today_refund_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-trophy" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总中奖金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.bet.win_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日总中奖: {{ formatNumber(formData.bet.today_win_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-s-data" style="color: #e6a23c;"></i>
                <span class="currency-name">虚拟投注统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-money" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总虚拟投注金额</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.virtual_bet.amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日虚拟投注: {{ formatNumber(formData.virtual_bet.today_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-refresh-left" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总虚拟退款金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.virtual_bet.refund_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日虚拟退款: {{ formatNumber(formData.virtual_bet.today_refund_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-trophy" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总虚拟中奖金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.virtual_bet.win_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日虚拟中奖: {{ formatNumber(formData.virtual_bet.today_win_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-gift" style="color: #f56c6c;"></i>
                <span class="currency-name">活动统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="6" :md="6" :lg="6">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-present" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">老用户回归</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.activity.user_return) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日返水: {{ formatNumber(formData.activity.today_user_return) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="6" :md="6" :lg="6">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-lock" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">返彩总额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.activity.recharge_frozen) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日冻结: {{ formatNumber(formData.activity.today_recharge_frozen) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="6" :md="6" :lg="6">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #e6a23c;">
                  <i class="el-icon-coin" style="color: #fff;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">即充即送</div>
                  <div class="stat-value" style="color: #e6a23c;">
                    {{ formatNumber(formData.activity.recharge_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日红利: {{ formatNumber(formData.activity.today_recharge_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="6" :md="6" :lg="6">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f4f4f5;">
                  <i class="el-icon-unlock" style="color: #909399;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">流水解冻</div>
                  <div class="stat-value" style="color: #909399;">
                    {{ formatNumber(formData.activity.unfreeze_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日解冻: {{ formatNumber(formData.activity.today_unfreeze_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="stats-row">
          <el-col :span="24">
            <el-card class="currency-header" shadow="hover">
              <div class="currency-title">
                <i class="el-icon-wallet" style="color: #409eff;"></i>
                <span class="currency-name">余额宝统计</span>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #f0f9eb;">
                  <i class="el-icon-download" style="color: #67c23a;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总转入金额</div>
                  <div class="stat-value" style="color: #67c23a;">
                    {{ formatNumber(formData.yuebao.in_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日转入: {{ formatNumber(formData.yuebao.today_in_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #fef0f0;">
                  <i class="el-icon-upload2" style="color: #f56c6c;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总转出金额</div>
                  <div class="stat-value" style="color: #f56c6c;">
                    {{ formatNumber(formData.yuebao.out_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日转出: {{ formatNumber(formData.yuebao.today_out_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #e6a23c;">
                  <i class="el-icon-bank-card" style="color: #fff;"></i>
                </div>
                <div class="stat-info">
                  <div class="stat-label">总利息收益</div>
                  <div class="stat-value" style="color: #e6a23c;">
                    {{ formatNumber(formData.yuebao.interest_amount) }}
                    <span class="currency-unit">元</span>
                  </div>
                  <div class="stat-rate">
                    今日利息: {{ formatNumber(formData.yuebao.today_interest_amount) }} 元
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import { home } from '@/api/data'

export default {
  name: 'StatisticsPanel',
  data() {
    return {
      loading: false,
      formData: {
        total_user: 0,
        today_user: 0,
        total_virtual_user: 0, // 总虚拟会员
        today_virtual_user: 0, // 今日虚拟会员新增
        bet: {
          amount: 0,
          today_amount: 0,
          refund_amount: 0,
          today_refund_amount: 0,
          win_amount: 0,
          today_win_amount: 0
        },
        virtual_bet: {
          amount: 0,
          today_amount: 0,
          refund_amount: 0,
          today_refund_amount: 0,
          win_amount: 0,
          today_win_amount: 0
        },
        activity: {
          user_return: 0,
          today_user_return: 0,
          recharge_frozen: 0,
          today_recharge_frozen: 0,
          recharge_amount: 0,
          today_recharge_amount: 0,
          unfreeze_amount: 0,
          today_unfreeze_amount: 0
        },
        yuebao: {
          in_amount: 0,
          today_in_amount: 0,
          out_amount: 0,
          today_out_amount: 0,
          interest_amount: 0,
          today_interest_amount: 0
        },
        withdraw_usdt: {
          total_fail: 0,
          total_success: 0,
          total_amount: 0,
          today_amount: 0,
          today_success: 0,
          today_fail: 0
        },
        withdraw_rmb: {
          total_fail: 0,
          total_success: 0,
          total_amount: 0,
          total_processing: 0,
          total_pending: 0,
          today_amount: 0,
          today_success: 0,
          today_fail: 0,
          today_processing: 0,
          today_pending: 0
        },
        recharge_rmb: {
          total_fail: 0,
          total_success: 0,
          total_amount: 0,
          total_processing: 0,
          total_pending: 0,
          today_amount: 0,
          today_success: 0,
          today_fail: 0,
          today_processing: 0,
          today_pending: 0
        },
        recharge_usd: {
          total_fail: 0,
          total_success: 0,
          total_amount: 0,
          today_amount: 0,
          today_success: 0,
          today_fail: 0
        }
      },
      query: {
        start_date: '',
        end_date: ''
      }
    }
  },
  computed: {
    // 日期选择器选项
    startDateOptions() {
      return {
        disabledDate: (time) => {
          if (this.query.end_date) {
            return time.getTime() > new Date(this.query.end_date).getTime()
          }
          return false
        }
      }
    },
    endDateOptions() {
      return {
        disabledDate: (time) => {
          if (this.query.start_date) {
            return time.getTime() < new Date(this.query.start_date).getTime()
          }
          return false
        }
      }
    },

    // 汇总计算
    totalSuccess() {
      return this.formData.withdraw_usdt.total_success +
        this.formData.withdraw_rmb.total_success
    },

    totalFail() {
      return this.formData.withdraw_usdt.total_fail +
        this.formData.withdraw_rmb.total_fail
    },

    totalAmount() {
      return this.formData.withdraw_usdt.total_amount +
        this.formData.withdraw_rmb.total_amount
    },

    // 综合成功率
    overallSuccessRate() {
      if (this.totalAmount === 0) return 0
      return Math.round((this.totalSuccess / this.totalAmount) * 100)
    },

    // 成功率颜色
    successRateColor() {
      if (this.overallSuccessRate >= 90) return '#67c23a'
      if (this.overallSuccessRate >= 70) return '#e6a23c'
      return '#f56c6c'
    },

    // 金额分布百分比
    usdtPercentage() {
      if (this.totalAmount === 0) return 0
      return Math.round((this.formData.withdraw_usdt.total_amount / this.totalAmount) * 100)
    },

    rmbPercentage() {
      if (this.totalAmount === 0) return 0
      return Math.round((this.formData.withdraw_rmb.total_amount / this.totalAmount) * 100)
    }
  },
  mounted() {
    this.initDateRange()
    this.getData()
  },
  methods: {
    // 初始化日期范围（默认最近7天）
    initDateRange() {
      const endDate = new Date()
      const startDate = new Date()
      startDate.setDate(startDate.getDate() - 7)

      this.query.start_date = this.formatDate(startDate)
      this.query.end_date = this.formatDate(endDate)
    },

    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 获取数据
    getData() {
      this.loading = true

      home(this.query)
        .then((res) => {
          if (res.code === 0) {
            this.formData = res.data
          } else {
            this.$message.error(res.msg || '数据加载失败')
          }
        })
        .catch((error) => {
          console.error('获取数据失败:', error)
          this.$message.error('获取数据失败，请重试')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 重置查询
    resetQuery() {
      this.query = {
        start_date: '',
        end_date: ''
      }
      this.initDateRange()
      this.getData()
    },

    // 导出数据
    exportData() {
      const data = {
        query: this.query,
        statistics: this.formData,
        summary: {
          totalSuccess: this.totalSuccess,
          totalFail: this.totalFail,
          totalAmount: this.totalAmount,
          overallSuccessRate: this.overallSuccessRate
        },
        exportTime: new Date().toLocaleString()
      }

      const blob = new Blob([JSON.stringify(data, null, 2)], {
        type: 'application/json'
      })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `提现统计_${this.query.start_date || ''}_${this.query.end_date || ''}.json`
      a.click()
      URL.revokeObjectURL(url)

      // this.$message.success('数据导出成功')
    },

    // 格式化数字（千位分隔）
    formatNumber(num) {
      if (num === undefined || num === null) return '0'
      return Number(num).toLocaleString('zh-CN')
    },

    // 计算成功率
    calculateSuccessRate(currency) {
      const data = currency === 'usdt' ? this.formData.withdraw_usdt : this.formData.withdraw_rmb

      if (data.total_amount === 0) return 0

      const rate = (data.total_success / data.total_amount) * 100
      return Math.round(rate * 100) / 100  // 保留两位小数
    },

    rechargeSuccessRate(currency) {
      const data = currency === 'usdt' ? this.formData.recharge_usd : this.formData.recharge_rmb

      if (data.total_amount === 0) return 0

      const rate = (data.total_success / data.total_amount) * 100
      return Math.round(rate * 100) / 100  // 保留两位小数
    },

    // 计算失败率
    calculateFailRate(currency) {
      const data = currency === 'usdt' ? this.formData.withdraw_usdt : this.formData.withdraw_rmb
      if (data.total_amount === 0) return 0
      const rate = (data.total_fail / data.total_amount) * 100
      return Math.round(rate * 100) / 100  // 保留两位小数
    },
    rechargeFailRate(currency) {
      const data = currency === 'usdt' ? this.formData.recharge_usd : this.formData.recharge_rmb
      if (data.total_amount === 0) return 0
      const rate = (data.total_fail / data.total_amount) * 100
      return Math.round(rate * 100) / 100  // 保留两位小数
    },

    // 计算处理进度
    calculateProcessRate(currency) {
      const data = currency === 'usdt' ? this.formData.withdraw_usdt : this.formData.withdraw_rmb
      if (data.total_amount === 0) return 0
      const processed = data.total_success + data.total_fail
      const rate = (processed / data.total_amount) * 100
      return Math.min(100, Math.round(rate * 100) / 100)  // 不超过100%
    },
    recharge_ProcessRate(currency) {
      const data = currency === 'usdt' ? this.formData.recharge_usd : this.formData.recharge_rmb

      if (data.total_amount === 0) return 0

      const processed = data.total_success + data.total_fail
      const rate = (processed / data.total_amount) * 100
      return Math.min(100, Math.round(rate * 100) / 100)  // 不超过100%
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* 根据实际导航栏高度调整 */
}

.statistics-panel {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
  box-sizing: border-box;

  /* 确保内容足够长以触发滚动 */
  min-height: 0; /* 重要：允许flex子元素收缩 */

  /* 隐藏横向滚动 */
  overflow-x: hidden;

  /* 平滑滚动 */
  scroll-behavior: smooth;

  /* 自定义滚动条（可选） */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }

    &:active {
      background: rgba(0, 0, 0, 0.4);
    }
  }

  /* Firefox 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);

  .filter-card {
    margin-bottom: 20px;

    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .stats-container {
    .stats-row {
      margin-bottom: 20px;
    }

    .currency-header {
      margin-bottom: 15px;
      border-left: 4px solid #409eff;

      .currency-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;

        i {
          font-size: 20px;
          margin-right: 10px;
        }

        .currency-name {
          color: #303133;
        }
      }
    }

    .stat-card {
      height: 100%;
      transition: all 0.3s;
      border-radius: 8px;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
      }

      .stat-content {
        display: flex;
        align-items: center;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;

          i {
            font-size: 28px;
          }
        }

        .stat-info {
          flex: 1;

          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 5px;
          }

          .stat-value {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;

            .currency-unit {
              font-size: 14px;
              color: #909399;
              margin-left: 4px;
              font-weight: normal;
            }
          }

          .stat-rate {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }

    .summary-card {
      border-top: 3px solid #409eff;

      .summary-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h3 {
          margin: 0;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
            color: #409eff;
          }
        }
      }

      .summary-content {
        .summary-item {
          text-align: center;
          padding: 15px 0;

          .summary-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 10px;
          }

          .summary-value {
            font-size: 28px;
            font-weight: 700;
            color: #303133;
            margin-bottom: 10px;
          }

          .summary-trend {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;

            i {
              margin-right: 4px;
            }

            span {
              color: #909399;
            }
          }
        }
      }
    }

    .chart-card {
      height: 100%;

      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chart-container {
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        .chart-placeholder {
          display: flex;
          justify-content: space-around;
          width: 100%;

          .el-progress {
            text-align: center;

            .percentage-label {
              display: block;
              font-size: 14px;
              color: #909399;
              margin-top: 10px;
            }

            .percentage-value {
              display: block;
              font-size: 18px;
              font-weight: 700;
              color: #303133;
            }
          }
        }

        .amount-distribution {
          width: 100%;

          .distribution-item {
            margin-bottom: 25px;

            &:last-child {
              margin-bottom: 0;
            }

            .distribution-label {
              font-size: 14px;
              color: #909399;
              margin-bottom: 8px;
            }

            .distribution-value {
              font-size: 16px;
              font-weight: 600;
              color: #303133;
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .statistics-panel {
    padding: 10px;

    .stat-card {
      margin-bottom: 15px;

      .stat-content {
        .stat-icon {
          width: 50px;
          height: 50px;

          i {
            font-size: 24px;
          }
        }

        .stat-info {
          .stat-value {
            font-size: 20px;
          }
        }
      }
    }

    .summary-content {
      .summary-item {
        .summary-value {
          font-size: 22px;
        }
      }
    }

    .chart-container {
      .chart-placeholder {
        flex-direction: column;
        align-items: center;

        .el-progress {
          margin-bottom: 20px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
