<template>
    <div class="login bodyBG">
        <CommonHeader></CommonHeader>
        <div class="login-box mobilepad20 colorF tc">
            <div class="animated zoomIn">
                <h2 class="mobile-title">{{$t('login.loginBox.title')}}</h2>
                <div class="mobile-presentation">
                    {{$t('login.loginBox.intro')}}
                </div>
            </div>
            <!--<q-btn unelevated rounded color="primary" :label="$t('login.loginBox.loginWord')" />-->
            <!--<a href="#/board" class="login-btn">-->
            <!--<a href="https://account.teammodel.cn/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJsb2dpbiIsImF1ZCI6ImNoZW5nZHVMb2dpbiIsImlzcyI6Imh0dHBzOi8vYXBpLmhhYm9va2FjbGFzcy5iaXoiLCJpYXQiOjE1MzYxMzUwNDcsIm5iZiI6MTUzNjEzNTA0NywiZXhwIjoxNTY3NTU1MjAwLCJpZHAiOiJIYWJvb2sgQ29yZVNlcnZpY2UifQ.F4AnkbJrMRoZvJ6SC-lqZEYIYSoq5x8lvX6_a3YqSgM&callback=http://localhost:5000/#/" class="login-btn">-->
            <span @click="handleLogin('login')" class="login-btn">
                {{$t('login.loginBox.loginWord')}}
                <!--<font-awesome-icon icon="long-arrow-alt-right"/>-->
                <font-awesome-icon icon="arrow-alt-circle-right" class="fr login-arrow" />
            </span>
            <!--<span @click="studenthandleLogin('login')" class="login-studentbtn">
                学生/参与者 加入课堂
                <font-awesome-icon icon="long-arrow-alt-right"/>
                <font-awesome-icon icon="arrow-alt-circle-right" class="fr login-arrow" />
            </span>-->
            <br>
            <!--&lt;!&ndash;&lt;!&ndash;<br>&ndash;&gt;&ndash;&gt;-->
            <!--<p><Button type="primary" @click="getTMDToken" ref="btnToken">获取醍摩豆token测试按钮</Button></p>-->
            <!--&lt;!&ndash;&lt;!&ndash;<br>&ndash;&gt;&ndash;&gt;-->
            <!--<p><Button type="primary" @click="TMDInfo">获取用户信息</Button></p>-->
        </div>
        <div class="footer-logo">
            <a href="/"><img src="../assets/img/logo.png" alt=""></a>
        </div>
        <CommonFooter></CommonFooter>
    </div>
</template>
<script>
    import CommonHeader from '@/components/Common/CommonHeader.vue'
    import CommonFooter from '@/components/Common/CommonFooter.vue'
    export default {
        components: {
            CommonHeader,
            CommonFooter
        },
        data() {
            return {
                callback: window.location.href,
                tokenRes: {},
                token: '',
                loginBack: {
                    ticket: '',
                    name: '',
                    teamModelId: ''
                }
            }
        },
        methods: {
            // 访问TW登录并回调
            handleLogin(types) {
                let that = this
                // let url = JSON.parse(localStorage.getItem("serviceUrl")).account+'?token='+localStorage.getItem("TWtoken")+'&callback='+that.callback;
                let url = 'https://account.teammodel.cn/' + '?callback=' + that.callback + 'callback'
                // console.log(url, '地址')
                // debugger;
                window.location.href = url
            },
            // 获取URL地址的指定参数
            getParamAsCH(paramName) {
                var paramValue = ''
                var isFound = false
                if (window.location.hash.indexOf('?') == 2 && window.location.hash.indexOf('=') > 1) {
                    var arrSource = decodeURI(window.location.hash).substring(1, window.location.hash.length).split('&')
                    var i = 0
                    while (i < arrSource.length && !isFound) {
                        if (arrSource[i].indexOf('=') > 0) {
                            if (arrSource[i].split('=')[0].toLowerCase() == paramName.toLowerCase()) {
                                paramValue = arrSource[i].split('=')[1]
                                isFound = true
                            }
                        }
                        i++
                    }
                }
                paramValue = unescape(paramValue)
                return paramValue
            },
            //学生跳转
            studenthandleLogin(){
                    this.$router.push({path: '/mobileindex'});
                },
            // 登录回调函数获取参数
            loginCallback() {
                // alert('111111');
                let that = this
                this.loginBack.teamModelId = that.getParamAsCH('id')
                this.loginBack.name = that.getParamAsCH('name')
                this.loginBack.ticket = that.getParamAsCH('ticket')
                localStorage.setItem('loginBack', JSON.stringify(this.loginBack))
                // this.loginInfo();
            },
            //判断终端
            _isMobile() {
                let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
                return flag;
            }
        },
        created() {
            // this.loginInfo();
        },
        mounted() {
            this.loginCallback()
            // this.getTMDToken();
            // this.TMDInfo();
            if (this._isMobile()) {
               
            } else {
                 this.$router.push('/')
            }
        }
    }
</script>
<style scoped>
    .login-studentbtn {
        margin-top:22%;
        display: inline-block;
        text-align: center;
        background: #fff;
        height: 42px;
        line-height: 42px;
        color: #666;
        font-size: 14px;
        border-radius: 6px;
        width: 55%;
        cursor: pointer;
        position: relative;
    }
    .login-btn {
        margin-top:30% !important;
    }
    .logo{
       line-height:2.5rem !important;
    }
    .mobile-title {
            font-size:2rem;
    }
    .mobile-presentation {
        width:100%;
        font-size:0.9rem;
        padding:1% 20%;
    }
    .footer-logo {
        left:140px !important;
        bottom:50px !important;
    }
</style>
