<template>
    <div class="login">
        <div class="container">
            <div class="titleBox">
                <div class="col"></div>
                <div class="title">
                    WELCOME
                    <div class="text">
                        卡叔电梯智慧管理系统后台
                    </div>
                </div>
            </div>
            <el-form ref="loginRef" class="login-form" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username">
                    <el-input auto-complete="off" placeholder="请输入用户名" size="large" type="text" v-model="loginForm.username">
                        <template #prefix>
                            <span style="color:#000">用户名：</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input auto-complete="off" placeholder="请输入密码" size="large" type="password" v-model="loginForm.password" @keyup.enter="handleLogin">
                        <template #prefix>
                            <span style="color:#000">密码：</span>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item style="width:100%;">
                    <el-button class="login_button" :loading="loading" size="large" style="width:100%;" type="primary" @click.prevent="handleLogin">
                        <span v-if="!loading">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import RPC from '@/utils/rpc';
const router = useRouter()
const loading = ref(false)
const loginRef = ref(null)
const loginForm = ref({
    username: '',
    password: '',
})


const loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
}

const handleLogin = () => {
    loginRef.value.validate((valid) => {
        if (valid) {
            loading.value = true
            RPC.post('/account/login', { username: loginForm.value.username, password: loginForm.value.password }).then(res => {
                useUserStore().setToken(res.token)
                RPC.post('/account/myinfo').then(res => {
                    useUserStore().setUserInfo(res)
                    ElMessage.success('登录成功')
                    router.push('/')
                }).finally(() => {
                    loading.value = false
                })
            }).catch(() => {
                loading.value = false
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.login {
    height: 98vh;
    position: relative;
    background: center / cover url('@/assets/images/login/login_bg.jpg') no-repeat;

    .container {
        width: 380px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .titleBox {
            font-size: 32px;
            font-weight: bold;
            display: flex;
            color: #fff;
            align-items: center;

            .col {
                width: 1px;
                height: 86px;
                background-color: #fff;
                margin-right: 38px;
            }

            .text {
                font-size: 26px;
                margin-top: 10px;
            }
        }

        .login-form {
            width: 380px;
            margin: 60px 0;

            .el-form-item {
                margin-bottom: 25px;
            }

            .login_button {
                margin-top: 30px;
            }
        }
    }
}
</style>