<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 13:56:27
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-10 13:50:05
 * @FilePath: \vite-ai\data-dashboard\src\views\login\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="login-container">
        <div class="bg-login-title">

        </div>
        <div class="login-box">
            <div class="flex items-center justify-center title">
                <span class="left-arrow"></span>
                <span>欢迎登录</span>
                <span class="right-arrow"></span>
            </div>
            <el-form :model="form" :rules="rules" ref="formRef" label-width="0" class="login-form">
                <el-form-item prop="username">
                    <div class="input-group">
                        <img :src="accountIconUrl" alt="账号图标" class="input-icon">
                        <el-input v-model="form.username" placeholder="请输入您的账号" class="custom-input" />
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="input-group">
                        <img :src="passwordIconUrl" alt="密码图标" class="input-icon">
                        <el-input v-model="form.password" placeholder="请输入登录密码" type="password" class="custom-input" />
                    </div>
                </el-form-item>
                <el-form-item class="remember-item">
                    <el-checkbox v-model="form.remember">记住用户名</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin" class="login-btn">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import accountIconUrl from '@/assets/login/account_icon.png';
import passwordIconUrl from '@/assets/login/password_icon.png';
import { getLocal} from "@/utils/local";

const router = useRouter()
const userStore = useUserStore()

const form = reactive({
    username: '',
    password: '',
    remember: false
})

const handleLogin = async () => {
    if (form.username !== 'admin' || form.password !== 'admin123') {
        ElMessage.error('用户名或密码错误')
        return
    }
    try {
        // 实际项目中应调用真实接口
        const res = await fetch('/api/login', {
            method: 'POST',
            body: JSON.stringify(form)
        })
        const data = await res.json()
        if (data.code === 200) {
            userStore.login(data.data.token, form)
            router.push('/dashboard')
        }
    } catch (err) {
        ElMessage.error('登录失败')
    }
}

onMounted(() => {
    const loginInfoCache = getLocal('userLoginInfo')
    if(loginInfoCache) {
        form.username = loginInfoCache.username
        form.remember = loginInfoCache.remember
        form.password = loginInfoCache.password
    }
})
</script>
<style lang="scss">
@import url('./Login.scss');
</style>