<template>
    <div class="login-content">
        <div class="login-container">
            <!-- 左侧背景区域 -->
            <div class="login-left">
                <!-- <div class="background-image">
                <img
                    alt="背景图"
                    src="../assets/images/login-new-background.png"
                />
            </div> -->
            </div>

            <!-- 右侧登录表单区域 -->
            <div class="login-right">
                <div class="login-form-container">
                    <h2 class="welcome-title">欢迎登录公共服务平台</h2>

                    <!-- 登录方式切换 -->
                    <div class="login-type-switch">
                        <span
                            :class="[
                                'switch-item',
                                { active: loginType === 'password' },
                            ]"
                            @click="switchLoginType('password')"
                        >
                            密码登录
                        </span>
                        <span class="divider">|</span>
                        <span
                            :class="[
                                'switch-item',
                                { active: loginType === 'sms' },
                            ]"
                            @click="switchLoginType('sms')"
                        >
                            验证码登录
                        </span>
                    </div>

                    <!-- 登录表单 -->
                    <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginRules"
                        class="login-form"
                    >
                        <!-- 密码登录表单 -->
                        <template v-if="loginType === 'password'">
                            <el-form-item prop="username">
                                <el-input
                                    v-model="loginForm.username"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="请输入用户名"
                                    class="custom-input"
                                >
                                    <i
                                        slot="prefix"
                                        class="el-input__icon el-icon-user"
                                    ></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    v-model="loginForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="请输入密码"
                                    show-password
                                    class="custom-input"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <i
                                        slot="prefix"
                                        class="el-input__icon el-icon-lock"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="code" v-if="captchaEnabled">
                                <div class="code-input-group">
                                    <el-input
                                        v-model="loginForm.code"
                                        auto-complete="off"
                                        placeholder="请输入右侧校验码"
                                        class="custom-input code-input"
                                        @keyup.enter.native="handleLogin"
                                    >
                                        <i
                                            slot="prefix"
                                            class="el-input__icon el-icon-message"
                                        />
                                    </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
                                >
                                <a href="#" class="forgot-password">忘记密码</a>
                            </div>
                        </template>

                        <!-- 验证码登录表单 -->
                        <template v-else>
                            <el-form-item prop="mobile">
                                <el-input
                                    v-model="loginForm.mobile"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="请输入手机号"
                                    class="custom-input"
                                >
                                    <i
                                        slot="prefix"
                                        class="el-input__icon el-icon-phone"
                                    ></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="smsCode">
                                <div class="sms-input-group">
                                    <el-input
                                        v-model="loginForm.smsCode"
                                        auto-complete="off"
                                        placeholder="请输入验证码"
                                        class="custom-input sms-input"
                                        @keyup.enter.native="handleLogin"
                                    >
                                        <i
                                            slot="prefix"
                                            class="el-input__icon el-icon-key"
                                        ></i>
                                    </el-input>
                                    <el-button
                                        class="sms-button"
                                        :disabled="smsCountdown > 0"
                                        @click="sendSmsCode"
                                    >
                                        {{
                                            smsCountdown > 0
                                                ? `${smsCountdown}s`
                                                : '获取验证码'
                                        }}
                                    </el-button>
                                </div>
                            </el-form-item>
                        </template>

                        <!-- 登录按钮 -->
                        <el-form-item class="login-button-item">
                            <el-button
                                :loading="loading"
                                size="large"
                                type="primary"
                                class="login-button"
                                @click.native.prevent="handleLogin"
                            >
                                <span v-if="!loading">登录</span>
                                <span v-else>登录中...</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: 'Login',
    data() {
        return {
            title: process.env.VUE_APP_TITLE,
            codeUrl: '',
            loginType: 'password', // 登录类型：password 或 sms
            loginForm: {
                username: 'admin',
                password: 'admin123',
                mobile: '',
                smsCode: '',
                rememberMe: false,
                code: '',
                uuid: '',
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的账号',
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的密码',
                    },
                ],
                mobile: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入手机号',
                    },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur',
                    },
                ],
                smsCode: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入验证码',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请输入验证码',
                    },
                ],
            },
            loading: false,
            // 验证码开关
            captchaEnabled: true,
            // 注册开关
            register: false,
            redirect: undefined,
            // 短信验证码倒计时
            smsCountdown: 0,
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true,
        },
    },
    created() {
        this.getCode()
        this.getCookie()
    },
    methods: {
        // 切换登录类型
        switchLoginType(type) {
            this.loginType = type
            // 清空表单验证
            this.$nextTick(() => {
                this.$refs.loginForm.clearValidate()
            })
        },
        // 发送短信验证码
        sendSmsCode() {
            this.$message.closeAll()
            if (!this.loginForm.mobile) {
                this.$message.warning('请先输入手机号')
                return
            }
            if (!/^1[3-9]\d{9}$/.test(this.loginForm.mobile)) {
                this.$message.warning('请输入正确的手机号')
                return
            }

            // 这里应该调用发送短信验证码的API
            // 模拟发送成功
            this.$message.success('验证码已发送')
            this.startCountdown()
        },
        // 开始倒计时
        startCountdown() {
            this.smsCountdown = 60
            const timer = setInterval(() => {
                this.smsCountdown--
                if (this.smsCountdown <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        },
        getCode() {
            getCodeImg().then((res) => {
                this.captchaEnabled =
                    res.captchaEnabled === undefined ? true : res.captchaEnabled
                if (this.captchaEnabled) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                }
            })
        },
        getCookie() {
            const username = Cookies.get('username')
            const password = Cookies.get('password')
            const rememberMe = Cookies.get('rememberMe')
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            }
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true

                    // 根据登录类型处理不同的登录逻辑
                    if (this.loginType === 'password') {
                        // 密码登录逻辑
                        if (this.loginForm.rememberMe) {
                            Cookies.set('username', this.loginForm.username, {
                                expires: 30,
                            })
                            Cookies.set(
                                'password',
                                encrypt(this.loginForm.password),
                                { expires: 30 },
                            )
                            Cookies.set(
                                'rememberMe',
                                this.loginForm.rememberMe,
                                {
                                    expires: 30,
                                },
                            )
                        } else {
                            Cookies.remove('username')
                            Cookies.remove('password')
                            Cookies.remove('rememberMe')
                        }
                    } else {
                        // 短信验证码登录逻辑
                        // 这里可以添加短信验证码登录的特殊处理
                        console.log(
                            '短信验证码登录',
                            this.loginForm.mobile,
                            this.loginForm.smsCode,
                        )
                    }

                    // 调用登录接口
                    this.$store
                        .dispatch('Login', this.loginForm)
                        .then(() => {
                            this.$router
                                .push({ path: this.redirect || '/' })
                                .catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false
                            if (
                                this.captchaEnabled &&
                                this.loginType === 'password'
                            ) {
                                this.getCode()
                            }
                        })
                }
            })
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-container {
    display: flex;
    height: 80%;
    width: 80%;
    background: #f5f7fa;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
}

// 左侧背景区域
.login-left {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background: url('../assets/images/login-new-background.png') no-repeat
        center center;
    background-size: 100% 100%;
    overflow: hidden;

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

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

    .version-text {
        position: absolute;
        top: 30px;
        left: 30px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        font-weight: 500;
        z-index: 2;
    }
}

// 右侧登录表单区域
.login-right {
    // flex: 0 0 700px;
    width: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    position: relative;

    .login-form-container {
        margin: 0 auto;
        width: 85%;
        padding: 20px;

        .welcome-title {
            font-size: 28px;
            font-weight: 600;
            color: #2c3e50;
            text-align: center;
            margin-bottom: 40px;
            letter-spacing: 1px;
        }

        .login-type-switch {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 40px;

            .switch-item {
                padding: 8px 20px;
                cursor: pointer;
                font-size: 16px;
                color: #909399;
                transition: all 0.3s ease;
                position: relative;

                &.active {
                    color: #409eff;
                    font-weight: 600;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -8px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 30px;
                        height: 3px;
                        background: linear-gradient(90deg, #409eff, #67c23a);
                        border-radius: 2px;
                    }
                }

                &:hover {
                    color: #409eff;
                }
            }

            .divider {
                margin: 0 15px;
                color: #dcdfe6;
                font-size: 16px;
            }
        }
    }
}

// 登录表单样式
.login-form {
    .el-form-item {
        margin-bottom: 25px;

        &.login-button-item {
            margin-bottom: 0;
            margin-top: 30px;
        }
    }

    .custom-input {
        .el-input__inner {
            height: 50px;
            line-height: 50px;
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            padding-left: 45px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: #fafbfc;

            &:focus {
                border-color: #409eff;
                background: #ffffff;
                box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }

            &::placeholder {
                color: #c0c4cc;
            }
        }

        .el-input__prefix {
            left: 15px;
            top: 50%;
            transform: translateY(-50%);

            .el-input__icon {
                font-size: 18px;
                color: #909399;
            }
        }
    }

    .code-input-group {
        display: flex;
        gap: 12px;

        .code-input {
            flex: 1;
        }

        .login-code {
            position: relative;
            width: 120px;
            height: 50px;
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                border-color: #409eff;
            }

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

            .refresh-icon {
                position: absolute;
                top: 50%;
                right: 8px;
                transform: translateY(-50%);
                color: #909399;
                font-size: 14px;
                background: rgba(255, 255, 255, 0.8);
                padding: 2px;
                border-radius: 2px;
            }
        }
    }

    .sms-input-group {
        display: flex;
        gap: 12px;

        .sms-input {
            flex: 1;
        }

        .sms-button {
            width: 120px;
            height: 50px;
            border-radius: 8px;
            font-size: 14px;
            border: 2px solid #409eff;
            background: #409eff;
            color: #ffffff;
            transition: all 0.3s ease;

            &:hover:not(:disabled) {
                background: #66b1ff;
                border-color: #66b1ff;
            }

            &:disabled {
                background: #c0c4cc;
                border-color: #c0c4cc;
                color: #ffffff;
            }
        }
    }

    .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        .el-checkbox {
            .el-checkbox__label {
                color: #606266;
                font-size: 14px;
            }
        }

        .forgot-password {
            color: #409eff;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;

            &:hover {
                color: #66b1ff;
            }
        }
    }

    .login-button {
        width: 100%;
        height: 50px;
        background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
        }

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

// 底部版权信息
.login-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e4e7ed;
    color: #909399;
    font-size: 12px;
    z-index: 1000;
}

// 响应式设计
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-left {
        flex: 0 0 200px;
    }

    .login-right {
        flex: 1;

        .login-form-container {
            width: 100%;
            padding: 20px;
        }
    }
}

// 动画效果
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-form-container {
    animation: fadeInUp 0.6s ease-out;
}

// 输入框聚焦效果
.custom-input .el-input__inner:focus {
    animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}
</style>
