@extends('admin.layouts.admin')

@section('title', '卡片验证安全管理')

@section('content')
<div class="container-fluid" id="cardValidationSecurityApp">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">卡片验证安全仪表板</h5>
                </div>
                <div class="card-body">
                    <!-- 统计概览（压缩版） -->
                    <div class="row mb-3" v-if="dashboardData">
                        <!-- 左侧：验证统计和锁定状态 -->
                        <div class="col-md-7">
                            <div class="row g-2 mb-2">
                                <div class="col-3">
                                    <div class="card bg-primary text-white h-100">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.overview.total_attempts || 0 }}</div>
                                                    <small>总验证</small>
                                                </div>
                                                <small class="text-white-50">24h: @{{ dashboardData.overview_24h?.total_attempts || 0 }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="card bg-danger text-white h-100">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.overview.failed_attempts || 0 }}</div>
                                                    <small>失败</small>
                                                </div>
                                                <small class="text-white-50">24h: @{{ dashboardData.overview_24h?.failed_attempts || 0 }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="card bg-success text-white h-100">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ (dashboardData.overview.total_attempts - dashboardData.overview.failed_attempts) || 0 }}</div>
                                                    <small>成功</small>
                                                </div>
                                                <small class="text-white-50">24h: @{{ ((dashboardData.overview_24h?.total_attempts || 0) - (dashboardData.overview_24h?.failed_attempts || 0)) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="card bg-info text-white h-100">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.overview.unique_ips || 0 }}</div>
                                                    <small>活跃IP</small>
                                                </div>
                                                <small class="text-white-50">24h: @{{ dashboardData.overview_24h?.unique_ips || 0 }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-2">
                                <div class="col-4">
                                    <div class="card bg-warning text-white h-100" style="cursor: pointer;" @click="showLockedUsers" title="点击查看详情">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.lockout_stats.locked_users || 0 }}</div>
                                                    <small><i class="fas fa-user-lock me-1"></i>锁定用户</small>
                                                </div>
                                                <i class="fas fa-eye text-white-50"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="card bg-secondary text-white h-100" style="cursor: pointer;" @click="showLockedCards" title="点击查看详情">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.lockout_stats.locked_cards || 0 }}</div>
                                                    <small><i class="fas fa-credit-card me-1"></i>锁定卡片</small>
                                                </div>
                                                <i class="fas fa-eye text-white-50"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="card bg-dark text-white h-100" style="cursor: pointer;" @click="showLockedIps" title="点击查看详情">
                                        <div class="card-body py-2 px-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="fs-5 fw-bold">@{{ dashboardData.lockout_stats.locked_ips || 0 }}</div>
                                                    <small><i class="fas fa-network-wired me-1"></i>锁定IP</small>
                                                </div>
                                                <i class="fas fa-eye text-white-50"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 右侧：银行失败统计 -->
                        <div class="col-md-5">
                            <div class="card h-100">
                                <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                    <span class="fw-bold"><i class="fas fa-university me-1"></i>银行失败统计</span>
                                    <small class="text-muted">按失败次数排序</small>
                                </div>
                                <div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
                                    <table class="table table-sm table-hover mb-0" style="font-size: 13px;">
                                        <thead class="sticky-top bg-light">
                                            <tr>
                                                <th class="ps-3">发卡行</th>
                                                <th class="text-end">24小时</th>
                                                <th class="text-end pe-3">总计</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(issuer, index) in dashboardData.failures_by_issuer" :key="index">
                                                <td class="ps-3">@{{ issuer.issuer_name }}</td>
                                                <td class="text-end">
                                                    <span class="badge bg-warning text-dark">@{{ issuer.failures_24h }}</span>
                                                </td>
                                                <td class="text-end pe-3">
                                                    <span class="badge bg-danger">@{{ issuer.total_failures }}</span>
                                                </td>
                                            </tr>
                                            <tr v-if="!dashboardData.failures_by_issuer || dashboardData.failures_by_issuer.length === 0">
                                                <td colspan="3" class="text-center text-muted py-3">暂无数据</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 功能按钮组 -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="btn-toolbar" role="toolbar">
                                <div class="btn-group btn-group-sm me-2" role="group">
                                    <button type="button" class="btn btn-outline-success" @click="refreshData">
                                        <i class="fas fa-sync-alt"></i> 刷新
                                    </button>
                                </div>
                                <div class="btn-group btn-group-sm me-2" role="group">
                                    <button type="button" class="btn btn-outline-warning" @click="showUnlockModal">
                                        <i class="fas fa-unlock"></i> 手动解锁
                                    </button>
                                </div>
                                <div class="btn-group btn-group-sm me-2" role="group">
                                    <button type="button" class="btn btn-outline-info" @click="showWhitelistModal">
                                        <i class="fas fa-list"></i> 白名单管理
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 导航 -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#attempts-tab" role="tab">验证记录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#analytics-tab" role="tab">分析统计</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#whitelist-tab" role="tab">白名单</a>
                        </li>
                    </ul>

                    <!-- Tab 内容 -->
                    <div class="tab-content mt-3">
                        <!-- 验证记录 Tab -->
                        <div class="tab-pane fade show active" id="attempts-tab" role="tabpanel">
                            <!-- 第一行：筛选条件 -->
                            <div class="row mb-2">
                                <div class="col-md-3">
                                    <label class="form-label small text-muted mb-1">发卡行</label>
                                    <div class="dropdown issuer-dropdown" ref="issuerDropdown">
                                        <button class="btn btn-outline-secondary dropdown-toggle w-100 text-start" type="button"
                                                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"
                                                @click="issuerSearch = ''">
                                            <span v-if="filters.issuerBids.length === 0">选择发卡行...</span>
                                            <span v-else>已选 @{{ filters.issuerBids.length }} 个发卡行</span>
                                        </button>
                                        <div class="dropdown-menu w-100 p-2" style="max-height: 350px; overflow-y: auto;">
                                            <div class="mb-2 position-relative">
                                                <input type="text" class="form-control form-control-sm"
                                                       v-model="issuerSearch"
                                                       placeholder="输入名称或代码，如：招商、CMB"
                                                       @click.stop
                                                       ref="issuerSearchInput">
                                                <button v-if="issuerSearch" type="button" class="btn-close position-absolute"
                                                        style="right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px;"
                                                        @click.stop="issuerSearch = ''"></button>
                                            </div>
                                            <div class="mb-2">
                                                <button class="btn btn-sm btn-outline-primary me-1" @click.stop="selectAllIssuers">
                                                    全选<span v-if="issuerSearch">筛选结果</span>
                                                </button>
                                                <button class="btn btn-sm btn-outline-secondary" @click.stop="clearAllIssuers">清除选择</button>
                                            </div>
                                            <div v-for="issuer in filteredIssuers" :key="issuer.id" class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                       :value="issuer.bid"
                                                       :id="'issuer-' + issuer.id"
                                                       v-model="filters.issuerBids">
                                                <label class="form-check-label" :for="'issuer-' + issuer.id">
                                                    @{{ issuer.name_short || issuer.name }}
                                                    <small class="text-muted">(@{{ issuer.code }})</small>
                                                </label>
                                            </div>
                                            <div v-if="filteredIssuers.length === 0" class="text-muted small text-center py-2">
                                                未找到匹配的发卡行
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small text-muted mb-1">状态</label>
                                    <select class="form-control" v-model="filters.isSuccessful">
                                        <option value="">所有状态</option>
                                        <option value="1">成功</option>
                                        <option value="0">失败</option>
                                    </select>
                                </div>
                                <div class="col-md-7">
                                    <label class="form-label small text-muted mb-1">时间范围</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="datetime-local" class="form-control form-control-sm" v-model="filters.startTime" style="width: 180px;">
                                        <span class="text-muted">至</span>
                                        <input type="datetime-local" class="form-control form-control-sm" v-model="filters.endTime" style="width: 180px;">
                                        <div class="btn-group btn-group-sm ms-2" role="group">
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('today')">今天</button>
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('yesterday')">昨天</button>
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('last7days')">7天</button>
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('last30days')">30天</button>
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('thisMonth')">本月</button>
                                            <button type="button" class="btn btn-outline-secondary" @click="setTimeRange('clear')" title="清除时间筛选">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二行：搜索字段 -->
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="d-flex gap-2 align-items-center">
                                        <input type="text" class="form-control form-control-sm" v-model="filters.userUid" placeholder="UID" style="width: 100px;">
                                        <input type="text" class="form-control form-control-sm" v-model="filters.vuid" placeholder="VUID" style="width: 120px;">
                                        <input type="text" class="form-control form-control-sm" v-model="filters.mobile" placeholder="手机号(11位)" style="width: 130px;">
                                        <input type="text" class="form-control form-control-sm" v-model="filters.bin" placeholder="卡BIN" style="width: 90px;">
                                        <input type="text" class="form-control form-control-sm" v-model="filters.last4" placeholder="后4位" maxlength="4" style="width: 80px;">
                                        <button class="btn btn-primary btn-sm" @click="loadAttempts">
                                            <i class="fas fa-search me-1"></i>搜索
                                        </button>
                                        <button class="btn btn-success btn-sm" @click="exportAttempts"
                                                :disabled="filters.issuerBids.length === 0"
                                                :title="filters.issuerBids.length === 0 ? '请先选择发卡行' : '导出当前筛选条件的记录'">
                                            <i class="fas fa-download me-1"></i>导出
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12">
                                    <small class="text-muted">
                                        共 <strong>@{{ attempts.total || 0 }}</strong> 条记录
                                    </small>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>用户UID</th>
                                            <th>IP地址</th>
                                            <th>BIN</th>
                                            <th>后4位</th>
                                            <th>发卡行</th>
                                            <th>虚拟卡ID</th>
                                            <th>状态</th>
                                            <th>失败原因</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="attempt in attempts.data" :key="attempt.id">
                                            <td style="white-space: nowrap;">@{{ formatDateTime(attempt.attempted_at) }}</td>
                                            <td>@{{ attempt.user_uid || attempt.user_id || 'N/A' }}</td>
                                            <td>@{{ attempt.ip_address }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.bin || '-' }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.last_4 || '-' }}</td>
                                            <td>@{{ attempt.issuer_name || '-' }}</td>
                                            <td style="font-family: monospace;">@{{ attempt.vcard_id || '-' }}</td>
                                            <td>
                                                <span class="badge" :class="attempt.is_successful ? 'badge-success' : 'badge-danger'"
                                                      :style="attempt.is_successful ? 'background-color: #28a745; color: white;' : 'background-color: #dc3545; color: white;'">
                                                    @{{ attempt.is_successful ? '成功' : '失败' }}
                                                </span>
                                            </td>
                                            <td>@{{ attempt.failure_reason || '-' }}</td>
                                            <td>
                                                <!-- 优先显示用户级锁定解锁按钮 -->
                                                <button class="btn btn-sm btn-outline-warning"
                                                        @click="unlockUser(attempt.user_id)"
                                                        v-if="!attempt.is_successful && attempt.user_id && isUserLocked(attempt.user_id)"
                                                        :disabled="!attempt.user_id">
                                                    解锁用户
                                                </button>
                                                <!-- 如果用户未锁定但卡片锁定，显示卡片解锁按钮 -->
                                                <button class="btn btn-sm btn-outline-danger"
                                                        @click="unlockCard(attempt.card_number_hash)"
                                                        v-else-if="!attempt.is_successful && !isUserLocked(attempt.user_id) && isCardLocked(attempt.card_number_hash)">
                                                    解锁卡片
                                                </button>
                                                <!-- 都未锁定时显示未锁定状态 -->
                                                <span v-else-if="!attempt.is_successful && !isUserLocked(attempt.user_id) && !isCardLocked(attempt.card_number_hash)"
                                                      class="text-muted small">未锁定</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <nav v-if="attempts.last_page > 1">
                                <ul class="pagination">
                                    <li class="page-item" :class="{ disabled: attempts.current_page === 1 }">
                                        <a class="page-link" @click="loadAttempts(attempts.current_page - 1)">Previous</a>
                                    </li>
                                    <li class="page-item" v-for="page in visiblePages" :key="page"
                                        :class="{ active: page === attempts.current_page }">
                                        <a class="page-link" @click="loadAttempts(page)">@{{ page }}</a>
                                    </li>
                                    <li class="page-item" :class="{ disabled: attempts.current_page === attempts.last_page }">
                                        <a class="page-link" @click="loadAttempts(attempts.current_page + 1)">Next</a>
                                    </li>
                                </ul>
                                <div class="text-center text-muted small">
                                    第 @{{ attempts.current_page }} / @{{ attempts.last_page }} 页，共 @{{ attempts.total }} 条记录
                                </div>
                            </nav>
                        </div>

                        <!-- 分析统计 Tab -->
                        <div class="tab-pane fade" id="analytics-tab" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">风险等级分布</div>
                                        <div class="card-body">
                                            <div class="progress mb-2">
                                                <div class="progress-bar bg-success" :style="{ width: dashboardData?.risk_distribution?.low + '%' }">
                                                    低风险 @{{ dashboardData?.risk_distribution?.low.toFixed(1) }}%
                                                </div>
                                            </div>
                                            <div class="progress mb-2">
                                                <div class="progress-bar bg-warning" :style="{ width: dashboardData?.risk_distribution?.medium + '%' }">
                                                    中风险 @{{ dashboardData?.risk_distribution?.medium.toFixed(1) }}%
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-danger" :style="{ width: dashboardData?.risk_distribution?.high + '%' }">
                                                    高风险 @{{ dashboardData?.risk_distribution?.high.toFixed(1) }}%
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">最近高风险尝试</div>
                                        <div class="card-body">
                                            <div class="list-group">
                                                <div class="list-group-item" v-for="attempt in dashboardData?.recent_high_risk?.slice(0, 5)" :key="attempt.id">
                                                    <small class="text-muted">@{{ formatDateTime(attempt.attempted_at) }}</small><br>
                                                    <strong>@{{ attempt.user_uid || attempt.user_id || 'N/A' }}</strong> from @{{ attempt.ip_address }}<br>
                                                    <span class="text-danger">@{{ attempt.failure_reason }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 白名单 Tab -->
                        <div class="tab-pane fade" id="whitelist-tab" role="tabpanel">
                            <button class="btn btn-success mb-3" @click="showAddWhitelistModal">
                                <i class="fas fa-plus"></i> 添加白名单
                            </button>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>类型</th>
                                            <th>值</th>
                                            <th>原因</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in whitelist.data" :key="item.id">
                                            <td>@{{ item.type }}</td>
                                            <td>@{{ item.value }}</td>
                                            <td>@{{ item.reason || '-' }}</td>
                                            <td>@{{ formatDateTime(item.created_at) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-danger" @click="removeFromWhitelist(item.id)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 解锁模态框 -->
    <div class="modal fade" id="unlockModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">手动解锁</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="performUnlock">
                        <div class="form-group">
                            <label>解锁类型</label>
                            <select class="form-control" v-model="unlockForm.type" required>
                                <option value="">选择类型</option>
                                <option value="user">用户</option>
                                <option value="card">卡号</option>
                                <option value="ip">IP地址</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>标识符</label>
                            <input type="text" class="form-control" v-model="unlockForm.identifier"
                                   :placeholder="getIdentifierPlaceholder()" required>
                        </div>
                        <div class="form-group">
                            <label>解锁原因</label>
                            <textarea class="form-control" v-model="unlockForm.reason" rows="3"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-warning" :disabled="unlocking">
                                <span v-if="unlocking"><i class="fas fa-spinner fa-spin"></i> 解锁中...</span>
                                <span v-else>确认解锁</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 白名单模态框 -->
    <div class="modal fade" id="whitelistModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加白名单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="addToWhitelist">
                        <div class="form-group">
                            <label>类型</label>
                            <select class="form-control" v-model="whitelistForm.type" required>
                                <option value="">选择类型</option>
                                <option value="user_id">用户UID</option>
                                <option value="ip_address">IP地址</option>
                                <option value="email">邮箱</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>值</label>
                            <input type="text" class="form-control" v-model="whitelistForm.value" required>
                        </div>
                        <div class="form-group">
                            <label>原因</label>
                            <textarea class="form-control" v-model="whitelistForm.reason" rows="3"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-success" :disabled="addingToWhitelist">
                                <span v-if="addingToWhitelist"><i class="fas fa-spinner fa-spin"></i> 添加中...</span>
                                <span v-else>确认添加</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定用户模态框 -->
    <div class="modal fade" id="lockedUsersModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-user-lock"></i> 锁定用户详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.users && lockedDetails.users.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>用户ID</th>
                                            <th>用户UID</th>
                                            <th>用户名</th>
                                            <th>失败次数</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="user in lockedDetails.users" :key="user.user_id">
                                            <td>@{{ user.user_id }}</td>
                                            <td>@{{ user.user_uid }}</td>
                                            <td>@{{ user.user_name }}</td>
                                            <td><span class="badge bg-danger">@{{ user.failure_count }}</span></td>
                                            <td>@{{ formatDateTime(user.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(user.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(user.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('user', user.user_id)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的用户</p>
                            <small class="text-muted">用户在60分钟内失败5次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedDetails">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定卡片模态框 -->
    <div class="modal fade" id="lockedCardsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-credit-card"></i> 锁定卡片详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.cards && lockedDetails.cards.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>卡片哈希</th>
                                            <th>失败次数</th>
                                            <th>涉及用户</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="card in lockedDetails.cards" :key="card.card_number_hash">
                                            <td><code>@{{ card.card_hash }}</code></td>
                                            <td><span class="badge bg-info">@{{ card.failure_count }}</span></td>
                                            <td>
                                                <span v-if="card.involved_user_uids && card.involved_user_uids.length > 0">
                                                    <span v-for="(uid, index) in card.involved_user_uids" :key="uid">
                                                        <code>@{{ uid }}</code><span v-if="index < card.involved_user_uids.length - 1">, </span>
                                                    </span>
                                                </span>
                                                <span v-else class="text-muted">无关联用户</span>
                                            </td>
                                            <td>@{{ formatDateTime(card.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(card.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(card.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('card', card.card_number_hash)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页控件 -->
                            <nav v-if="lockedDetails.pagination && lockedDetails.pagination.last_page > 1" class="mt-3">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item" :class="{ disabled: lockedDetails.pagination.current_page === 1 }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(lockedDetails.pagination.current_page - 1, 20)">
                                            <i class="fas fa-chevron-left"></i> 上一页
                                        </a>
                                    </li>
                                    <li class="page-item"
                                        v-for="page in getVisiblePages(lockedDetails.pagination)"
                                        :key="page"
                                        :class="{ active: page === lockedDetails.pagination.current_page }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(page, 20)">@{{ page }}</a>
                                    </li>
                                    <li class="page-item" :class="{ disabled: lockedDetails.pagination.current_page === lockedDetails.pagination.last_page }">
                                        <a class="page-link" href="#" @click.prevent="loadLockedCards(lockedDetails.pagination.current_page + 1, 20)">
                                            下一页 <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                </ul>
                                <div class="text-center text-muted small">
                                    显示第 @{{ (lockedDetails.pagination.current_page - 1) * lockedDetails.pagination.per_page + 1 }}
                                    到 @{{ Math.min(lockedDetails.pagination.current_page * lockedDetails.pagination.per_page, lockedDetails.pagination.total) }}
                                    条，共 @{{ lockedDetails.pagination.total }} 条记录
                                </div>
                            </nav>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的卡片</p>
                            <small class="text-muted">卡片在60分钟内失败3次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedCards(1, 20)">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 锁定IP模态框 -->
    <div class="modal fade" id="lockedIpsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-network-wired"></i> 锁定IP详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-if="loadingLockedDetails" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else>
                        <div v-if="lockedDetails.ips && lockedDetails.ips.length > 0" class="mb-4">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped">
                                    <thead>
                                        <tr>
                                            <th>IP地址</th>
                                            <th>失败次数</th>
                                            <th>涉及用户</th>
                                            <th>首次尝试</th>
                                            <th>最后尝试</th>
                                            <th>锁定至</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="ip in lockedDetails.ips" :key="ip.ip_address">
                                            <td>@{{ ip.ip_address }}</td>
                                            <td><span class="badge bg-warning">@{{ ip.failure_count }}</span></td>
                                            <td>
                                                <span v-if="ip.involved_user_uids && ip.involved_user_uids.length > 0">
                                                    <span v-for="(uid, index) in ip.involved_user_uids" :key="uid">
                                                        <code>@{{ uid }}</code><span v-if="index < ip.involved_user_uids.length - 1">, </span>
                                                    </span>
                                                </span>
                                                <span v-else class="text-muted">无关联用户</span>
                                            </td>
                                            <td>@{{ formatDateTime(ip.first_attempt) }}</td>
                                            <td>@{{ formatDateTime(ip.last_attempt) }}</td>
                                            <td>@{{ formatDateTime(ip.locked_until) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-warning" @click="quickUnlock('ip', ip.ip_address)">
                                                    <i class="fas fa-unlock"></i> 解锁
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div v-else class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有被锁定的IP</p>
                            <small class="text-muted">IP在60分钟内失败10次或以上才会被锁定</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="refreshLockedDetails">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.issuer-dropdown .dropdown-menu {
    min-width: 100%;
}
.issuer-dropdown .form-check {
    padding-left: 1.5rem;
}
.issuer-dropdown .form-check-label {
    font-size: 0.875rem;
    cursor: pointer;
}
.issuer-dropdown .form-check:hover {
    background-color: #f8f9fa;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
new Vue({
    el: '#cardValidationSecurityApp',
    data: {
        dashboardData: null,
        attempts: { data: [], current_page: 1, last_page: 1 },
        whitelist: { data: [] },
        issuers: [], // 发卡行列表
        issuerSearch: '', // 发卡行搜索关键词
        lockedUsers: new Set(), // 存储被锁定的用户ID
        lockedCards: new Set(), // 存储被锁定的卡片hash
        lockedDetails: { users: [], ips: [], cards: [] }, // 锁定详情数据
        filters: {
            userUid: '',
            vuid: '',
            mobile: '',
            bin: '',
            last4: '',
            issuerBids: [], // 多选发卡行
            startTime: '',
            endTime: '',
            isSuccessful: ''
        },
        unlockForm: {
            type: '',
            identifier: '',
            reason: ''
        },
        whitelistForm: {
            type: '',
            value: '',
            reason: ''
        },
        unlocking: false,
        addingToWhitelist: false,
        loading: false,
        loadingLockedDetails: false
    },
    computed: {
        visiblePages() {
            const current = this.attempts.current_page;
            const total = this.attempts.last_page;
            const pages = [];
            const start = Math.max(1, current - 2);
            const end = Math.min(total, current + 2);

            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        },
        filteredIssuers() {
            if (!this.issuerSearch) {
                return this.issuers;
            }
            const keyword = this.issuerSearch.toLowerCase().trim();
            return this.issuers.filter(issuer => {
                const name = (issuer.name || '').toLowerCase();
                const nameShort = (issuer.name_short || '').toLowerCase();
                const code = (issuer.code || '').toLowerCase();
                const bid = (issuer.bid || '').toLowerCase();
                return name.includes(keyword) || nameShort.includes(keyword) || code.includes(keyword) || bid.includes(keyword);
            });
        }
    },
    methods: {
        async loadDashboard() {
            try {
                const response = await axios.get('/admin/card-validation-security/api/dashboard');
                this.dashboardData = response.data.data;
            } catch (error) {
                console.error('加载仪表板数据失败:', error);
                alert('加载仪表板数据失败');
            }
        },
        async loadIssuers() {
            try {
                const response = await axios.get('/admin/card-validation-security/api/issuers');
                if (response.data.success) {
                    this.issuers = response.data.data;
                }
            } catch (error) {
                console.error('加载发卡行列表失败:', error);
            }
        },
        async loadAttempts(page = 1) {
            try {
                this.loading = true;
                const params = {
                    page,
                    per_page: 20,
                    user_uid: this.filters.userUid,
                    vuid: this.filters.vuid,
                    mobile: this.filters.mobile,
                    bin: this.filters.bin,
                    last_4: this.filters.last4,
                    is_successful: this.filters.isSuccessful
                };
                // 发卡行多选
                if (this.filters.issuerBids.length > 0) {
                    params.issuer_bids = this.filters.issuerBids.join(',');
                }
                // 时间范围
                if (this.filters.startTime) {
                    params.start_time = this.filters.startTime;
                }
                if (this.filters.endTime) {
                    params.end_time = this.filters.endTime;
                }
                const response = await axios.get('/admin/card-validation-security/api/attempts', { params });
                this.attempts = response.data.data;
            } catch (error) {
                console.error('加载验证记录失败:', error);
                alert('加载验证记录失败');
            } finally {
                this.loading = false;
            }
        },
        selectAllIssuers() {
            // 全选当前筛选后的发卡行
            const filteredBids = this.filteredIssuers.map(issuer => issuer.bid);
            // 合并已选的和新选的，去重
            const combined = new Set([...this.filters.issuerBids, ...filteredBids]);
            this.filters.issuerBids = Array.from(combined);
        },
        exportAttempts() {
            if (this.filters.issuerBids.length === 0) {
                alert('请先选择发卡行再导出');
                return;
            }

            // 构建导出URL参数
            const params = new URLSearchParams();
            params.append('issuer_bids', this.filters.issuerBids.join(','));

            if (this.filters.userUid) params.append('user_uid', this.filters.userUid);
            if (this.filters.vuid) params.append('vuid', this.filters.vuid);
            if (this.filters.mobile) params.append('mobile', this.filters.mobile);
            if (this.filters.bin) params.append('bin', this.filters.bin);
            if (this.filters.last4) params.append('last_4', this.filters.last4);
            if (this.filters.startTime) params.append('start_time', this.filters.startTime);
            if (this.filters.endTime) params.append('end_time', this.filters.endTime);
            if (this.filters.isSuccessful !== '') params.append('is_successful', this.filters.isSuccessful);

            // 打开下载链接
            window.location.href = '/admin/card-validation-security/api/attempts/export?' + params.toString();
        },
        clearAllIssuers() {
            this.filters.issuerBids = [];
        },
        setTimeRange(range) {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const formatDateTime = (date, time) => {
                const d = new Date(date);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}T${time}`;
            };

            switch (range) {
                case 'today':
                    this.filters.startTime = formatDateTime(today, '00:00');
                    this.filters.endTime = formatDateTime(today, '23:59');
                    break;
                case 'yesterday':
                    const yesterday = new Date(today);
                    yesterday.setDate(yesterday.getDate() - 1);
                    this.filters.startTime = formatDateTime(yesterday, '00:00');
                    this.filters.endTime = formatDateTime(yesterday, '23:59');
                    break;
                case 'last7days':
                    const last7 = new Date(today);
                    last7.setDate(last7.getDate() - 6);
                    this.filters.startTime = formatDateTime(last7, '00:00');
                    this.filters.endTime = formatDateTime(today, '23:59');
                    break;
                case 'last30days':
                    const last30 = new Date(today);
                    last30.setDate(last30.getDate() - 29);
                    this.filters.startTime = formatDateTime(last30, '00:00');
                    this.filters.endTime = formatDateTime(today, '23:59');
                    break;
                case 'thisMonth':
                    const thisMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
                    this.filters.startTime = formatDateTime(thisMonthStart, '00:00');
                    this.filters.endTime = formatDateTime(today, '23:59');
                    break;
                case 'lastMonth':
                    const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                    const lastMonthEnd = new Date(now.getFullYear(), now.getMonth(), 0);
                    this.filters.startTime = formatDateTime(lastMonthStart, '00:00');
                    this.filters.endTime = formatDateTime(lastMonthEnd, '23:59');
                    break;
                case 'clear':
                    this.filters.startTime = '';
                    this.filters.endTime = '';
                    break;
            }
        },
        async loadWhitelist() {
            try {
                const response = await axios.get('/admin/card-validation-security/api/whitelist');
                this.whitelist = response.data.data;
            } catch (error) {
                console.error('加载白名单失败:', error);
            }
        },
        async performUnlock() {
            try {
                this.unlocking = true;
                await axios.post('/admin/card-validation-security/api/unlock', this.unlockForm);
                alert('解锁成功');
                const unlockModal = bootstrap.Modal.getInstance(document.getElementById('unlockModal'));
                unlockModal.hide();
                this.unlockForm = { type: '', identifier: '', reason: '' };
                this.refreshData();
            } catch (error) {
                console.error('解锁失败:', error);
                alert('解锁失败: ' + (error.response?.data?.message || error.message));
            } finally {
                this.unlocking = false;
            }
        },
        async addToWhitelist() {
            try {
                this.addingToWhitelist = true;
                await axios.post('/admin/card-validation-security/api/whitelist', this.whitelistForm);
                alert('添加白名单成功');
                const whitelistModal = bootstrap.Modal.getInstance(document.getElementById('whitelistModal'));
                whitelistModal.hide();
                this.whitelistForm = { type: '', value: '', reason: '' };
                this.loadWhitelist();
            } catch (error) {
                console.error('添加白名单失败:', error);
                alert('添加白名单失败: ' + (error.response?.data?.message || error.message));
            } finally {
                this.addingToWhitelist = false;
            }
        },
        async removeFromWhitelist(id) {
            if (!confirm('确认删除此白名单项？')) return;

            try {
                await axios.delete(`/admin/card-validation-security/api/whitelist/${id}`);
                alert('删除成功');
                this.loadWhitelist();
            } catch (error) {
                console.error('删除失败:', error);
                alert('删除失败');
            }
        },
        async unlockUser(userId) {
            if (!confirm('确认解锁此用户？')) return;

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: 'user',
                    identifier: userId,
                    reason: '管理员手动解锁'
                });
                alert('用户解锁成功');
                this.refreshData();
            } catch (error) {
                console.error('解锁用户失败:', error);
                alert('解锁用户失败');
            }
        },
        async unlockCard(cardHash) {
            if (!confirm('确认解锁此卡片？')) return;

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: 'card',
                    identifier: cardHash,
                    reason: '管理员手动解锁'
                });
                alert('卡片解锁成功');
                this.refreshData();
            } catch (error) {
                console.error('解锁卡片失败:', error);
                alert('解锁卡片失败');
            }
        },
        showUnlockModal() {
            const unlockModal = new bootstrap.Modal(document.getElementById('unlockModal'));
            unlockModal.show();
        },
        showWhitelistModal() {
            const whitelistModal = new bootstrap.Modal(document.getElementById('whitelistModal'));
            whitelistModal.show();
        },
        showAddWhitelistModal() {
            const whitelistModal = new bootstrap.Modal(document.getElementById('whitelistModal'));
            whitelistModal.show();
        },
        async refreshData() {
            // 先更新锁定状态，然后再加载其他数据
            await this.updateLockedUsers();
            await Promise.all([
                this.loadDashboard(),
                this.loadAttempts(),
                this.loadWhitelist()
            ]);
        },
        formatDateTime(datetime) {
            return new Date(datetime).toLocaleString('zh-CN');
        },
        getIdentifierPlaceholder() {
            const placeholders = {
                user: '用户UID',
                card: '卡号 (完整PAN)',
                ip: 'IP地址'
            };
            return placeholders[this.unlockForm.type] || '请选择类型';
        },
        async updateLockedUsers() {
            // 通过API获取真实的锁定状态
            try {
                this.lockedUsers.clear();
                this.lockedCards.clear();

                // 从后端API获取锁定状态（基于完整数据和服务器时间）
                const response = await axios.get('/admin/card-validation-security/api/locked-status');
                const data = response.data;

                if (data.success) {
                    // 添加被锁定的用户ID
                    if (data.data.locked_users) {
                        data.data.locked_users.forEach(userId => {
                            this.lockedUsers.add(parseInt(userId));
                        });
                    }
                    // 添加被锁定的卡片hash
                    if (data.data.locked_cards) {
                        data.data.locked_cards.forEach(cardHash => {
                            this.lockedCards.add(cardHash);
                        });
                    }
                }
            } catch (error) {
                console.error('获取锁定状态失败:', error);

                // 降级到客户端计算（但仅作为备用，基于当前页面数据）
                this.updateLockedUsersClientSide();
            }
        },

        updateLockedUsersClientSide() {
            // 客户端锁定状态检测（仅基于当前页面数据）
            this.lockedUsers.clear();

            if (this.attempts.data) {
                const userFailureCounts = {};
                const ipFailureCounts = {};
                const now = new Date();
                const timeWindow = 60 * 60 * 1000; // 1小时的毫秒数

                this.attempts.data.forEach(attempt => {
                    if (!attempt.is_successful) {
                        const attemptTime = new Date(attempt.attempted_at);
                        if (now - attemptTime <= timeWindow) {
                            // 统计用户失败次数
                            if (attempt.user_id) {
                                userFailureCounts[attempt.user_id] = (userFailureCounts[attempt.user_id] || 0) + 1;
                            }
                            // 统计IP失败次数
                            if (attempt.ip_address) {
                                ipFailureCounts[attempt.ip_address] = (ipFailureCounts[attempt.ip_address] || 0) + 1;
                            }
                        }
                    }
                });

                // 判断用户锁定（5次失败）
                Object.keys(userFailureCounts).forEach(userId => {
                    if (userFailureCounts[userId] >= 5) {
                        this.lockedUsers.add(parseInt(userId));
                    }
                });
            }
        },
        isUserLocked(userId) {
            return userId && this.lockedUsers.has(parseInt(userId));
        },
        isCardLocked(cardHash) {
            return cardHash && this.lockedCards.has(cardHash);
        },

        // 锁定详情相关方法
        async showLockedUsers() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedUsersModal'));
                modal.show();
                await this.loadLockedDetails();
            } catch (error) {
                console.error('显示锁定用户失败:', error);
                alert('无法加载锁定用户详情');
            }
        },

        async showLockedCards() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedCardsModal'));
                modal.show();
                // 加载卡片类型的分页数据
                await this.loadLockedCards(1, 20); // 默认显示前20条
            } catch (error) {
                console.error('显示锁定卡片失败:', error);
                alert('无法加载锁定卡片详情');
            }
        },

        async showLockedIps() {
            try {
                const modal = new bootstrap.Modal(document.getElementById('lockedIpsModal'));
                modal.show();
                await this.loadLockedDetails();
            } catch (error) {
                console.error('显示锁定IP失败:', error);
                alert('无法加载锁定IP详情');
            }
        },

        // 兼容旧的方法名（如果其他地方还在使用）
        async showLockedDetails() {
            await this.showLockedCards(); // 默认显示锁定卡片
        },

        async loadLockedDetails() {
            try {
                this.loadingLockedDetails = true;
                const response = await axios.get('/admin/card-validation-security/api/locked-details');

                if (response.data.success) {
                    this.lockedDetails = response.data.data;
                } else {
                    console.error('加载锁定详情失败:', response.data.message);
                    alert('加载锁定详情失败');
                }
            } catch (error) {
                console.error('加载锁定详情失败:', error);
                alert('加载锁定详情失败');
            } finally {
                this.loadingLockedDetails = false;
            }
        },

        // 新增：加载卡片分页数据
        async loadLockedCards(page = 1, perPage = 20) {
            try {
                this.loadingLockedDetails = true;
                const response = await axios.get('/admin/card-validation-security/api/locked-details', {
                    params: {
                        type: 'cards',
                        page: page,
                        per_page: perPage
                    }
                });

                if (response.data.success) {
                    this.lockedDetails = response.data.data;
                } else {
                    console.error('加载锁定卡片失败:', response.data.message);
                    alert('加载锁定卡片失败');
                }
            } catch (error) {
                console.error('加载锁定卡片失败:', error);
                alert('加载锁定卡片失败');
            } finally {
                this.loadingLockedDetails = false;
            }
        },

        async refreshLockedDetails() {
            await this.loadLockedDetails();
        },

        // 新增：刷新卡片分页数据
        async refreshLockedCards(page = 1, perPage = 20) {
            await this.loadLockedCards(page, perPage);
        },

        // 新增：获取可见页码数组
        getVisiblePages(pagination) {
            if (!pagination) return [];

            const current = pagination.current_page;
            const last = pagination.last_page;
            const delta = 2; // 当前页前后显示的页码数量

            let pages = [];
            let start = Math.max(1, current - delta);
            let end = Math.min(last, current + delta);

            // 如果起始页大于1，添加第一页
            if (start > 1) {
                pages.push(1);
                if (start > 2) {
                    pages.push('...');
                }
            }

            // 添加中间页码
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }

            // 如果结束页小于最后页，添加最后页
            if (end < last) {
                if (end < last - 1) {
                    pages.push('...');
                }
                pages.push(last);
            }

            return pages.filter(page => page !== '...' || true); // 保留省略号
        },

        async quickUnlock(type, identifier) {
            if (!confirm(`确认要解锁这个${type === 'user' ? '用户' : type === 'ip' ? 'IP地址' : '卡片'}吗？`)) {
                return;
            }

            try {
                await axios.post('/admin/card-validation-security/api/unlock', {
                    type: type,
                    identifier: identifier,
                    reason: `通过锁定详情页面快速解锁 ${type} ${identifier}`
                });

                alert('解锁成功');

                // 刷新锁定详情和仪表板数据
                await this.refreshLockedCards(1, 20);
                await this.loadDashboard();
                this.updateLockedUsers();

            } catch (error) {
                console.error('解锁失败:', error);
                alert('解锁失败: ' + (error.response?.data?.message || error.message));
            }
        }
    },
    mounted() {
        this.loadIssuers(); // 加载发卡行列表
        this.refreshData();

        // 每30秒自动刷新数据
        setInterval(() => {
            this.loadDashboard();
        }, 30000);
    }
});
</script>
@endsection