<template>
    <div class="login-page">
        <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.19.2 山东万腾提供技术支持</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;
        .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>
