Book_system/app/static/js/book-import.js

// 图书批量导入页面的JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 显示选择的文件名
    const fileInput = document.getElementById('file');
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            const fileName = this.value.split('\\').pop();
            const label = document.querySelector('.custom-file-label');
            if (label) {
                label.textContent = fileName || '点击这里选择文件...';

                // 添加有文件的类
                if (fileName) {
                    this.parentElement.classList.add('has-file');

                    // 显示文件类型检查和预览信息
                    checkFileAndPreview(this.files[0]);
                } else {
                    this.parentElement.classList.remove('has-file');
                }
            }
        });
    }

    // 监听表单提交
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const fileInput = document.getElementById('file');
            if (!fileInput || !fileInput.files || !fileInput.files.length) {
                e.preventDefault();
                showMessage('请先选择要导入的Excel文件', 'warning');
                return;
            }

            const importBtn = document.querySelector('.import-btn');
            if (importBtn) {
                importBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在导入...';
                importBtn.disabled = true;
            }

            // 添加花朵飘落动画效果
            addFallingElements(10);

            // 设置超时处理，如果30秒后还没响应，提示用户
            window.importTimeout = setTimeout(function() {
                showMessage('导入处理时间较长，请耐心等待...', 'info');
            }, 30000);
        });
    }

    // 美化表单提交按钮的点击效果
    const importBtn = document.querySelector('.import-btn');
    if (importBtn) {
        importBtn.addEventListener('click', function(e) {
            // 按钮的点击效果已由表单提交事件处理
            // 避免重复处理
            if (!form || form.reportValidity() === false) {
                e.preventDefault();
            }
        });
    }

    // 为浮动元素添加动画
    initFloatingElements();

    // 检查页面中的flash消息
    checkFlashMessages();
});

// 检查页面中的flash消息
function checkFlashMessages() {
    // Flask的flash消息通常会渲染为带有特定类的元素
    const flashMessages = document.querySelectorAll('.alert');
    if (flashMessages && flashMessages.length > 0) {
        // 如果存在flash消息，说明页面是提交后重新加载的
        // 恢复按钮状态
        const importBtn = document.querySelector('.import-btn');
        if (importBtn) {
            importBtn.innerHTML = '<i class="fas fa-upload"></i> 开始导入';
            importBtn.disabled = false;
        }

        // 清除可能的超时
        if (window.importTimeout) {
            clearTimeout(window.importTimeout);
        }
    }
}

// 检查文件类型并尝试预览
function checkFileAndPreview(file) {
    if (!file) return;

    // 检查文件类型
    const validTypes = ['.xlsx', '.xls', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
    let isValid = false;

    validTypes.forEach(type => {
        if (file.name.toLowerCase().endsWith(type) || file.type === type) {
            isValid = true;
        }
    });

    if (!isValid) {
        showMessage('请选择有效的Excel文件 (.xlsx 或 .xls)', 'warning');
        return;
    }

    // 显示文件准备就绪的消息
    showMessage(`文件 "${file.name}" 已准备就绪，点击"开始导入"按钮继续。`, 'success');
}

// 显示提示消息
function showMessage(message, type = 'info') {
    // 检查是否已有消息容器
    let messageContainer = document.querySelector('.import-message');

    if (!messageContainer) {
        // 创建新的消息容器
        messageContainer = document.createElement('div');
        messageContainer.className = 'import-message animate__animated animate__fadeIn';

        // 插入到按钮之后
        const importBtn = document.querySelector('.import-btn');
        if (importBtn && importBtn.parentNode) {
            importBtn.parentNode.insertBefore(messageContainer, importBtn.nextSibling);
        }
    }

    // 设置消息内容和样式
    messageContainer.innerHTML = `
        <div class="alert alert-${type} mt-3">
            <i class="fas ${getIconForMessageType(type)}"></i> ${message}
        </div>
    `;

    // 如果是临时消息，设置自动消失
    if (type !== 'danger') {
        setTimeout(() => {
            messageContainer.classList.add('animate__fadeOut');
            setTimeout(() => {
                if (messageContainer.parentNode) {
                    messageContainer.parentNode.removeChild(messageContainer);
                }
            }, 600);
        }, 5000);
    }
}

// 根据消息类型获取图标
function getIconForMessageType(type) {
    switch (type) {
        case 'success': return 'fa-check-circle';
        case 'warning': return 'fa-exclamation-triangle';
        case 'danger': return 'fa-times-circle';
        default: return 'fa-info-circle';
    }
}

// 初始化浮动元素
function initFloatingElements() {
    const floatingElements = document.querySelectorAll('.snowflake, .flower');

    floatingElements.forEach(element => {
        const randomDuration = 15 + Math.random() * 20;
        const randomDelay = Math.random() * 10;

        element.style.animationDuration = `${randomDuration}s`;
        element.style.animationDelay = `${randomDelay}s`;
    });
}

// 添加花朵飘落效果
function addFallingElements(count) {
    const container = document.querySelector('.import-container');
    if (!container) return;

    for (let i = 0; i < count; i++) {
        const element = document.createElement('div');
        element.className = 'falling-element animate__animated animate__fadeInDown';

        // 随机选择花朵或雪花
        const isFlower = Math.random() > 0.5;
        element.classList.add(isFlower ? 'falling-flower' : 'falling-snowflake');

        // 随机位置
        const left = Math.random() * 100;
        element.style.left = `${left}%`;

        // 随机延迟
        const delay = Math.random() * 2;
        element.style.animationDelay = `${delay}s`;

        // 随机大小
        const size = 10 + Math.random() * 20;
        element.style.width = `${size}px`;
        element.style.height = `${size}px`;

        container.appendChild(element);

        // 动画结束后移除元素
        setTimeout(() => {
            if (element.parentNode) {
                element.parentNode.removeChild(element);
            }
        }, 5000);
    }
}