/**
 * 登录功能实现
 * 原生JavaScript，不依赖框架
 */

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const usernameError = document.getElementById('username-error');
    const passwordError = document.getElementById('password-error');
    const formMessage = document.getElementById('form-message');
    
    // 用于演示的模拟用户数据
    const mockUsers = [
        { username: 'admin', password: 'admin123' },
        { username: 'user', password: 'user123' }
    ];
    
    /**
     * 表单提交处理
     */
    loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 重置错误信息
        resetErrors();
        
        // 获取输入值
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();
        
        // 验证表单
        let isValid = validateForm(username, password);
        
        if (isValid) {
            // 模拟登录请求
            mockLogin(username, password);
        }
    });
    
    /**
     * 表单验证
     */
    function validateForm(username, password) {
        let isValid = true;
        
        // 验证用户名
        if (username === '') {
            displayError(usernameError, '请输入用户名');
            isValid = false;
        } else if (username.length < 3) {
            displayError(usernameError, '用户名长度必须至少为3个字符');
            isValid = false;
        }
        
        // 验证密码
        if (password === '') {
            displayError(passwordError, '请输入密码');
            isValid = false;
        } else if (password.length < 6) {
            displayError(passwordError, '密码长度必须至少为6个字符');
            isValid = false;
        }
        
        return isValid;
    }
    
    /**
     * 显示错误信息
     */
    function displayError(element, message) {
        element.textContent = message;
    }
    
    /**
     * 重置错误信息
     */
    function resetErrors() {
        usernameError.textContent = '';
        passwordError.textContent = '';
        formMessage.textContent = '';
        formMessage.className = 'form-message';
    }
    
    /**
     * 模拟登录
     */
    function mockLogin(username, password) {
        // 显示加载状态
        formMessage.textContent = '登录中...';
        formMessage.className = 'form-message';
        
        // 模拟网络延迟
        setTimeout(function() {
            // 检查用户是否存在
            const user = mockUsers.find(user => 
                user.username === username && user.password === password
            );
            
            if (user) {
                // 登录成功
                formMessage.textContent = '登录成功，即将跳转...';
                formMessage.className = 'form-message success';
                
                // 保存登录状态到本地存储
                localStorage.setItem('isLoggedIn', 'true');
                localStorage.setItem('username', username);
                
                // 重定向到首页
                setTimeout(function() {
                    window.location.href = 'index.html';
                }, 1000);
            } else {
                // 登录失败
                formMessage.textContent = '用户名或密码错误';
                formMessage.className = 'form-message error';
            }
        }, 1000);
    }
});