bankCard/static/js/script.js

// 主JavaScript文件
document.addEventListener('DOMContentLoaded', function() {
    // 刷新页面按钮
    const refreshBtn = document.getElementById('refresh-btn');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.location.reload();
        });
    }
    
    // 加载统计数据
    loadStats();
    
    // 删除按钮事件处理
    setupDeleteButtons();
    
    // 模态框事件处理
    setupModal();
});

// 加载统计数据
function loadStats() {
    const statsContainer = document.getElementById('stats-container');
    if (!statsContainer) return;
    
    fetch('/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let html = `<p><strong>总申请数:</strong> ${data.total}</p>`;
                
                if (data.stats && data.stats.length > 0) {
                    html += '<div class="stats-list">';
                    data.stats.forEach(stat => {
                        html += `<p><span class="status-badge status-${stat.state}">${stat.state}</span>: ${stat.count}</p>`;
                    });
                    html += '</div>';
                }
                
                statsContainer.innerHTML = html;
            } else {
                statsContainer.innerHTML = '<p>无法加载统计数据</p>';
            }
        })
        .catch(error => {
            console.error('加载统计数据失败:', error);
            statsContainer.innerHTML = '<p>加载统计数据失败</p>';
        });
}

// 设置删除按钮事件
function setupDeleteButtons() {
    const deleteButtons = document.querySelectorAll('.delete-btn');
    
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const appId = this.getAttribute('data-id');
            const appName = this.getAttribute('data-name');
            
            // 显示确认对话框
            showDeleteModal(appId, appName);
        });
    });
}

// 设置模态框
function setupModal() {
    const deleteModal = document.getElementById('delete-modal');
    const cancelDeleteBtn = document.getElementById('cancel-delete');
    const confirmDeleteBtn = document.getElementById('confirm-delete');
    
    if (!deleteModal) return;
    
    // 取消删除
    if (cancelDeleteBtn) {
        cancelDeleteBtn.addEventListener('click', function() {
            deleteModal.style.display = 'none';
        });
    }
    
    // 确认删除
    if (confirmDeleteBtn) {
        confirmDeleteBtn.addEventListener('click', function() {
            const appId = this.getAttribute('data-id');
            
            if (appId) {
                deleteApplication(appId);
            }
        });
    }
    
    // 点击模态框外部关闭
    window.addEventListener('click', function(e) {
        if (e.target === deleteModal) {
            deleteModal.style.display = 'none';
        }
    });
}

// 显示删除确认模态框
function showDeleteModal(appId, appName) {
    const deleteModal = document.getElementById('delete-modal');
    const deleteName = document.getElementById('delete-name');
    const confirmDeleteBtn = document.getElementById('confirm-delete');
    
    if (!deleteModal) return;
    
    deleteName.textContent = appName;
    confirmDeleteBtn.setAttribute('data-id', appId);
    deleteModal.style.display = 'flex';
}

// 删除申请记录
function deleteApplication(appId) {
    fetch(`/delete/${appId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(result => {
        const deleteModal = document.getElementById('delete-modal');
        if (deleteModal) {
            deleteModal.style.display = 'none';
        }
        
        if (result.success) {
            // 显示成功消息
            showNotification('申请记录已成功删除', 'success');
            
            // 重新加载页面
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            showNotification('删除失败: ' + result.message, 'error');
        }
    })
    .catch(error => {
        console.error('删除失败:', error);
        showNotification('删除失败: ' + error, 'error');
    });
}

// 显示通知消息
function showNotification(message, type = 'info') {
    // 移除现有的通知
    const existingNotification = document.querySelector('.notification');
    if (existingNotification) {
        existingNotification.remove();
    }
    
    // 创建新通知
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    
    // 添加样式
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 4px;
        color: white;
        font-weight: 500;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease-out;
    `;
    
    if (type === 'success') {
        notification.style.backgroundColor = '#27ae60';
    } else if (type === 'error') {
        notification.style.backgroundColor = '#e74c3c';
    } else {
        notification.style.backgroundColor = '#3498db';
    }
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 3秒后自动移除
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// 添加CSS动画
if (!document.querySelector('#notification-styles')) {
    const style = document.createElement('style');
    style.id = 'notification-styles';
    style.textContent = `
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(style);
}