<template>
<!-- :style="{backgroundImage:'url('+loginBg+')'}" -->
    <div class="login" >
       <img id="logodark" src="../../assets/images/logodark.png" >
        <div class="login-con">
            <Card icon="log-in" title="欢迎登录" :bordered="false">
                <div class="form-con">
                    <login-form :errorMsg="errorMsg" @on-success-valid="handleSubmit"></login-form>
                    <p class="login-tip">推荐使用的浏览器及版本为：Chrome 75 及以上版本。推荐分辨率显示宽度为1280。</p>
                </div>
            </Card>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";
    import LoginForm from "_c/login-form/login-form.vue"; // _ is an alias to /src/components
    import {Message} from 'view-design';
    import { State, Mutation, Getter } from "vuex-class";

    @Component({
        components: {
            LoginForm
        }
    })

    export default class Login extends Vue {
        errorMsg:String="";
        logoDark : any = {};
        loginBg : any = require('@/assets/images/'+this.$versions[this.$versions.name].loginBg);
        @Mutation('setUserInfo') private setUserInfo!: any;
        created() {
            this.$cookie.remove("X-ACCESS-TOKEN");
        }

        handleSubmit(user: any): void {
            this.getApiData('post', this.$msPrefix.base + '/login', user, response => {
                if(response.rtnCode==0){
                    this.errorMsg="";
                    localStorage.setItem("username",user.username);
                    if(this.$customs.flag) {
                        // 海信的有效期设置为永不过期
                        this.$cookie.set('X-ACCESS-TOKEN', response.data, -1);
                    } else {
                        this.$cookie.set('X-ACCESS-TOKEN', response.data, {expires: 1/48});
                    }
                    let redirect = this.$router.currentRoute.query.redirect;
                    if (redirect) {
                        (this.$router as any).push(redirect);
                    } else {
                        (this.$router as any).push("/index");
                    }
                }else{
                    this.errorMsg="用户名或密码错误！"
                }
            },err=>{
                this.errorMsg="用户名或密码错误！"
            })
        }
    

    }
</script>
<style scoped>
#logodark{
    position: absolute;
    top: 50px;left: 58px;
}
.login-con{
    background-color: black
}
</style>



