<style lang="less" scoped>
@import "./Index.less";
.footer-info-item {
    color: #b8b8b8;
    margin-right: 40px;
    font-size: 12px;
}
.login-title {
    text-align: left;
    color: #e0e0e0;
    font-size: 19px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 20px;
    letter-spacing: 1px;
    display: inline-block;
}
</style>
<style lang="less">
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.login {
    &-server {
        .ivu-select-selection,
        .ivu-btn {
            border-radius: 0;
            background-color: #0d253f;
            color: #e3e5e8;
            border: 0;
            span {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .ivu-select-arrow {
            font-size: 18px;
        }
        .ivu-select-dropdown {
            background-color: #091529;
            border-radius: 0;
        }
        .ivu-select-item,
        .ivu-dropdown-item {
            color: #ffffff;
            &:hover {
                background-color: transparent;
            }
        }
        .ivu-select-item-focus {
            background-color: transparent;
        }
    }
}
</style>

<template>
    <div id="login" class="login" :style="{backgroundImage:bgImg}">
        <div class="login-mark">
            <img height="42" src="@/assets/login/ies5_logo_2.svg">
            <span class="login-title">
                {{$t('system.title')}}
            </span>
        </div>
        <div calss="login-schoolName">
            {{ schoolName }}
        </div>

        <div class="login-body">
            <router-view />
        </div>

        <div class="login-footer">
            <a class="footer-info-item" href="https://beian.miit.gov.cn/" target="_blank">{{$t('login.beian1')}}</a>
            <a class="footer-info-item" v-if="srvAdr == 'China'" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010402000615">
                {{$t('login.beian2')}}
            </a>
            <span class="footer-info-item">&copy; {{$t('login.copyright')}}</span>
            <span class="footer-info-item">
                <Icon custom="iconfont icon-earth" size="20" />
                {{$t('login.title.ser')}} {{srvAdr == "China" ? $t('login.china') : $t('login.global')}}
            </span>
            <span class="footer-info-item" v-show="version">
                V{{version}}
            </span>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
    data() {
        return {
            schoolName: '',
            bgImg: '',
            version:''
        }
    },
    computed: {
        ...mapState({
            config: state => state.config
        }),
        ...mapGetters({
            srvAdr: 'config/getSrvAdr'
        })
    },
    methods: {
        chgLoginType: function () {
            this.qrloginFlag = !this.qrloginFlag
        },
        chgSerType: function (val) {
            if (this.config.srvAdr != val) {
                let isProduction = process.env.NODE_ENV == 'development' ? false : true
                if (isProduction) {
                    let toStation = this.config[val].domainUrl.find(function (item) {
                        return item.station == localStorage.getItem('station')
                    })
                    window.open(toStation.url);

                } else {
                    this.$store.dispatch('config/setSrvAdr', val)
                }
            }
        },
        setLoginSchoolCode: function () { // 設定預設的學校簡碼
            let schoolCode = this.$route.query.schoolcode == undefined ? '' : this.$route.query.schoolcode;
            if (schoolCode) {
                this.$api.login.getSchoolName({ schoolCode: schoolCode }).then(res => {
                    this.schoolName = res.name
                    sessionStorage.setItem('defaultSchool', encodeURIComponent(JSON.stringify({ code: res.code, name: res.name }), "utf-8"))
                })
            }
        },
    },
    created() {
        // 統一處理預設登入學校
        this.setLoginSchoolCode()
        this.$api.login.getSystemInfo({}).then(
            res => {
                console.log(res)
                if (res.version) {
                    localStorage.setItem('version', res.version)
                    this.version = res.version
                }
            }
        )
    },
    mounted() {

    },
    watch: {
        $route: {
            handler(n, o) {
                if (n.name == 'login') {
                    this.bgImg = `url(${require('@/assets/login/login_bg.jpg')})`
                } else if (n.name == 'loginTeacher') {
                    this.bgImg = `url(${require('@/assets/login/3-1.jpg')})`
                } else {
                    this.bgImg = `url(${require('@/assets/login/2-2.jpg')})`
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
