<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/images/logo/logo2.ico">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/login.css" media="all">
    <title>领淘众创企业云盘</title>
    <script src="/js/login/login.js"></script>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

    <script>
        // 配置Tailwind主题
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#6366f1',
                        dark: {
                            900: '#111827',
                            800: '#1f2937',
                            700: '#374151',
                            600: '#4b5563',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans', 'Helvetica', 'Arial', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .backdrop-blur-sm {
                backdrop-filter: blur(4px);
            }
            .backdrop-blur-md {
                backdrop-filter: blur(8px);
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
        }
    </style>

    <style>
        /* 渐变背景动画 */
        @keyframes gradientBackground {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 浮动元素动画 */
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

        /* 旋转动画 */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 缩放动画 */
        @keyframes scale {
            0% { transform: scale(0.9); }
            50% { transform: scale(1.1); }
            100% { transform: scale(0.9); }
        }

        /* 脉冲动画 */
        @keyframes pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.8; }
        }

        /* 登录表单切换动画 */
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }

        .float-animation {
            animation: float 6s ease-in-out infinite;
        }

        .rotate-animation {
            animation: rotate 20s linear infinite;
        }

        .scale-animation {
            animation: scale 4s ease-in-out infinite;
        }

        .pulse-animation {
            animation: pulse 3s ease-in-out infinite;
        }

        .slide-in {
            animation: slideIn 0.3s ease-out forwards;
        }

        .slide-out {
            animation: slideOut 0.3s ease-out forwards;
        }
    </style>
</head>

<body class="min-h-screen w-full flex flex-col font-sans antialiased">
<form class="layui-form login-bottom" id="loginFrom">
<!-- 主容器 -->
<div id="app" class="min-h-screen w-full flex flex-col bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-dark-900 dark:via-blue-950/40 dark:to-dark-900 text-gray-900 dark:text-white relative overflow-hidden transition-colors duration-300">
    <!-- 浮动背景元素 -->
    <div id="floating-background" class="fixed inset-0 overflow-hidden pointer-events-none z-0 opacity-60"></div>

    <!-- 文件装饰元素 -->
    <div id="file-decorations" class="fixed inset-0 pointer-events-none z-10 overflow-hidden opacity-40"></div>

    <!-- 顶部导航栏 -->
    <header class="w-full py-4 px-6 flex justify-between items-center relative z-20">
        <div class="flex items-center space-x-2">
            <i class="fa fa-cloud text-primary text-2xl"></i>
            <span class="text-xl font-semibold">企业级文件存储云盘</span>
        </div>

        <button id="theme-toggle" type="button" class="p-2 rounded-full bg-white/80 hover:bg-gray-100 dark:bg-dark-800/80 dark:hover:bg-dark-700 transition-colors backdrop-blur-sm shadow-sm">
            <i class="fas fa-moon"></i>
        </button>
    </header>

    <!-- 主体内容 - 居中登录模块 -->
    <main class="flex-1 flex items-center justify-center px-4 py-8 relative z-20">
        <div class="w-full max-w-md mx-auto bg-white/80 dark:bg-dark-800/80 p-8 rounded-2xl shadow-xl backdrop-blur-md border border-gray-100 dark:border-dark-700 relative overflow-hidden transition-colors duration-300">
            <!-- 装饰背景元素 -->
            <div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl -translate-y-1/2 translate-x-1/2"></div>
            <div class="absolute bottom-0 left-0 w-64 h-64 bg-secondary/10 rounded-full filter blur-3xl translate-y-1/2 -translate-x-1/2"></div>

            <div class="text-center mb-8 relative z-10">
                <div class="flex justify-center mb-4">
                    <div class="p-3">
                        <img src="/images/logo/logo.png" style="height: 3rem;">
                    </div>
                </div>

                <h1 class="text-2xl font-bold">欢迎登录</h1>

                <p class="mt-2 text-gray-500 dark:text-gray-400">
                    选择您的方式登录
                </p>
            </div>

            <!-- 登录表单 -->
            <div class="relative z-10">
                <!-- 登录方式选择器 -->
                <div class="rounded-xl overflow-hidden border border-gray-200 dark:border-dark-700 mb-6">
                    <div class="flex bg-gray-50 dark:bg-dark-800/50">
                        <button id="account-login-tab" type="button" class="flex-1 py-3 px-4 font-medium transition-all flex items-center justify-center bg-white text-primary border-b-2 border-primary shadow-sm">
                            <i class="fa fa-key mr-2"></i>
                            账号密码
                        </button>
                        <button id="phone-login-tab" type="button" class="flex-1 py-3 px-4 font-medium transition-all flex items-center justify-center text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-800/80">
                            <i style="font-size: 18px" class="fa fa-mobile mr-2"></i>
                            手机验证码
                        </button>
                    </div>
                </div>

                <!-- 账号密码登录表单 -->
                <div id="account-login-form" class="space-y-5">
                    <!-- 用户名输入框 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium">
                            用户名
                        </label>
                        <div class="relative rounded-lg overflow-hidden border border-gray-300 dark:border-dark-700 transition-colors">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input
                                    type="text"
                                    id="username"
                                    class="w-full pl-10 pr-4 py-3 bg-white dark:bg-dark-800 focus:outline-none focus:border-primary dark:text-white"
                                    placeholder="请输入用户名"
                                    autocomplete="username"
                            />
                        </div>
                        <div id="username-error" class="hidden flex items-center text-red-500 text-sm">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            <span></span>
                        </div>
                    </div>

                    <!-- 密码输入框 -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium">
                            密码
                        </label>
                        <div class="relative rounded-lg overflow-hidden border border-gray-300 dark:border-dark-700 transition-colors">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
                                <i class="fa fa-key"></i>
                            </div>
                            <input
                                    type="password"
                                    id="password"
                                    class="w-full pl-10 pr-4 py-3 bg-white dark:bg-dark-800 focus:outline-none focus:border-primary dark:text-white"
                                    placeholder="请输入密码"
                                    autocomplete="current-password"
                            />
                        </div>
                        <div id="password-error" class="hidden flex items-center text-red-500 text-sm">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            <span></span>
                        </div>
                    </div>

                    <!-- 记住密码和忘记密码 -->
                    <div class="flex items-center justify-between text-sm">
                        <!--<div class="flex items-center">
                            <input
                                    type="checkbox"
                                    id="remember-me"
                                    class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary dark:border-dark-600 dark:bg-dark-700"
                            />
                            <label for="remember-me" class="ml-2 text-gray-600 dark:text-gray-300">
                                记住我
                            </label>
                        </div>-->
                        <button
                                type="button"
                                id="forgot-password"
                                class="text-primary hover:text-blue-600 dark:hover:text-blue-400 transition-colors "
                        >
                            忘记密码？
                        </button>
                    </div>

                    <!-- 登录按钮 -->
                    <button
                            id="account-login-button"
                            type="button"
                            class="buttonClick w-full py-3 px-4 bg-primary text-white font-medium rounded-lg transition-all shadow-md hover:shadow-lg hover:bg-blue-600 transform hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed"
                    >
                        账号登录
                    </button>
                </div>

                <!-- 手机验证码登录表单 -->
                <div id="phone-login-form" class="space-y-5 hidden">
                    <!-- 手机号输入框 -->
                    <div class="space-y-2">
                        <label for="phone" class="block text-sm font-medium">
                            手机号码
                        </label>
                        <div class="relative rounded-lg overflow-hidden border border-gray-300 dark:border-dark-700 transition-colors">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
                                <i style="font-size: 18px"  class="fa fa-mobile"></i>
                            </div>
                            <input
                                    type="tel"
                                    id="phone"
                                    class="w-full pl-10 pr-4 py-3 bg-white dark:bg-dark-800 focus:outline-none focus:border-primary dark:text-white"
                                    placeholder="请输入手机号码"
                                    maxLength="11"
                                    autocomplete="tel"
                            />
                        </div>
                        <div id="phone-error" class="hidden flex items-center text-red-500 text-sm">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            <span></span>
                        </div>
                    </div>

                    <!-- 验证码输入框 -->
                    <div class="space-y-2">
                        <label for="verification-code" class="block text-sm font-medium">
                            验证码
                        </label>
                        <div class="flex space-x-3">
                            <div class="flex-1 relative rounded-lg overflow-hidden border border-gray-300 dark:border-dark-700 transition-colors">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
                                    <i class="fa fa-shield"></i>
                                </div>
                                <input
                                        type="text"
                                        id="verification-code"
                                        class="w-full pl-10 pr-4 py-3 bg-white dark:bg-dark-800 focus:outline-none focus:border-primary dark:text-white"
                                        placeholder="请输入6位验证码"
                                        maxLength="6"
                                />
                            </div>
                            <button
                                    id="get-code-button"
                                    type="button"
                                    class="whitespace-nowrap px-4 py-3 rounded-lg font-medium transition-all bg-gray-200 text-gray-500 cursor-not-allowed"
                            >
                                获取验证码
                            </button>
                        </div>
                        <div id="code-error" class="hidden flex items-center text-red-500 text-sm">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            <span></span>
                        </div>
                    </div>

                    <!-- 登录按钮 -->
                    <button onclick=""
                            id="phone-login-button"
                            type="button"
                            class="w-full py-3 px-4 bg-secondary text-white font-medium rounded-lg transition-all shadow-md hover:shadow-lg hover:bg-indigo-600 transform hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed"
                    >
                        手机登录
                    </button>
                </div>
            </div>

            <!-- 其他登录选项 -->
            <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
                <p>遇到登录问题？请联系IT部</p>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="py-4 px-6 text-center text-gray-500 dark:text-gray-400 text-sm relative z-20">
        <p>© 2026 领淘企业云盘 - 守护企业数据安全</p>
    </footer>
</div>
</form>
<!-- Toast通知组件 -->
<div id="toast-container" class="fixed top-4 right-4 z-50 flex flex-col space-y-2"></div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/jquery-1.10.2.min.js" charset="utf-8"></script>
<script src="/lib/jsencrypt/jsencrypt.min.js" charset="utf-8"></script>
<script src="/lib/jsencrypt/rsa.js" charset="utf-8"></script>
<script>

    layui.use(['form', 'jquery'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer;

        // 回车键登录
        $('#account-login-form').bind('keypress', function (e) {
            if (e.keyCode === 13) {
                login()
            }
        });


    });


    // DOM 元素
    const themeToggle = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;
    const accountLoginTab = document.getElementById('account-login-tab');
    const phoneLoginTab = document.getElementById('phone-login-tab');
    const accountLoginForm = document.getElementById('account-login-form');
    const phoneLoginForm = document.getElementById('phone-login-form');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const phoneInput = document.getElementById('phone');
    const verificationCodeInput = document.getElementById('verification-code');
    const getCodeButton = document.getElementById('get-code-button');
    const accountLoginButton = document.getElementById('account-login-button');
    const phoneLoginButton = document.getElementById('phone-login-button');
    const usernameError = document.getElementById('username-error');
    const passwordError = document.getElementById('password-error');
    const phoneError = document.getElementById('phone-error');
    const codeError = document.getElementById('code-error');
    const floatingBackground = document.getElementById('floating-background');
    const fileDecorations = document.getElementById('file-decorations');
    const toastContainer = document.getElementById('toast-container');

    // 状态管理
    let isDarkMode = false;
    let isCountingDown = false;
    let countdownTimer = null;

    // 初始化
    function init() {
        // 检查本地存储中的主题偏好
        const savedTheme = localStorage.getItem('theme');
        isDarkMode = savedTheme === 'dark' ||
            (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);

        // 应用主题
        applyTheme();

        // 生成浮动背景元素
        generateFloatingElements();

        // 生成文件装饰元素
        generateFileDecorations();

        // 添加事件监听
        addEventListeners();

        // 检查表单输入状态
        checkFormStates();
    }

    // 应用主题
    function applyTheme() {
        if (isDarkMode) {
            htmlElement.classList.add('dark');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        } else {
            htmlElement.classList.remove('dark');
            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        }

        // 保存主题偏好到本地存储
        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
    }

    // 生成浮动背景元素
    function generateFloatingElements() {
        const elements = [
            { icon: 'fa-cloud', size: 40, delay: 0, color: 'blue' },
            { icon: 'fa-file-word', size: 24, delay: 0.5, color: 'purple' },
            { icon: 'fa-folder', size: 32, delay: 1, color: 'yellow' },
            { icon: 'fa-database', size: 36, delay: 1.5, color: 'green' },
            { icon: 'fa-arrow-up-from-bracket', size: 28, delay: 2, color: 'red' },
            { icon: 'fa-arrow-down-to-bracket', size: 28, delay: 2.5, color: 'indigo' },
            { icon: 'fa-cloud-bolt', size: 32, delay: 3, color: 'orange' },
            { icon: 'fa-file-pdf', size: 20, delay: 3.5, color: 'pink' },
            { icon: 'fa-server', size: 30, delay: 4, color: 'blue' },
            { icon: 'fa-folder', size: 22, delay: 4.5, color: 'green' },
            { icon: 'fa-file-excel', size: 18, delay: 5, color: 'purple' },
            { icon: 'fa-database', size: 26, delay: 5.5, color: 'yellow' },
        ];

        elements.forEach(element => {
            const div = document.createElement('div');
            div.className = 'absolute';
            div.style.left = `${Math.random() * 100}%`;
            div.style.top = `${Math.random() * 100}%`;

            const icon = document.createElement('i');
            icon.className = `fa ${element.icon} ${getIconColorClass(element.color)} opacity-60`;
            icon.style.fontSize = `${element.size + 4}px`;

            div.appendChild(icon);
            floatingBackground.appendChild(div);

            // 添加动画
            animateFloatingElement(div, element.delay);
        });
    }

    // 生成文件装饰元素
    function generateFileDecorations() {
        const fileTypes = ['docx', 'pdf', 'xlsx', 'pptx', 'jpg', 'png', 'mp4'];
        const colors = ['blue', 'green', 'red', 'yellow', 'purple', 'pink'];

        for (let i = 0; i < 12; i++) {
            const type = fileTypes[Math.floor(Math.random() * fileTypes.length)];
            const color = colors[Math.floor(Math.random() * colors.length)];
            const size = 12 + Math.random() * 18;
            const delay = Math.random() * 5;

            const div = document.createElement('div');
            div.className = `absolute ${getIconColorClass(color)}`;
            div.style.left = `${Math.random() * 100}%`;
            div.style.top = `${Math.random() * 100}%`;
            div.style.fontSize = `${size}px`;

            const icon = document.createElement('i');
            icon.className = `far ${getFileTypeIconClass(type)}`;

            div.appendChild(icon);
            fileDecorations.appendChild(div);

            // 添加动画
            animateDecorationElement(div, delay, 8 + Math.random() * 12);
        }
    }

    // 获取文件类型图标类名
    function getFileTypeIconClass(type) {
        switch (type) {
            case 'docx': return 'fa-file-word';
            case 'pdf': return 'fa-file-pdf';
            case 'xlsx': return 'fa-file-excel';
            case 'pptx': return 'fa-file-powerpoint';
            case 'jpg':
            case 'png': return 'fa-file-image';
            case 'mp4': return 'fa-file-video';
            default: return 'fa-file';
        }
    }

    // 获取图标颜色类名
    function getIconColorClass(color) {
        const colorMap = {
            blue: 'text-blue-400 dark:text-blue-400',
            purple: 'text-purple-400 dark:text-purple-400',
            yellow: 'text-yellow-400 dark:text-yellow-400',
            green: 'text-green-400 dark:text-green-400',
            red: 'text-red-400 dark:text-red-400',
            indigo: 'text-indigo-400 dark:text-indigo-400',
            orange: 'text-orange-400 dark:text-orange-400',
            pink: 'text-pink-400 dark:text-pink-400',
        };

        return colorMap[color] || 'text-gray-400';
    }

    // 浮动元素动画
    function animateFloatingElement(element, delay) {
        const duration = 30 + Math.random() * 20;

        setTimeout(() => {
            const animate = () => {
                const targetX = Math.random() * 100;
                const targetY = Math.random() * 100;
                const targetOpacity = [0.3, 0.7, 0.3];
                const targetRotate = [0, 360];

                element.style.transition = `all ${duration}s linear`;
                element.style.transform = `translateX(${targetX}vw) translateY(${targetY}vh) rotate(${targetRotate[0]}deg)`;

                let opacityIndex = 0;
                const opacityInterval = setInterval(() => {
                    element.style.opacity = targetOpacity[opacityIndex];
                    opacityIndex = (opacityIndex + 1) % targetOpacity.length;
                }, duration / targetOpacity.length);

                setTimeout(() => {
                    clearInterval(opacityInterval);
                    animate();
                }, duration);
            };

            animate();
        }, delay * 1000);
    }

    // 装饰元素动画
    function animateDecorationElement(element, delay, duration) {
        setTimeout(() => {
            const animate = () => {
                // 设置初始状态
                element.style.opacity = '0.3';
                element.style.transform = 'scale(0.8) translateY(0) rotate(0deg)';

                // 添加动画
                element.style.transition = `all ${duration}s ease-in-out`;

                setTimeout(() => {
                    element.style.opacity = '0.7';
                    element.style.transform = 'scale(1) translateY(-10px) rotate(5deg)';
                }, 100);

                setTimeout(() => {
                    element.style.opacity = '0.3';
                    element.style.transform = 'scale(0.8) translateY(0) rotate(-5deg)';
                }, duration * 1000 / 2);

                setTimeout(() => {
                    element.style.opacity = '0.7';
                    element.style.transform = 'scale(1) translateY(-10px) rotate(0deg)';
                }, duration * 1000 * 3/4);

                setTimeout(() => {
                    animate();
                }, duration * 1000);
            };

            animate();
        }, delay * 1000);
    }

    // 添加事件监听器
    function addEventListeners() {
        // 主题切换
        themeToggle.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            applyTheme();
        });

        // 登录方式切换
        accountLoginTab.addEventListener('click', () => {
            switchToAccountLogin();
        });

        phoneLoginTab.addEventListener('click', () => {
            switchToPhoneLogin();
        });

        // 输入框事件
        usernameInput.addEventListener('input', checkFormStates);
        passwordInput.addEventListener('input', checkFormStates);
        phoneInput.addEventListener('input', checkFormStates);
        verificationCodeInput.addEventListener('input', checkFormStates);

        // 验证表单提交
       /* usernameInput.addEventListener('blur', () => validateUsername());
        passwordInput.addEventListener('blur', () => validatePassword());
        phoneInput.addEventListener('blur', () => validatePhone());
        verificationCodeInput.addEventListener('blur', () => validateCode());*/

        // 获取验证码
        getCodeButton.addEventListener('click', handleGetVerificationCode);

        // 登录按钮
        accountLoginButton.addEventListener('click', handleAccountLogin);
        phoneLoginButton.addEventListener('click', handlePhoneLogin);

        // 回车键提交


      /*  passwordInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') handleAccountLogin();
        });*/

        phoneInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') verificationCodeInput.focus();
        });

        verificationCodeInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') handlePhoneLogin();
        });
    }

    // 切换到账号密码登录
    function switchToAccountLogin() {
        // 更新标签样式
        accountLoginTab.classList.add('bg-white', 'text-primary', 'border-b-2', 'border-primary', 'shadow-sm');
        accountLoginTab.classList.remove('text-gray-600', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-dark-800/80');

        phoneLoginTab.classList.remove('bg-white', 'text-secondary', 'border-b-2', 'border-secondary', 'shadow-sm');
        phoneLoginTab.classList.add('text-gray-600', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-dark-800/80');

        // 隐藏手机登录表单，显示账号登录表单
        phoneLoginForm.classList.add('hidden');
        accountLoginForm.classList.remove('hidden');

        // 清空错误信息
        hideError(usernameError);
        hideError(passwordError);
        hideError(phoneError);
        hideError(codeError);

        // 重置验证码倒计时
        resetCountdown();
    }

    // 切换到手机验证码登录
    function switchToPhoneLogin() {
        // 更新标签样式
        phoneLoginTab.classList.add('bg-white', 'text-secondary', 'border-b-2', 'border-secondary', 'shadow-sm');
        phoneLoginTab.classList.remove('text-gray-600', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-dark-800/80');

        accountLoginTab.classList.remove('bg-white', 'text-primary', 'border-b-2', 'border-primary', 'shadow-sm');
        accountLoginTab.classList.add('text-gray-600', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-dark-800/80');

        // 隐藏账号登录表单，显示手机登录表单
        accountLoginForm.classList.add('hidden');
        phoneLoginForm.classList.remove('hidden');

        // 清空错误信息
        hideError(usernameError);
        hideError(passwordError);
        hideError(phoneError);
        hideError(codeError);
    }

    // 检查表单输入状态
    function checkFormStates() {
        // 检查账号密码登录按钮状态
        const isAccountFormValid = usernameInput.value.trim() !== '' && passwordInput.value.trim() !== '';
        accountLoginButton.disabled = !isAccountFormValid;

        // 检查手机验证码登录按钮状态
        const isPhoneFormValid = phoneInput.value.trim() !== '' && verificationCodeInput.value.trim() !== '';
        phoneLoginButton.disabled = !isPhoneFormValid;

        // 检查获取验证码按钮状态
        const isPhoneValid = phoneInput.value.trim() !== '' && validatePhone(false);
        getCodeButton.disabled = !isPhoneValid || isCountingDown;

        if (isPhoneValid && !isCountingDown) {
            getCodeButton.classList.remove('bg-gray-200', 'text-gray-500', 'cursor-not-allowed');
            getCodeButton.classList.add('bg-secondary', 'text-white', 'hover:bg-indigo-600', 'shadow-md', 'hover:shadow-lg', 'transform', 'hover:-translate-y-0.5');
        } else {
            getCodeButton.classList.add('bg-gray-200', 'text-gray-500', 'cursor-not-allowed');
            getCodeButton.classList.remove('bg-secondary', 'text-white', 'hover:bg-indigo-600', 'shadow-md', 'hover:shadow-lg', 'transform', 'hover:-translate-y-0.5');
        }
    }

    // 验证用户名
    /*function validateUsername(showError = true) {
        const value = usernameInput.value.trim();

      /!*  if (!value) {
            if (showError) showError(usernameError, '请输入用户名');
            return false;
        }*!/

        hideError(usernameError);
        return true;
    }*/

    // 验证密码
   /* function validatePassword(showError = true) {
        const value = passwordInput.value.trim();

        if (!value) {
            if (showError) showError(passwordError, '请输入密码');
            return false;
        }

        if (value.length < 6) {
            if (showError) showError(passwordError, '密码长度不能少于6位');
            return false;
        }

        hideError(passwordError);
        return true;
    }*/

    // 验证手机号
    function validatePhone(showError = true) {
        const phone = phoneInput.value.trim();
        const phoneRegex = /^1[3-9]\d{9}$/;
        const isValid = phoneRegex.test(phone);

        if (!phone) {
            if (showError) showError(phoneError, '请输入手机号码');
            return false;
        }

        if (!isValid) {
            if (showError) showError(phoneError, '请输入正确的手机号码');
            return false;
        }

        hideError(phoneError);
        return true;
    }

    // 验证验证码
    function validateCode(showError = true) {
        const code = verificationCodeInput.value.trim();
        const codeRegex = /^\d{6}$/;
        const isValid = codeRegex.test(code);

        if (!code) {
            if (showError) showError(codeError, '请输入验证码');
            return false;
        }

        if (!isValid) {
            if (showError) showError(codeError, '请输入6位数字验证码');
            return false;
        }

        hideError(codeError);
        return true;
    }

    // 显示错误信息
    function showError(element, message) {
        element.classList.remove('hidden');
        element.querySelector('span').textContent = message;

        // 添加红色边框到输入框
        const inputId = element.id.replace('-error', '');
        const inputElement = document.getElementById(inputId);
        if (inputElement) {
            const parentDiv = inputElement.parentElement;
            if (parentDiv) {
                parentDiv.classList.add('border-red-500');
                parentDiv.classList.remove('focus:border-primary');
            }
        }
    }

    // 隐藏错误信息
    function hideError(element) {
        element.classList.add('hidden');

        // 移除红色边框
        const inputId = element.id.replace('-error', '');
        const inputElement = document.getElementById(inputId);
        if (inputElement) {
            const parentDiv = inputElement.parentElement;
            if (parentDiv) {
                parentDiv.classList.remove('border-red-500');
                parentDiv.classList.add('focus:border-primary');
            }
        }
    }

    // 获取验证码
    function handleGetVerificationCode() {
        if (!validatePhone()) return;

        // 模拟发送验证码
        showToast('success', '验证码已发送');

        // 开始倒计时
        startCountdown();

        // 焦点移到验证码输入框
        verificationCodeInput.focus();
    }

    // 开始倒计时
    function startCountdown() {
        let countdown = 60;
        isCountingDown = true;
        getCodeButton.disabled = true;
        getCodeButton.innerHTML = `<i class="fas fa-clock mr-1"></i>${countdown}s`;

        // 更新样式
        getCodeButton.classList.add('bg-gray-200', 'text-gray-500', 'cursor-not-allowed');
        getCodeButton.classList.remove('bg-secondary', 'text-white', 'hover:bg-indigo-600', 'shadow-md', 'hover:shadow-lg', 'transform', 'hover:-translate-y-0.5');

        // 设置倒计时定时器
        if (countdownTimer) {
            clearInterval(countdownTimer);
        }

        countdownTimer = setInterval(() => {
            countdown--;
            getCodeButton.innerHTML = `<i class="fas fa-clock mr-1"></i>${countdown}s`;

            if (countdown <= 0) {
                resetCountdown();
            }
        }, 1000);
    }

    // 重置倒计时
    function resetCountdown() {
        isCountingDown = false;
        if (countdownTimer) {
            clearInterval(countdownTimer);
            countdownTimer = null;
        }

        getCodeButton.innerHTML = '获取验证码';
        checkFormStates();
    }

    // 账号密码登录
    function handleAccountLogin() {
       /* if (!validateUsername() || !validatePassword()) {
            return;
        }
*/
        // 显示加载状态
        accountLoginButton.disabled = true;
        accountLoginButton.innerHTML = `
          <div class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            登录中...
          </div>
        `;

        // 模拟登录验证
        setTimeout(() => {
            // 恢复按钮状态
            accountLoginButton.innerHTML = '账号登录';
            checkFormStates();

            // 显示成功提示
            showToast('success', '登录成功');

            // 模拟跳转到首页
            setTimeout(() => {
               login()
            }, 1000);
        }, 1500);
    }

    // 手机号验证码登录
    function handlePhoneLogin() {
        if (!validatePhone() || !validateCode()) {
            return;
        }

        // 显示加载状态
        phoneLoginButton.disabled = true;
        phoneLoginButton.innerHTML = `
          <div class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            登录中...
          </div>
        `;

        // 模拟登录验证
        setTimeout(() => {
            // 恢复按钮状态
            phoneLoginButton.innerHTML = '手机登录';
            checkFormStates();

            // 模拟跳转到首页
            setTimeout(() => {
                window.location.href = '/';
            }, 1000);
        }, 1500);
    }

    // 显示Toast通知
    function showToast(type, message) {
        // 创建toast元素
        const toast = document.createElement('div');
        toast.className = `px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 transform transition-all duration-300 ease-in-out opacity-0 translate-y-[-20px] z-50 ${
            type === 'success'
                ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                : type === 'error'
                    ? 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                    : 'bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
        }`;

        // 设置图标
        const iconClass = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle';

        toast.innerHTML = `
          <i class="fa ${iconClass}"></i>
          <span>${message}</span>
        `;

        // 添加到容器
        toastContainer.appendChild(toast);

        // 触发重排，使动画生效
        void toast.offsetWidth;

        // 显示toast
        toast.classList.remove('opacity-0', 'translate-y-[-20px]');
        toast.classList.add('opacity-100', 'translate-y-0');

        // 3秒后隐藏
        setTimeout(() => {
            toast.classList.remove('opacity-100', 'translate-y-0');
            toast.classList.add('opacity-0', 'translate-y-[-20px]');

            // 动画结束后移除元素
            setTimeout(() => {
                toast.remove();
            }, 300);
        }, 3000);
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', init);

    function login(){
        let username = $("#username").val();
        let password = $("#password").val();


        if(username==""){
            layer.msg("请输入登陆账号")
            return
        }
        if(password==""){
            layer.msg("请输入登陆密码")
            return
        }
        let encrypt = new JSEncrypt()
        encrypt.setPublicKey(PUBLIC_KEY)

        let pwd = password;
        let dataSet = {
            "username": username,
            "password": encrypt.encrypt(pwd),
            "remember":0

        }

        $.post("/system/user/login", dataSet, function (data) {
            if (data.code === 200) {
                setTimeout(() => {
                    window.location = '/system/index';
                }, 1000);

            }else{
                layer.msg("登陆失败,请联系IT研发部")
            }
        });
    }


</script>
</body>
</html>
