<template>
    <div class="user-container">
        <div class="card">
            <!-- 头部标题 -->
            <div class="header">
                <h1>登录 👋</h1>
            </div>

            <el-form :model="LoginForm" :rules="formRules" ref="loginFormRef" class="login-form" size="default">
                <!-- 用户名输入 -->
                <el-form-item label="用户名" prop="username" :label-position="labelPosition" label-width="65px">
                    <el-input v-model="LoginForm.email" placeholder="请输入用户名" :prefix-icon="User" />
                </el-form-item>

                <!-- 密码输入 -->
                <el-form-item label="密码" prop="password" :label-position="labelPosition" label-width="65px">
                    <el-input v-model="LoginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
                        show-password />
                </el-form-item>

                <!-- 记住账号 & 忘记密码 -->
                <el-form-item class="form-footer">
                    <div class="form-footer-content">
                        <el-checkbox v-model="LoginForm.remember" class="remember-checkbox">记住账号</el-checkbox>
                        <router-link to="/reset-password" class="forgot-password">忘记密码？</router-link>
                    </div>
                </el-form-item>

                <!-- 登录按钮（Element Plus 主按钮规范） -->
                <el-form-item width="100%">
                    <el-button type="primary" class="login-btn" size="large" @click="handleLogin" style="width: 100%"
                        :loading="userStore.loading" :disabled="userStore.loading">
                        {{ userStore.loading ? '登录中...' : '登录' }}
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
// element 导入
import type { FormInstance, FormRules, FormProps } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
// type导入
import type { LoginForm as LoginFormType } from '@/type/user'
// 业务导入
import { useUserStore } from '@/stores/user'
import { useLocalStorage, useSessionStorage } from '@/utils/storage'

// 加密导入
import { encryptPassword } from '@/utils/encrypt'

const router = useRouter()
const error = ref('')
const userStore = useUserStore()
// 表单 Ref（符合 Element Plus 规范）
const loginFormRef = ref<FormInstance>()
const labelPosition = ref<FormProps['labelPosition']>('left')
// 表单数据
const LoginForm = reactive<LoginFormType>({
    email: '1241208486@qq.com',
    password: encryptPassword('888888'),
    login_type: 1,
})
// 表单校验规则（Element Plus 标准校验）
const formRules = reactive<FormRules>({
    email: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

// 登录
const handleLogin = async () => {
    if (!loginFormRef.value) return
    loginFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                error.value = ''
                await userStore.login(LoginForm)
                saveRememberedUsername()
                // 如果是登录或者退出登录重新登录，都是跳转首页，如果是从修改密码操作返回登录页，就跳转回修改密码操作前的页面
                const isChangePassword = useSessionStorage.get('changePassword');
                const backPath = useSessionStorage.get('backPath') || '/';

                // 2. 先清理 sessionStorage（避免残留，执行顺序关键）
                useSessionStorage.remove('changePassword');
                useSessionStorage.remove('backPath');

                // 3. 重置菜单折叠状态（提前执行，避免跳转中断）
                useLocalStorage.set('isCollapse', false);
                const targetPath = isChangePassword ? backPath : '/';

                router.push(typeof targetPath === 'string' ? targetPath : targetPath.value || '/');
            } catch (err) {
                error.value = err instanceof Error ? err.message : '登录失败'
            }
        } else {
            console.log('登录表单验证失败')
        }
    })
}
// 记住账号
const saveRememberedUsername = () => {
    if (LoginForm.remember) {
        useLocalStorage.set('rememberedUsername', LoginForm.email)
    } else {
        useLocalStorage.remove('rememberedUsername')
    }
}
// 从本地存储加载记住的用户名
const loadRememberedUsername = () => {
    const rememberedUsername = useLocalStorage.get('rememberedUsername')
    if (rememberedUsername.value) {
        LoginForm.email = rememberedUsername.value
        LoginForm.remember = true
    }
}

onMounted(() => {
    // 组件挂载时加载记住的用户名
    loadRememberedUsername()
})
</script>

<style lang="scss" scoped>
.login-form {
    .form-footer {
        .form-footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .forgot-password {
                color: #409eff;
                text-decoration: none;
            }
        }
    }
}
</style>