<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>X·in管理端</title>
    <script type="text/javascript" src="themes/js/vue.min.js"></script>
    <script type="text/javascript" src="themes/js/index.js"></script>
    <script type="text/javascript" src="themes/js/axios.min.js"></script>
    <script type="text/javascript" src="themes/js/jquery.js"></script>
    <script type="text/javascript" src="themes/js/moment.js"></script>
    <link rel="stylesheet" href="themes/css/index.css" type="text/css">
</head>
<style>
    .header{
        height: 60px;
        width: 100%;
    }

    .header .logo{
        height: 60px;
        width: 260px;
    }

    .header .logo-image{
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        background-image: url('themes/img/xin.png');
    }
    .el-form{
        width: 480px;
        margin: auto;
        margin-top: 40px;
    }
    .el-input__inner {
        border: 0 !important;
        padding: 0;
    }
    .admin {
        display: flex;
        align-items: center;
        border: 1px solid #DCDFE6;
        background-color: #fff;
        border-radius: 4px;
        height: 40px;
        margin-bottom: 20px;
    }

    .iconinfo {
        display: block;
        width: 40px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #999;
        height: 40px;
        line-height: 40px;
    }

    #app {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        background-color: #f0f2f5;
        background-image: url("themes/img/login_bg.svg");
    }

    .container {
        justify-content: center;
        align-items: center;
        background-color: #f0f2f5;
        width: 80%;
        margin: 40px auto;
    }
    .title{
        height: 60px;
        width: 100%;
        text-align: center;
        margin-top: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .system {
        font-size: 20px;
        font-weight: 600;
    }
</style>
<body>
<body>
<div id="app">
    <div class="header">
        <div class="logo">
            <div class="logo-image"></div>
        </div>
    </div>
    <div class="container">
        <div class="title">
            <span class="system">用户登录</span>
        </div>
        <el-form id="passLogin" ref="user" label-width="80px" @keyup.enter.native="login">
            <div class="admin">
                <i class="el-icon-user-solid iconinfo"></i>
                <el-input v-model="user.name" ref="name" placeholder="请输入用户名" clearable></el-input>
            </div>
            <div class="admin">
                <i class="el-icon-key iconinfo"></i>
                <el-input placeholder="请输入密码" ref="pass" v-model="user.pass" type="password" show-password></el-input>
            </div>
            <div class="remenber">
                <el-checkbox-group>
                    <el-checkbox  label="记住密码" name="type"></el-checkbox>
                </el-checkbox-group>
                <div>
                    <el-button type="text">忘记密码?</el-button>
                </div>
            </div>
            <div style="text-align: center;">
                <el-button type="primary" style="width: 100%;" @click="login">登陆</el-button>
            </div>
        </el-form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    name: '',
                    pass:''
                },
            }
        },
        created: function () {
            this.checkLogin();
        },
        methods: {
            login() {
                if(!this.user.name){
                    this.$message.error("用户名不能为空");
                    this.$refs.name.select()
                    return false;
                }else if(this.user.pass  == ""){
                    this.$refs.pass.select()
                    this.$message.error("密码不能为空");
                    return false;
                }
                const that = this;
                const data = {
                    name:this.user.name,
                    pass:this.user.pass
                }
                axios.post('/xinadmin/login', data).then(function (res) {
                    console.log(res.data)
                    if (res.data.state == "success") {
                        sessionStorage.setItem("token",res.data.token);
                        if(res.data.edit == 0){
                            location.href = "editpass.jsp";
                        }else{
                            location.href = "home.jsp";
                        }
                    }else{
                        that.$message.error(res.data.mes);
                    }
                })
            },
            checkLogin(){
                const token = sessionStorage.getItem("token");
                const str = new Date().getTime()
                if(token){
                    if((+token + (2*60*60*1000) > str)){
                        location.href = "home.jsp"
                    }
                }
            }
        }
    })
</script>
