<!-- 登录/注册页面 -->

<template>
    <div class="box">

        <div class="box-content">

            <!-- 左边框 -->
            <div class="box-content-left">

                <div class="box-content-text">
                    <h1>欢迎使用VROOM</h1>
                    <h3>Welcome to VROOM</h3>
                </div>

                <!-- 登录框 -->
                <el-form :model="g_loginForm" label-position="top" label-width="auto" style="max-width: 600px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="g_loginForm.username" type="text" size="large" auto-complete="off"
                            placeholder="请输入账号">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="g_loginForm.password" type="password" size="large" auto-complete="off"
                            placeholder="请输入密码" @keyup.enter="act_handleLogin">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="验证码" prop="code" v-if="g_captchaEnabled">
                        <el-input v-model="g_loginForm.code" size="large" auto-complete="off" placeholder="请输入验证码"
                            style="width: 63%" @keyup.enter="act_handleLogin">
                        </el-input>
                        <div class="login-code">
                            <img :src="g_codeUrl" @click="get_Code" class="login-code-img" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-checkbox v-model="g_loginForm.rememberMe">记住密码</el-checkbox>
                        <el-link :underline="false" @click="act_SwitchPage('forget')">忘记密码</el-link>
                    </el-form-item>

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


                </el-form>

                <div class="box-content-item-footer">
                    <el-link :underline="false" @click="act_SwitchPage('/register')">还没有注册，点击此处注册新账号</el-link>
                </div>
            </div>


            <!-- 右侧背景图 -->
            <div class="box-content-right">

            </div>

        </div>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/http/api/general/jsencrypt";
import { login, getCodeImg } from '@/http/api/pages/User/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/store/index";



/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 用户数据
const g_userStore = useUserStore();
// 获取路由对象
const g_route = useRoute() // 解构出当前路由对象的各种属性
const g_router = useRouter() // 解构出路由实例的各种方法
// 记住密码
const g_rememb = ref(false)
// 表单数据
const g_loginForm = ref({
    username: "",
    password: "",
    rememberMe: false,
    code: "",
    uuid: ""
});
// 验证码
const g_codeUrl = ref("");
// 登录状态
const g_loading = ref(false);
// 验证码开关
const g_captchaEnabled = ref(true);
// 登录状态
const g_isLogin = inject('act_isLogin');


/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    get_Code();
    act_getCookie();
})




/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

// 切换页面
const act_SwitchPage = (page) => {
    g_router.push(page)
}

// 登录
const act_handleLogin = () => {
    if (!act_validate()) return;

    g_loading.value = true;

    // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
    let loginData = {};

    if (g_loginForm.value.rememberMe) {
        loginData = {
            username: g_loginForm.value.username,
            password: encrypt(g_loginForm.value.password),
            rememberMe: g_loginForm.value.rememberMe
        };
    } else {
        loginData = {
            username: g_loginForm.value.username,
        };
    }


    login(g_loginForm.value).then(res => {
        if (res.code == 200) {
            // 设置用户信息
            g_userStore.setUserInfo(res.data.user);
            // 保存res中的token
            g_userStore.setToken(res.data.token);
            g_isLogin({ username: 'JohnDoe' });
            act_SwitchPage('/');
        } else {
            ElMessageBox.alert("<font color='red'> " + res.msg + " </font>", "系统提示", {
                dangerouslyUseHTMLString: true,
                type: "warning"
            })
            g_loading.value = false;
        }
    }).catch(() => {
        g_loading.value = false;
        // 重新获取验证码
        if (g_captchaEnabled.value) {
            get_Code();
        }
    });
}

// 获取数据
const act_getCookie = () => {
    const loginData = g_userStore.userInfo.user
    if (loginData) {
        g_loginForm.value.username = loginData.username;
        g_loginForm.value.password = decrypt(loginData.password) || "";
        g_loginForm.value.rememberMe = loginData.rememberMe;
    }
}

// 校验
const act_validate = () => {
    if (g_loginForm.value.username == "") {
        ElMessage.error("请输入用户名");
        return false;
    }
    if (g_loginForm.value.password == "") {
        ElMessage.error("请输入密码");
        return false;
    }
    if (g_loginForm.value.code == "") {
        ElMessage.error("请输入验证码");
        return false;
    }
    return true;
}



/************************************************
 * 获取数据
 * 
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/
// 获取验证码
const get_Code = () => {
    getCodeImg().then(res => {
        g_captchaEnabled.value = res.captchaEnabled == undefined ? true : res.captchaEnabled;
        if (g_captchaEnabled.value) {
            g_codeUrl.value = "data:image/gif;base64," + res.img;
            g_loginForm.value.uuid = res.uuid;
        }
    });
}





</script>
<style scoped>
.box {
    flex: 1;
    width: 100%;
    min-height: calc(100% - 66px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-content {
    min-width: 360px;
    width: 60%;
    max-width: 900px;
    height: 70%;
    max-height: 600px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    overflow: auto;
    border: 1px solid rgb(223 223 223);
    box-shadow: 0px 0px 15px rgb(215 215 215);
}

.box-content-left {
    flex: 2;
    min-width: 280px;
    margin: 0px 16px 0px 0px;
    padding: 0px 16px 0px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: 2px solid rgb(217 217 217);
    overflow: auto;
}

.box-content-right {
    flex: 3;
    background-image: url(https://19089915.s21i.faiusr.com/4/ABUIABAEGAAgv539pQYo0_vlpQcw8gM46wI.png.webp);
    background-repeat: no-repeat;
    background-position: center center;
}

.box-content-text h3 {
    font-weight: 500;
}

.fun-block {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;
}

::v-deep .el-input {
    flex: 1;
}

.login-code {
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.box-content-item-footer {
    text-align: center;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
    .box-content {
        min-width: auto;
        width: auto;
        max-width: auto;
        height: auto;
        max-height: auto;
        padding: 0;
        display: flex;
        flex-direction: row;
        border-radius: 8px;
        overflow: auto;
        border: none;
        box-shadow: 0 0 0 rgb(0, 0, 0, 0);
    }

    .box-content-left {
        margin: 0;
        border-right: none;
    }

    .box-content-right {
        display: none;
    }

}
</style>