/**
 * 加载遮蔽罩模块
 * 提供全局的loading和close方法来控制加载状态显示
 */
class LoadingOverlay {
    constructor() {
        this.overlay = null;
        this.loadingText = null;
        this.isInitialized = false;
        this.dotAnimationInterval = null;
        this.init();
    }

    /**
     * 初始化加载遮蔽罩组件
     */
    async init() {
        console.log('初始化加载遮蔽罩');
        
        // 检查是否已经存在loading-overlay元素
        this.overlay = document.getElementById('loading-overlay');
        
        if (!this.overlay) {
            // 如果不存在，动态创建遮蔽罩元素
            this.overlay = document.createElement('div');
            this.overlay.id = 'loading-overlay';
            this.overlay.className = 'loading-overlay';
            
            // 创建彩色方块容器
            const blocksContainer = document.createElement('div');
            blocksContainer.className = 'loading-blocks-container';
            
            // 创建5个彩色方块
            for (let i = 1; i <= 5; i++) {
                const block = document.createElement('div');
                block.className = `loading-block loading-block-${i}`;
                blocksContainer.appendChild(block);
            }
            
            // 创建加载文字
            this.loadingText = document.createElement('div');
            this.loadingText.className = 'loading-text';
            this.loadingText.innerHTML = `<span class="loading-text-content">加载中<span class="loading-dot dot-1">.</span><span class="loading-dot dot-2">.</span><span class="loading-dot dot-3">.</span></span>`;
            
            // 组装遮蔽罩
            this.overlay.appendChild(blocksContainer);
            this.overlay.appendChild(this.loadingText);
            
            // 添加到body，确保在最上层
            document.body.appendChild(this.overlay);
        } else {
            // 如果已存在，获取加载文字元素
            this.loadingText = this.overlay.querySelector('.loading-text');
        }
        
        this.isInitialized = true;
        console.log('加载遮蔽罩初始化完成');
    }

    /**
     * 显示加载遮蔽罩
     * @param {string} text - 可选，自定义加载文字
     */
    show(text = '加载中') {
        console.log('显示加载遮蔽罩', text);
        
        // 如果还未初始化，先进行初始化
        if (!this.isInitialized) {
            this.init();
        }
        
        if (this.overlay && this.loadingText) {
            // 清除之前的动画
            if (this.dotAnimationInterval) {
                clearInterval(this.dotAnimationInterval);
            }
            
            // 创建带动画点的文字
            this.loadingText.innerHTML = `<span class="loading-text-content">${text}<span class="loading-dot dot-1">.</span><span class="loading-dot dot-2">.</span><span class="loading-dot dot-3">.</span></span>`;
            
            // 先移除可能存在的淡出动画类
            this.overlay.classList.remove('fade-out');

            // 如果之前 close() 设置了内联 display 为 'none'，需要清除或覆盖它，
            // 使用内联 display='flex' 来确保弹层可见并参与动画（避免被内联样式覆盖）
            try {
                this.overlay.style.display = 'flex';
            } catch (e) {
                // 某些环境下对 style 写入可能失败，继续尝试通过类控制显示
                console.warn('无法设置 overlay.style.display', e);
            }
            
            // 添加显示类和淡入动画
            this.overlay.classList.add('show', 'fade-in');
        }
    }
            
    /**
     * 隐藏加载遮蔽罩
     */
    close() {
        // 清除点动画
        if (this.dotAnimationInterval) {
            clearInterval(this.dotAnimationInterval);
            this.dotAnimationInterval = null;
        }
        
        if (this.overlay) {
            // 添加淡出动画
            this.overlay.classList.add('fade-out');
            console.log('隐藏加载遮蔽罩');
            
            // 动画结束后隐藏元素
            setTimeout(() => {
                this.overlay.classList.remove('show', 'fade-in', 'fade-out');
                this.overlay.style.display = 'none';
            }, 200); // 与CSS中的动画时长保持一致
        }
    }

    /**
     * 销毁加载遮蔽罩实例
     */
    destroy() {
        if (this.overlay && this.overlay.parentNode) {
            this.overlay.parentNode.removeChild(this.overlay);
            this.overlay = null;
            this.loadingText = null;
        }
    }
}

window.loading = new LoadingOverlay();

// 导出类供其他模块使用
if (typeof module !== 'undefined' && module.exports) {
    module.exports = LoadingOverlay;
}



(function() {
    'use strict';
    

})();