<template>
    <body id="login-page">
        <el-form class="login-container" :model="loginForm" label-position="left" label-width="0px">
            <h3 class="login_title">系统登录</h3>
            <el-form-item>
                <el-input type="text" 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 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, ElLoading } from 'element-plus'
import { reactive } from 'vue';
import store from '@/store'
import router from '@/router'
const loginForm = reactive({
    loginAccount: "",
    loginPassword: "",
})
// 登录
const login = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    loginWithAuth(loginForm).then(res => {
        loading.close()
        if (res.data.code == 0) {
            store.commit('mutationUser', res.data.returnData.user)// 用户信息
            store.commit('mutationMenu', res.data.returnData.menuList)// 菜单信息
            // router.replace({ path: '/' })// 直接跳转到主页
            router.replace({ path: '/systemCenter' })// 跳转到系统选择的界面
        } else {
            ElMessage.error(res.data.message)
        }
    }).catch(err => {
        console.log(err)
        loading.close()
        ElMessage.error('登录失败！')
    })
}
</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>  