<template>
    <a-layout id="components-layout-demo-top-side" style="position: fixed; height: 100%;width: 100%;">
        <a-layout-header :style="{ background: '#fff', padding: 0, height:'112px'}">
            <div class="header-box">
                <img src="../../assets/images/u24.png" alt="" class="logoImg">
                <span></span>
            </div>
        </a-layout-header>
        <a-layout-content class="content-box">
            <div class="desc-box">
                <!-- <div
                    style="font-size: 55px;margin-top:20px;font-weight:bolder;font-family:NSimSun;text-shadow:2px 2px 2px #000000;">
                    组卷系统</div> -->
                <p style="font-size: 22px;"></p>
            </div>
            <div class="login-box">
                <p class="login-title">用户登录</p>
                <a-form :form="form" @submit="login" style="width:240px;">
                    <a-form-item>
                        <a-input style="height:35px;margin-top:8px;padding-bottom:8px;box-sizing:border-box"
                            v-decorator="[
                            'userNameOrEmailAddress',
                            {rules: [{ required: true, message: '请输入用户名!' }]}
                          ]" placeholder="用户名">
                            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25);margin-top:-2px" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input style="height:35px;margin-top:8px;padding-bottom:8px;box-sizing:border-box"
                            v-decorator="[
                            'password',
                            {rules: [{ required: true, message: '请输入密码!' }]}
                            ]" type="password" placeholder="登录密码">
                            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25);margin-top:-2px" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-button style="width:100%;margin-top:25px;height:35px;" type="primary" html-type="submit"
                            :loading="loading">
                            登录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center;height:112px">
            <p class="foot-text">© 2020 依格良特（重庆）科技发展有限公司</p>
        </a-layout-footer>
    </a-layout>
</template>
<script>
    import { Authenticate,AuthenticateAuto } from '@/api/api'
    import { getQueryString } from '@/utils/tools'

    export default {
        name: "login",
        data() {
            return {
                form: this.$form.createForm(this),
                loading: false
            };
        },
        mounted() {
            this.$storage.remove('testBox');
            localStorage.setItem("Token", '')
            localStorage.setItem("userId", '')
            localStorage.setItem("userData", '')
            localStorage.setItem("sourceToken", '')
            localStorage.setItem("isSource", '0')
            this.autoLogin()
        },
        methods: {
            login(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log(values, 'values')
                        this.loading = true;
                        Authenticate(values).then(res => {
                            this.initBox();
                            console.log(res, 'res666666666666')
                            localStorage.setItem("Token", res.accessToken)
                            localStorage.setItem("userId", res.userId)
                            this.$router.push({ name: 'qusetionBankManage' })
                            this.loading = false;
                        }).catch(err => {
                            this.loading = false;
                        })
                    }
                });
            },
            initBox() {
                let testBox = this.$storage.get('testBox');
                console.log(testBox, 'testBox6666666666666')
                if (!testBox || testBox == null) {
                    this.$storage.set('testBox', []);
                } else {
                    this.$store.commit('setTestBox', testBox)
                }
            },
            autoLogin(){
                const query= getQueryString('token')
                if(query){
                        this.loading = true;
                        AuthenticateAuto({Token:query}).then(res => {
                            localStorage.setItem("sourceToken", query)
                            localStorage.setItem("Token", res.accessToken)
                            localStorage.setItem("userId", res.userId)
                            this.$router.push({ name: 'qusetionBankManage' })
                            this.loading = false;
                        }).catch(err => {
                            this.loading = false;
                        })
                }
            },
        }
    };
</script>
<style scoped>
    span {
        height: 20px;
    }

    .content-box {
        padding: 0 6%;
        overflow-y: hidden;
        background-image: url(../../assets/background.png);
        background-size: 100% 100%;
        border: none;
        border-radius: 0px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .desc-box {
        /* background-color: red; */
        height: 400px;
        color: #fff;
        /* font-weight: bold; */
    }

    .logo {
        width: 56px;
        height: 56px;
        margin-left: 32px;
    }

    .header-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 30px 0;
        font-size: 30px;
        font-weight: bold;
        margin-left: 66px;
    }

    .title-group {
        width: 200px;
        height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        line-height: 20px;
        padding: 7px 10px 5px 12px;
        box-sizing: border-box;
    }

    .name {
        font-family: 'MicrosoftYaHei', '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
    }

    .foot-text {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
    }

    .login-box {
        width: 320px;
        height: 400px;
        background-color: #fff;
        z-index: 99;
        border-radius: 4px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.0.35);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .login-title {
        font-family: 'MicrosoftYaHei', '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        letter-spacing: 2px;
        color: #555555;
        margin-top: 55px;
        padding:35px 0 20px;
    }

    .logoImg {
        height: 80px;
        margin-left: 50px;
    }
</style>