<template>
    <div class="login bodyBG">
        <CommonHeader></CommonHeader>
        <div class="login-box pad20 colorF tc">
            <div class="animated zoomIn">
                <h2>{{$t('login.loginBox.title')}}</h2>
                <div class="intro">
                    {{$t('login.loginBox.intro')}}
                </div>
            </div>
            <!--<q-btn unelevated rounded color="primary" :label="$t('login.loginBox.loginWord')" />-->
            <!--<a href="#/board" 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">
            {{$t('login.loginBox.StudentEntrance')}}
            <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>
        <!--浏览器检测-->
        <q-dialog v-model="confirm" persistent>
            <q-card>
                <q-card-section class="row items-center">
                    <span class="q-ml-sm"><span class="remind">提醒：<br/></span><span class="remindtext">当前浏览器不是谷歌浏览器，为了您更好的体检，建议使用谷歌浏览器体验！</span></span>
                </q-card-section>
                <q-card-actions align="right">
                    <q-btn flat label="取消" color="primary" v-close-popup />
                    <q-btn flat label="去下载" color="primary" @click="todownload" />
                </q-card-actions>
            </q-card>
        </q-dialog>
        <!--浏览器检测end-->
    </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: ''
                },
                confirm:false,
            }
        },
        methods: {
            // 获取用户信息
            loginInfo() { // 获取台湾token
                let that = this
                // if(!localStorage.getItem('TWtoken')){
                let deviceId = localStorage.getItem('deviceId') ? localStorage.getItem('deviceId') : '' + this.common.guid()
                that.$api.getLoginInfo(
                    {
                        'jsonrpc': '2.0',
                        'method': 'Regist',
                        'params': {
                            'deviceId': deviceId,
                            'clientId': '931dee8c-74be-4c9b-a602-c74583b0e985',
                            'verificationCode': 'cc13f9c6-54a1-4ce9-a3d9-8952c335983e',
                            'verificationCodeVer': '46662dcbd6a6421f9d45d1857ebdec95',
                            'productCode': 'LZLL6ZEI',
                            'extraInfo': {}
                        },
                        'id': 1
                    }

                ).then(res => {
                    localStorage.setItem('deviceId', deviceId)
                    that.tokenRes = res.result
                    that.token = res.result.token
                    if (that.token) {
                        if (!localStorage.getItem('token')) {
                        }
                        localStorage.setItem('TWtoken', that.token)
                        localStorage.setItem('serviceUrl', JSON.stringify(res.result.serviceUrl))

                    } else {
                        that.$Message.warning('服务器错误！未返回token')
                    }
                }).catch(res => {
                })
                // }
            },
            getTMDToken() { // 获取醍摩豆TOKEN
                let that = this
                if (!localStorage.getItem('TMDtoken')) {
                    that.$api.TeamModelLogin(
                        {
                            'params': {
                                'ticket': that.loginBack.ticket,
                                'name': that.loginBack.name,
                                'teamModelId': that.loginBack.teamModelId,
                                'Token': localStorage.getItem('TWtoken'),
                                'ServiceUrl': JSON.parse(localStorage.getItem('serviceUrl')).api
                            },
                            'method': 'api/login/TeamModelLogin',
                            'lang': 'zh-CN'
                        }

                    ).then(res => {
                        let TMDtoken = res.result.data.access_token
                        if (TMDtoken) {
                            // alert(125654,TMDtoken)
                            if (!localStorage.getItem('TMDtoken')) {
                                // let decode = that.$jwtDecode( that.token);//解析返回的token
                                localStorage.setItem('TMDtoken', TMDtoken)
                            }
                            that.$Message.success('成功返回醍摩豆token!')
                        } else {
                            that.$Message.warning('服务器错误！未返回token')
                        }
                    }).catch(res => {
                        console.log(res)
                    })
                }
            },
            TMDInfo() { // 获取醍摩豆TOKEN
                let that = this
                if (!localStorage.getItem('userInfo')) {
                    that.$api.TeamModelInfo(
                        {
                            'params': {}

                        }

                    ).then(res => {
                        localStorage.setItem('userInfo', JSON.stringify(res.result.data))
                    }).catch(res => {

                    })
                }
            },
            // 访问TW登录并回调
            handleLogin(types) {
                let that = this
                //let url = 'https://account.teammodel.cn/' + '?callback=' + that.callback + 'callback'
                let stateNum = Math.floor(Math.random() * (9999 - 1000)) + 1000
                let urls = window.location.href
                let skipUrl = urls.indexOf("localhost") != -1 ? 'https://account-rc.teammodel.cn/oauth2/authorize/' :'https://account.teammodel.cn/oauth2/authorize/'
                let url = skipUrl + '?response_type=code&client_id=227082f4-8db0-4517-b281-93dba9428bc7&state=' + stateNum + '&nonce=habook&redirect_uri=' + this.callback+'callback'
                window.location.href = url
            },
            //学生跳转
            studenthandleLogin() {
                this.$router.push({ path: '/mobileindex' });
            },
            //生成随机数
            stateNum(min, max) {
                    return ;
            },
            // 获取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
            },
            // 登录回调函数获取参数
            loginCallback() {
                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;
            },
            //判断浏览器
            browser() {
                var isChrome = navigator.userAgent.indexOf('Chrome') > -1  // 是否是谷歌 
                if (!isChrome) { this.confirm = true}
                console.log('谷歌' + isChrome)
            },
            todownload() {
                //alert('点击了确定')
                window.open("https://www.google.cn/intl/zh-CN/chrome/")
                this.confirm = false
            }
        },

        created() {
            // this.loginInfo();
        },
        mounted() {
            this.loginCallback()
            if (this._isMobile()) {
                this.$router.push('/moblielogin')
            } else {

            }
            this.browser();
        }
    }
</script>
<style scoped>
    .login-studentbtn {
        margin-top: 20%;
        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;
    }

    @media only screen and (max-width: 768px) {
        h2 {
            line-height: 2.5rem;
        }
    }
    .remind {
        font-size: 22px;
        font-weight: bold;
        color: #3366FF;
    }
    .remindtext {
        font-size:14px;
    }
</style>
