
class ModalManager {
    constructor() {
        this.modalOverlay = document.getElementById('modalOverlay');
        this.modalContent = document.getElementById('modalContent');
        this.initEventListeners();
    }

    initEventListeners() {
        // 打开模态框按钮
        const openBtn = document.getElementById('openModalBtn');
        openBtn.addEventListener('click', () => this.openModal());

        // 关闭模态框按钮
        const closeBtn = document.getElementById('closeModalBtn');
        closeBtn.addEventListener('click', () => this.closeModal());

        // 点击模态框外部关闭
        this.modalOverlay.addEventListener('click', (e) => {
            if (e.target === this.modalOverlay) {
                this.closeModal();
            }
        });

        // ESC键关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.modalOverlay.style.display === 'flex') {
                this.closeModal();
            }
        });

        // 阻止模态框内容点击事件冒泡
        this.modalContent.addEventListener('click', (e) => {
            e.stopPropagation();
        });

        // 导出按钮事件
        const exportBtn = document.getElementById('exportBtn');
        exportBtn.addEventListener('click', () => this.exportTableData());
    }

    openModal() {
        this.modalOverlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        
        // 添加打开动画
        this.modalContent.style.animation = 'modalAppear 0.3s ease-out';
    }

    closeModal() {
        this.modalContent.style.animation = 'modalDisappear 0.2s ease-in';
        
        setTimeout(() => {
            this.modalOverlay.style.display = 'none';
            document.body.style.overflow = 'auto';
        }, 200);
    }

    exportTableData() {
        const table = document.querySelector('.data-table');
        const rows = Array.from(table.querySelectorAll('tr'));
        
        let csvContent = "data:text/csv;charset=utf-8,";
        rows.forEach(row => {
            const cells = Array.from(row.querySelectorAll('th, td'));
            const rowData = cells.map(cell => {
                // 处理状态标签
                const statusSpan = cell.querySelector('.status');
                if (statusSpan) {
                    return statusSpan.textContent;
                }
                return cell.textContent;
            });
            csvContent += rowData.join(',') + '\r\n';
        });

        // 创建下载链接
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement('a');
        link.setAttribute('href', encodedUri);
        link.setAttribute('download', '员工信息表.csv');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        this.showNotification('数据导出成功！', 'success');
    }

    showNotification(message, type = 'info') {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        
        // 添加样式
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'success' ? '#d4edda' : '#f8d7da'};
            color: ${type === 'success' ? '#155724' : '#721c24'};
            padding: 12px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1001;
            border: 1px solid ${type === 'success' ? '#c3e6cb' : '#f5c6cb'};
            transform: translateX(100%);
            transition: transform 0.3s ease;
        `;

        document.body.appendChild(notification);

        // 显示动画
        setTimeout(() => {
            notification.style.transform = 'translateX(0)';
        }, 10);

        // 自动隐藏
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }
}

// 页面加载完成后初始化模态框管理器
document.addEventListener('DOMContentLoaded', () => {
    new ModalManager();
});

// 添加模态框消失动画
const style = document.createElement('style');
style.textContent = `
    @keyframes modalDisappear {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        to {
            opacity: 0;
            transform: scale(0.8) translateY(-20px);
        }
    }
`;
document.head.appendChild(style);
