<style lang="less" scoped>
@import "./Index.less";
.footer-info-item {
    color: white;
    margin-right: 40px;
    font-size: 15px;
}
</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 width="125" src="@/assets/login/1-2.png">
        </div>
        <div calss="login-schoolName">
            {{ schoolName }}
        </div>
        <div class="login-server">
            <h5>{{ $t('login.title.ser') }}</h5>
            <Dropdown trigger="click" @on-click="chgSerType">
                <a href="javascript:void(0)">
                    <Button style="width:120px;">

                        <span>
                            {{ $t('login.serAdress.' + config.srvAdr) }}
                        </span>

                        <Icon type="ios-arrow-down"></Icon>
                    </Button>
                </a>
                <DropdownMenu slot="list" style="width:120px">
                    <DropdownItem name="China">{{ $t('login.serAdress.China') }}</DropdownItem>
                    <DropdownItem name="Global">{{ $t('login.serAdress.Global') }}</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </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">蜀ICP备18027363号-1</a>
            <a class="footer-info-item" v-if="srvAdr == 'China'" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010402000615">
                川公网安备 51010402000615
            </a>
            <span class="footer-info-item">&copy; 2021 HABOOK Group 网奕中国 版权所有</span>
            <span class="footer-info-item">
                <Icon custom="iconfont icon-earth" size="20" />
                数据中心位置 中国
            </span>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            schoolName: '',
            bgImg:''
        }
    },
    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.bgImg = `url(${require('@/assets/login/1-1.jpg')})`             
    },
    watch: {
        $route: {
            handler(n, o) {
                if (n.name == 'login') {
                    this.bgImg = `url(${require('@/assets/login/1-1.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')})` 
                }
                console.log(n)
            },
            deep: true,
            immediate:true
        }
    }
}
</script>
