<!-- 登录界面 -->
<template>
    <div class="login-box">
        <!-- 背景盒子 -->
        <div class="bg-box">
            <img class="login-bg-low" src="../../assets/login-bg-low.svg" alt="bogin-bg-low">
        </div>
        <!-- 内容盒子 -->
        <div class="con-box">
            <div class="con-box2">
                <!-- logo -->
                <div class="logo-box left-to-right-0">
                    <img src="../../assets/logo-sj.png" alt="logo">
                    <span>{{ settingStore.title }} 后台</span>
                </div>
                <!-- 右上角按钮 -->
                <div class="refresh-btn-box">
                    <el-button icon="el-icon-RefreshRight" circle title="刷新页面" @click="refresh"></el-button>
                </div>
                <el-row>
                    <!-- 内容-左 -->
                    <el-col :span="3" :xs="0"></el-col>
                    <el-col :span="7" :xs="0" class="nr-img-box">
                        <p class="left-to-right-1">
                            <img class="nr-img ele-an-0" src="../../assets/login-icon.svg" alt="login-icon">
                        </p>
                        <h2 class="sub-title left-to-right-2">
                            一处登录，处处通行
                        </h2>
                        <p class="nr-info left-to-right-3">
                            同域、跨域、共享Redis、跨Redis、前后端一体、前后端分离 提供各种架构下的SSO接入方案
                        </p>
                    </el-col>
                    <el-col :span="4" :xs="0"></el-col>
                    <!-- 内容-右 -->
                    <el-col :span="6" class="nr-fox">
                        <div class="fo-box">
                            <el-form size="large" @keyup.enter="ok">
                                <el-form-item class="right-to-left-0">
                                    <h2 class="fo-title">{{ settingStore.title }}  登录</h2>
                                </el-form-item>
                                <el-form-item class="right-to-left-1">
                                    <el-input
                                        type="text" v-model="state.model.key" placeholder="id / 账号 / 手机号"
                                        prefix-icon="el-icon-User" clearable autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item class="right-to-left-2">
                                    <el-input
                                        type="password" v-model="state.model.password" placeholder="密码" show-password
                                        prefix-icon="el-icon-Lock" clearable autocomplete="off"></el-input>
                                </el-form-item>
                                <div class="reme-box right-to-left-3">
                                    <el-checkbox class="reme-btn" v-model="state.model.remember" label="下次免登录" size="large"></el-checkbox>
                                </div>
                                <el-form-item class="right-to-left-4">
                                    <el-button type="primary" class="submit-button" color="#337be2" :loading="state.isLoading" @click="ok">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                    <el-col :span="5" :xs="0"></el-col>
                </el-row>
                <!-- 版权部分 -->
                <div class="copyright-box left-to-right-4">
                    Copyright ©2023 Sooka-sso 后台管理 | 长春首佳科技有限公司 - 提供技术支持
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="login">
import {onMounted, reactive, ref} from "vue";
import router from "../../router";
import {useSettingStore} from "../../store/setting";
const settingStore = useSettingStore();
import initAdmin from "../../init/init-admin";

// 字段
const state = reactive({
    isLoading: false,  // 是否正在请求中
    model: {  // 表单字段 
        key: '',
        password: '',
        remember: false
    }
})

onMounted(() => {
    let tempToken = sa.p('temp-token') || router.currentRoute.value.query['temp-token'];
    if(tempToken) {
        fastLogin(tempToken);
    }
})

// 提交登录 
const ok = () => {
    // 参数校验  
    const model = state.model;
    if(sa.isNull(model.key) || sa.isNull(model.password)) {
        return sa.msg('请输入完整');
    }
    // 提交登录 
    state.isLoading = true;
    sa.ajax('/AccAdmin/doLogin', model, function (res) {
        state.isLoading = false;
        loginSuccess(res);
    }, {
        complete: function (){
            state.isLoading = false;
        }
    });
}

// 快速登录 
const fastLogin = function (tempToken) {
    sa.ajax('/AccAdmin/doLoginByTempToken', { tempToken: tempToken }, function (res) {
        loginSuccess(res);
    }, {msg: '启动快速登录...', msgType: 'layer'});
}

// 登录成功后，写入数据，跳转界面
const loginSuccess = function (res) {
    // 写入token
    if(res.data.tokenInfo) {
        if(state.model.remember) {
            sessionStorage.removeItem('satoken');
            localStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        } else {
            localStorage.removeItem('satoken');
            sessionStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        }
    }

    // 打个招呼, 并跳转 
    sa.msg('欢迎你：' + res.data.admin.name);
    setTimeout(function (){
        const redirect = router.currentRoute.value.query.redirect || '/';
        initAdmin(decodeURIComponent(redirect))
    }, 800)
}

// 刷新页面
const refresh = () => {
    location.reload();
}

</script>

<style scoped lang="scss">

// 背景盒子
.bg-box{ position: fixed; width: 100vw; height: 100vh; z-index: 10; background-color: #FFF;}
//.bg-box{background: linear-gradient(to top, #3f9fff, #2c41b4);}
.login-bg-low{position: fixed; bottom: 0px; width: 100vw;}

// logo
.logo-box{position: fixed; left: 13%; top: 5%;}
.logo-box img{width: 50px; vertical-align: middle; }
.logo-box span{vertical-align: sub; margin-left: 10px; font-size: 24px; font-weight: 700; color: #333}

// 右上角按钮
.refresh-btn-box{
    position: fixed;
    top: 20px;
    right: 40px;
}

// ---------- 内容 ------------
.con-box{
    width: 100%; height: 100vh; display: flex; align-items: center; text-align: center;
    position: fixed;
    z-index: 20;
}
.con-box2{flex: 1;}

// 左边icon
.nr-img-box{text-align: left; color: #000;}
.nr-img{width: 400px;}
.sub-title{margin-top: 40px; font-size: 28px; font-weight: 400;}
.nr-info{margin-top: 20px; font-size: 16px;}

// 右边登录盒子
.nr-fox{text-align: left;}
.fo-box{
    box-sizing: border-box;
    width: 480px;
    padding: 50px 70px 30px;
    border: 1px #c9dcef solid;
    background-color: #FFF;
    border-radius: 1px;
}
@media (max-width: 768px) {
    .fo-box{width: 94vw; margin-left: 3vw; padding: 30px;}
}
.fo-box {
    :deep(.el-input__wrapper),:deep(.submit-button) {
        border-radius: 1px !important;
    }
}
.fo-title{font-size: 24px;}
.submit-button{
    width: 100%;
    letter-spacing: 2px;
}
.reme-box{
    width: 100%;
    padding-bottom: 25px;
    margin-top: -1px;
}
//.reme-btn{display: inline-block;}
.remark-text{
    color: #777;
    float: right;
    line-height: 40px;
}

// 版权
.copyright-box{
    position: fixed;
    bottom: 30px;
    color: #ddd;
    width: 90vw;
    margin-left: 5vw;
}

// 动画
@for $i from 0 through 4 {
    .left-to-right-#{$i} {
        opacity: 0;
        animation-name: left-to-right;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i / 10) + s;
    }
}

@for $i from 0 through 4 {
    .right-to-left-#{$i} {
        opacity: 0;
        animation-name: right-to-left;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/10) + s;
    }
}


</style>
