<template>
    <body id="login-page">
        <el-form class="login-container" :model="loginForm" label-position="left" label-width="0px" @keyup.enter="login">
            <h3 class="login_title">系统登录</h3>
            <el-form-item>
                <el-input type="text" ref="loginAccountInput" v-model="loginForm.loginAccount" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" v-model="loginForm.loginPassword" auto-complete="off"
                    placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button ref="loginBtn" type="primary" style="width: 100%;  border: none"
                    @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </body>
</template>

<script setup>
import { loginWithAuth } from '@/api/login.js'
import { ElMessage } from 'element-plus'
import { reactive, onMounted, nextTick, ref } from 'vue';
import { loading } from '@/utils/loading'
import store from '@/store'
import router from '@/router'
const loginBtn = ref()
let loginForm = reactive({
    loginAccount: "",
    loginPassword: "",
})
const loginAccountInput = ref()
// 页面创建生命周期
onMounted(() => {
    nextTick(() => {
        loginAccountInput.value.focus()
    })
})
// 登录
const login = () => {
    loading.open('登录中...')
    loginWithAuth(loginForm).then(res => {
        const response = res.data
        if (response.code === 0) {
            store.commit('mutationUser', response.data.user)// 用户信息
            store.commit('mutationMenu', response.data.menuList)// 菜单信息
            store.commit('mutationStand', response.data.stand)
            // router.replace({ path: '/' })// 直接跳转到主页
            router.replace({ path: '/systemCenter' })// 跳转到系统选择的界面
        } else {
            ElMessage.error(response.message)
        }
    }).catch(err => {
        console.log(err)
        ElMessage.error('登录失败！')
    }).finally(() => {
        loading.close()
    })
}
</script>

<style scoped>
#login-page {
    /* background: url("../assets/img/bg.jpg") no-repeat; */
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}

body {
    margin: 0px;
}

.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>