<template>
    <div class="login-container">
        <!-- 动态背景 -->
        <div class="login-background">
            <div class="bg-animation">
                <div class="particle" v-for="i in 50" :key="i" :style="getParticleStyle(i)"></div>
            </div>
            <div class="gradient-overlay"></div>
        </div>

        <!-- 登录表单卡片 -->
        <div class="login-card">
            <div class="card-header">
                <div class="logo-container">
                    <div class="logo-circle">
                        <div class="logo-inner"></div>
                    </div>
                </div>
                <h2 class="login-title">{{ title }}</h2>
                <p class="login-subtitle">欢迎登录系统</p>
            </div>

            <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        type="text"
                        size="large"
                        auto-complete="off"
                        placeholder="请输入账号"
                        class="login-input"
                    >
                        <template #prefix>
                            <svg-icon icon-class="user" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        type="password"
                        size="large"
                        auto-complete="off"
                        placeholder="请输入密码"
                        class="login-input"
                        @keyup.enter="handleLogin"
                    >
                        <template #prefix>
                            <svg-icon icon-class="password" class="el-input__icon input-icon" />
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="code" v-if="captchaEnabled">
                    <div class="captcha-container">
                        <el-input
                            v-model="loginForm.code"
                            size="large"
                            auto-complete="off"
                            placeholder="验证码"
                            class="captcha-input"
                            @keyup.enter="handleLogin"
                        >
                            <template #prefix>
                                <svg-icon
                                    icon-class="validCode"
                                    class="el-input__icon input-icon"
                                />
                            </template>
                        </el-input>
                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
                        </div>
                    </div>
                </el-form-item>

                <div class="form-options">
                    <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                </div>

                <el-form-item style="width: 100%; margin-top: 30px">
                    <el-button
                        :loading="loading"
                        size="large"
                        type="primary"
                        class="login-button"
                        @click.prevent="handleLogin"
                    >
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                    <div class="register-link" v-if="register">
                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部版权 -->
        <div class="el-login-footer">
            <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
        </div>
    </div>
</template>

<script setup>
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import useUserStore from '@/store/modules/user'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = ref({
    username: 'admin',
    password: 'admin123',
    rememberMe: false,
    code: '',
    uuid: '',
})

const loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
}

const codeUrl = ref('')
const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
// 注册开关
const register = ref(false)
const redirect = ref(undefined)

watch(
    route,
    (newRoute) => {
        redirect.value = newRoute.query && newRoute.query.redirect
    },
    { immediate: true },
)

function handleLogin() {
    proxy.$refs.loginRef.validate((valid) => {
        if (valid) {
            loading.value = true
            // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
            if (loginForm.value.rememberMe) {
                Cookies.set('username', loginForm.value.username, { expires: 30 })
                Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
                Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
            } else {
                // 否则移除
                Cookies.remove('username')
                Cookies.remove('password')
                Cookies.remove('rememberMe')
            }
            // 调用action的登录方法
            userStore
                .login(loginForm.value)
                .then(() => {
                    const query = route.query
                    const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                        if (cur !== 'redirect') {
                            acc[cur] = query[cur]
                        }
                        return acc
                    }, {})
                    router.push({ path: redirect.value || '/', query: otherQueryParams })
                })
                .catch(() => {
                    loading.value = false
                    // 重新获取验证码
                    if (captchaEnabled.value) {
                        getCode()
                    }
                })
        }
    })
}

function getCode() {
    getCodeImg().then((res) => {
        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (captchaEnabled.value) {
            codeUrl.value = 'data:image/gif;base64,' + res.img
            loginForm.value.uuid = res.uuid
        }
    })
}

function getCookie() {
    const username = Cookies.get('username')
    const password = Cookies.get('password')
    const rememberMe = Cookies.get('rememberMe')
    loginForm.value = {
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
    }
}

getCode()
getCookie()

// 生成粒子样式
function getParticleStyle(index) {
    const size = Math.random() * 4 + 2
    const left = Math.random() * 100
    const animationDuration = Math.random() * 20 + 10
    const animationDelay = Math.random() * 5
    return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${left}%`,
        animationDuration: `${animationDuration}s`,
        animationDelay: `${animationDelay}s`,
    }
}
</script>

<style lang='scss' scoped>
.login-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

// 动态背景
.login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        #0a2e1f 0%,
        #1a3a2e 25%,
        #0f1f1a 50%,
        #1a3a2e 75%,
        #0a2e1f 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: 0;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

// 粒子动画
.bg-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: rgba(0, 168, 98, 0.3);
    border-radius: 50%;
    animation: float linear infinite;
    box-shadow: 0 0 10px rgba(0, 168, 98, 0.5);
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(0, 168, 98, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(0, 184, 108, 0.1) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

// 登录卡片
.login-card {
    position: relative;
    width: 440px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 20px 60px rgba(0, 168, 98, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 1;
    animation: cardFadeIn 0.8s ease-out;
    transition: transform 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 70px rgba(0, 168, 98, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// 卡片头部
.card-header {
    text-align: center;
    margin-bottom: 40px;
}

.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: logoRotate 3s linear infinite;
    box-shadow: 0 0 30px rgba(0, 168, 98, 0.5);

    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
        animation: ripple 2s ease-out infinite;
    }
}

@keyframes logoRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.logo-inner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    z-index: 1;
}

.login-title {
    margin: 20px 0 10px 0;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.login-subtitle {
    margin: 0;
    color: #666;
    font-size: 14px;
    font-weight: 400;
}

// 表单样式
.login-form {
    .login-input {
        :deep(.el-input__wrapper) {
            height: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            padding: 0 12px;

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.2);
            }

            &.is-focus {
                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.3);
            }
        }

        :deep(.el-input__inner) {
            height: 38px;
            line-height: 38px;
        }
    }

    .input-icon {
        color: #00a862;
        font-size: 18px;
    }
}

.captcha-container {
    display: flex;
    gap: 12px;
    align-items: center;

    .captcha-input {
        flex: 1;

        :deep(.el-input__wrapper) {
            height: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            padding: 0 12px;

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.2);
            }

            &.is-focus {
                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.3);
            }
        }

        :deep(.el-input__inner) {
            height: 38px;
            line-height: 38px;
        }
    }

    .login-code {
        width: 120px;
        height: 40px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

        &:hover {
            transform: scale(1.05);
        }

        .login-code-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;

    :deep(.el-checkbox) {
        .el-checkbox__label {
            color: #666;
            font-size: 14px;
        }
    }
}

.login-button {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 168, 98, 0.4);
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 168, 98, 0.5);
    }

    &:active {
        transform: translateY(0);
    }
}

.register-link {
    text-align: center;
    margin-top: 20px;

    .link-type {
        color: #00a862;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;

        &:hover {
            color: #00b86c;
            text-decoration: underline;
        }
    }
}

// 底部版权
.el-login-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

// 响应式设计
@media (max-width: 768px) {
    .login-card {
        width: 90%;
        padding: 40px 30px;
    }

    .login-title {
        font-size: 24px;
    }
}
</style>
