<template>
    <div class="login-page">
        <div class="login-pack">
            <div class="login-view-pack">
                <div class="title">SCADA+AVI系统</div>
                <div class="user-name">
                    <el-input
                        v-model="username"
                        placeholder="请输入用户名"
                        @keyup.enter.native="loginClick">
                    </el-input>
                    <svg-icon class="username-icon" icon-class="user"></svg-icon>
                </div>
                <div class="password">
                    <el-input
                        v-model="password"
                        placeholder="请输入密码"
                        @keyup.enter.native="loginClick"
                        type="password">
                    </el-input>
                    <svg-icon class="password-icon" icon-class="password"></svg-icon>
                </div>
                <div class="button">
                    <el-button
                        v-if="loading"
                        :loading="true"
                        type="primary">
                        登陆中
                    </el-button>
                    <el-button
                        v-else
                        @click="loginClick"
                        type="primary">
                        登陆
                    </el-button>
                </div>
            </div>
        </div>
        <!--<div class="login-pack">-->
            <!--<div class="logo-pack">-->
                <!--<img src="../../assets/images/Login/logo.png"/>-->
            <!--</div>-->
            <!--<div class="desc-pack">-->
                <!--<div class="left-line"></div>-->
                <!--<div class="desc">生产制造执行系统</div>-->
                <!--<div class="right-line"></div>-->
            <!--</div>-->
            <!--<div class="username-pack">-->
                <!--<el-input v-model="username" @keyup.enter.native="loginClick" placeholder="用户名">-->
                    <!--<template slot="prepend"><svg-icon icon-class="user"></svg-icon></template>-->
                <!--</el-input>-->
            <!--</div>-->
            <!--<div class="password-pack">-->
                <!--<el-input v-model="password" @keyup.enter.native="loginClick" type="password" placeholder="密码">-->
                    <!--<template slot="prepend"><svg-icon icon-class="password"></svg-icon></template>-->
                <!--</el-input>-->
            <!--</div>-->
            <!--<div class="button-pack">-->
                <!--<el-button v-if="loading" disabled :loading="true" type="primary">登录中</el-button>-->
                <!--<el-button v-else type="primary" @click="loginClick">登录</el-button>-->
            <!--</div>-->
        <!--</div>-->
        <div class="version-pack">version 1.0.0 山东万腾电子科技有限公司提供技术支持</div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import { Message } from 'element-ui'

    export default {
        name: 'Login',
        data () {
            return {
                username: '',
                password: '',
                code: '',
                language: true,
                loading: false,
                redirect: null
            }
        },
        watch: {
            $route: {
                handler (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        methods: {
            loginClick () {
                this.loading = true;
                this.$store.dispatch('User/loginByUsername', {username: this.username, password: this.password}).then((authority) => {
                    this.loading = false;
                    this.$router.push({ path: this.redirect || 'welcome' })
                }).catch((error) => {
                    this.loading = false;
                    this.$message.error(error.message);
                })
            },
            // 多语言切换事件
            languageChange (val) {
                this.$i18n.locale = val
                this.language = val
                this.$store.dispatch('User/languageChange', val)
                window.sessionStorage.setItem('Admin-Language', val)
            },
            retrievePasswordClick () {},
            // 判断是否需要清空localstorage（列表配置）
            decideNeedToEmptyLocalStorage () {
                this.$fetch('server-controller/version-get').then((response) => {
                    let localVersion = window.localStorage.getItem('Admin-Version')
                    if (localVersion === null) {
                        window.localStorage.removeItem('Admin-ColList')
                        window.localStorage.setItem('Admin-Version', _.cloneDeep(response.version))
                    } else {
                        if (localVersion < response.version) {
                            window.localStorage.removeItem('Admin-ColList')
                            window.localStorage.setItem('Admin-Version', _.cloneDeep(response.version))
                        }
                    }
                })
            }
        },
        mounted () {
            // 方案一：根据浏览器的语言环境
            // var JsSrc = (navigator.language || navigator.browserLanguage).toLowerCase();
            // if (JsSrc.indexOf('zh') !== -1) {
            //     this.languageChange('zh')
            // } else if (JsSrc.indexOf('en') !== -1) {
            //     this.languageChange('en')
            // }
            // 方案二：根据用户自己选择的语言环境
            if (!window.sessionStorage.getItem('Admin-Language') || window.sessionStorage.getItem('Admin-Language') === 'zh') {
                this.languageChange('zh')
            } else {
                this.languageChange('en')
            }
            // 判断是否需要清空localstorage（列表配置）
            // this.decideNeedToEmptyLocalStorage()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "@/styles/mixin.scss";
    .login-page {
        /*//@include rdc-box-sizing;*/
        width: 100%;
        height: 100%;
        min-height: 900px;
        min-width: 1620px;
        position: relative;
        top: 0;
        z-index: 1;
        /*padding: 120px 120px 0 120px;*/
        display: -webkit-flex;
        display: flex;
        background-image: url(../../assets/images/Login/bg.png);
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        justify-content: center;
        align-items: center;

        .login-pack {
            width: 1157px;
            height: 722px;
            background-image: url('../../assets/images/Login/login_bg.png');
            background-position: center 0;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            position: relative;

            .login-view-pack {
                position: absolute;
                width: 370px;
                height: 558px;
                top: 20px;
                right: 20px;

                .title {
                    font-size: 30px;
                    color: #0377ff;
                    text-align: center;
                    font-weight: bold;
                    margin-top: 110px;
                }

                .user-name {
                    width: 320px;
                    margin: 0 auto;
                    margin-top: 80px;
                    position: relative;

                    .el-input {

                        /deep/ .el-input__inner {
                            padding-left: 70px;
                            color: #a1a8b2;
                            background-color: #eef4fe !important;
                            border-radius: 20px;
                            border: 0px;
                            &::-webkit-input-placeholder{
                                color: #a1a8b2;
                                font-size: 14px;
                            }
                        }
                    }

                    .username-icon {
                        color: #0377ff;
                        font-size: 30px;
                        position: absolute;
                        top: 7px;
                        left: 22px;
                    }
                }

                .password {
                    width: 320px;
                    margin: 0 auto;
                    margin-top: 48px;
                    position: relative;

                    .el-input {

                        /deep/ .el-input__inner {
                            padding-left: 70px;
                            color: #a1a8b2;
                            background-color: #eef4fe !important;
                            border-radius: 20px;
                            border: 0px;
                            &::-webkit-input-placeholder{
                                color: #a1a8b2;
                                font-size: 14px;
                            }
                        }
                    }

                    .password-icon {
                        color: #0377ff;
                        font-size: 30px;
                        position: absolute;
                        top: 7px;
                        left: 22px;
                    }
                }

                .button {
                    padding: 0 20px;
                    margin-top: 45px;

                    .el-button {
                        width: 100%;
                        height: 46px;
                        font-size: 22px;
                        border-radius: 20px;
                    }
                }
            }
        }
        /*.login-pack {*/
            /*position: absolute;*/
            /*right: 200px;*/
            /*top: 320px;*/
            /*width: 451px;*/
            /*z-index: 9;*/
            /*.logo-pack {*/
                /*text-align: center;*/
            /*}*/
            /*.desc-pack {*/
                /*margin-top: 25px;*/
                /*position: relative;*/
                /*display: -webkit-flex;*/
                /*display: flex;*/
                /*align-items: center;*/
                /*.left-line {*/
                    /*border-bottom: 1px solid #fff;*/
                    /*width: 123px;*/
                /*}*/
                /*.desc {*/
                    /*color: #fff;*/
                    /*font-size: 18px;*/
                    /*width: 200px;*/
                    /*text-align: center;*/
                /*}*/
                /*.right-line {*/
                    /*border-bottom: 1px solid #fff;*/
                    /*width: 123px;*/
                /*}*/
            /*}*/
            /*.username-pack, .password-pack {*/
                /*margin-top: 25px;*/
                /*margin-bottom: 10px;*/
                /*.svg-icon {*/
                    /*color: #fff;*/
                    /*font-size: 20px;*/
                /*}*/
            /*}*/
            /*.button-pack {*/
                /*margin-top: 25px;*/
            /*}*/
        /*}*/

        .version-pack {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            text-align: center;
        }
    }

</style>
