<style lang="less" scoped>
@import "./Index.less";
</style>

<style lang="less">
.loginBox {
    .loginForm {
        .formItem {
            input,
            select {
                border-radius: 0;
                font-size: 12px;
            }
            .ivu-select-selection {
                border-radius: 0;
            }
        }
        .schoolAutoComplete {
            height: 170px;
            .schoolsBox {
                border-bottom: 1px solid #e9e9e9;
                padding: 5px 5px 5px 15px;
                .area {
                    font-size: 12px;
                    padding: 5px;
                }
            }
        }
        .ivu-select-dropdown {
            border-radius: 0;
        }
    }
}
.identityModal {
    .ivu-modal {
        .ivu-modal-content {
            background-color: #2a292e;
            padding: 12px;
            border: 1px solid #ccc;
            .ivu-modal-header,
            .ivu-modal-footer {
                border: 0;
            }
            .ivu-modal-footer {
                padding: 0;
            }
            .ivu-modal-header {
                padding: 5px 16px;
                p {
                    color: whitesmoke;
                }
            }
            .identity-body {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .ivu-btn {
                    background-color: #1cc0f2;
                    color: white;
                    font-weight: bold;
                    border: 0;
                    padding: 0 22px;
                }
            }
        }
    }
}
.demo-spin-col .ivu-spin-main {
    background-color: transparent;
    padding: 0;
}
.login-main-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 600px;
    flex-direction: row;
    align-items: center;
    margin-top: -50px;
}

.login-main-img {
    width: 100%;
    height: auto;
}
.login-enter-wrap {
    width: 45%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 0px;
    margin-left: 2%;
}
.enter-box {
    width: 150px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.enter-type-btn {
    width: 136px;
    margin-left: 5px;
    background-image: url("./../../assets/login/1-7.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 42px;
    margin-top: 30px;
    font-size: 26px;
    line-height: 42px;
    color: white;
    text-align: center;
}
.icon-to-img {
    display: block;
    color: white;
    font-size: 200px;
}
.login-img-wrap {
    width: 45%;
    max-width: 760px;
    height: 500px;
    padding: 12px;
    margin-right: 5%;
    margin-top: -20px;
}
.swiper-item-box {
    // margin-top: -20px;
    width: 100%;
    min-height: 500px;
    padding: 20px 40px;
    background: rgba(28, 34, 50, 0.5);
    .title {
        font-size: 40px;
        color: #fff;
        line-height: 1.1;
        letter-spacing: 1px;
        font-weight: 600;
    }
    .cont {
        margin-top: 30px;
        margin-left: 15px;
    }
    .cont-title {
        font-size: 26px;
        color: #fff;
        line-height: 1.1;
        font-weight: 500;
        margin-bottom: 7px;
        letter-spacing: 1px;
    }
    .cont-text {
        font-size: 16px;
        margin-bottom: 3px;
        color: #9e9e9e;
        letter-spacing: 1px;
        &::before {
            content: "|";
            margin-right: 11px;
            font-weight: 900;
        }
    }
    .border1::before {
        color: #de5c53;
    }
    .border2::before {
        color: #fcdc6b;
    }
    .border3::before {
        color: #25ca92;
    }
    .border4::before {
        color: #3eaefe;
    }

    .link {
        margin-top: 50px;
        color: #57a3f3;
        cursor: pointer;
    }
}
.logintype {
    .title {
        display: block;
        margin-bottom: 17px;
        letter-spacing: 1px;
        color: #9e9e9e;
        font-size: 13px;
    }
    .login-box {
        min-width: 520px;
        background-color: rgba(66, 69, 81, 0.9);
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        border-left: 5px solid #3dadff;
        border-radius: 5px;
        border-right: 5px solid #3dadff;
        margin-bottom: 15px;
        cursor: pointer;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        &:hover {
            background-color: rgba(75, 79, 96, 0.9);
        }
    }
    .login-box-icon {
        width: 20%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-right: 1px solid #616161;
    }
    .login-box-cont {
        width: 80%;
        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 17px;
    }
    .main {
        color: #bdbdbd;
        font-size: 12px;
    }
    .subtitle {
        display: block;
        font-size: 30px;
        color: #fff;
        font-weight: 600;
        margin-bottom: 6px;
    }
}
.login-img-wrap .ivu-carousel-arrow .ivu-icon {
    line-height: 36px;
}
</style>

<template>
    <div class="login-main-wrap">
        <div class="login-img-wrap">
            <!-- <img src="@/assets/login/1-3.png" class="login-main-img"> -->
            <!-- 轮播区域 -->
            <Carousel v-model="curPage" radius-dot loop dots="inside" arrow="hover">
                <CarouselItem>
                    <div class="swiper-item-box">
                        <div class="title">
                            {{$t('login.welcome1')}}
                            <br>
                            {{$t('login.welcome2')}}
                        </div>
                        <div class="cont">
                            <div class="cont-title">
                                {{$t('login.subtitle1')}}
                            </div>
                            <p class="cont-text border1">
                                {{$t('login.teachText1')}}
                            </p>
                            <p class="cont-text border2">
                                {{$t('login.teachText2')}}
                            </p>
                            <p class="cont-text border3">
                                {{$t('login.teachText3')}}
                            </p>
                            <p class="cont-text border4">
                                {{$t('login.teachText4')}}
                            </p>
                        </div>
                        <div class="cont">
                            <div class="cont-title">
                                {{$t('login.subtitle2')}}
                            </div>
                            <p class="cont-text border1">
                                {{$t('login.iesText1')}}
                            </p>
                            <p class="cont-text border2">
                                {{$t('login.iesText2')}}
                            </p>
                            <p class="cont-text border3">
                                {{$t('login.iesText3')}}
                            </p>
                            <p class="cont-text border4">
                                {{$t('login.iesText4')}}
                            </p>
                        </div>
                        <div class="link">
                            <a style="color:#57a3f3" target="_block" :href="tmdurl">
                                {{$t('login.toOfficial')}}
                                <i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 19px;"></i>
                            </a>
                        </div>
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
        <div class="login-enter-wrap">
            <div class="logintype">
                <span class="title">{{$t('login.chooseTips')}}</span>
                <div class="login-box" @click="loginTo('teacher')">
                    <div class="login-box-icon"><img width="40" src="@/assets/login/icon_teacher.svg"></div>
                    <div class="login-box-cont">
                        <div class="main">
                            <span class="subtitle">
                                {{$t('login.teacherIden')}}
                            </span>
                            {{$t('login.teacherText')}}
                        </div>
                        <i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 35px; color: rgb(189, 189, 189);"></i>
                    </div>
                </div>
                <div class="login-box" @click="loginTo('student')">
                    <div class="login-box-icon"><img width="40" src="@/assets/login/icon_student.svg"></div>
                    <div class="login-box-cont">
                        <div class="main">
                            <span class="subtitle">
                                {{$t('login.studentIden')}}
                            </span>
                            {{$t('login.studText')}}
                        </div>
                        <i class="ivu-icon ivu-icon-ios-arrow-forward" style="font-size: 35px; color: rgb(189, 189, 189);"></i>
                    </div>
                </div>
                <div class="link" style="text-align: right; letter-spacing: 1px;"><span style="margin-right: 20px;">
                        {{$t('login.noAccout')}}
                    </span>
                    <a href="/regist" class="" style="text-decoration: underline; color: rgb(41, 114, 169);">
                        {{$t('login.freeReg')}}
                    </a>
                </div>
            </div>
            <!-- <div class="enter-box" @click="loginTo('teacher')">
                <img style="display: block;width: 100%;" src="@/assets/login/1-5.png">
                <p class="enter-type-btn">
                    教师端
                </p>
            </div>
            <div class="enter-box" @click="loginTo('student')">
                <img style="display: block;width: 100%;" src="@/assets/login/1-4.png">
                <p class="enter-type-btn">
                    学生端
                </p>
            </div> -->
        </div>
        <!-- 提示視窗 -->
        <Modal v-model="identityFlag" width="360" :mask-closable="false" :closable="false" class-name="identityModal">
            <p slot="header">{{ $t('login.modal.title') }}</p>
            <div class="identity-body">
                <Button size="large" @click="goWhere('teacher')">{{ $t('login.modal.btn1') }}</Button>
                <Button size="large" @click="goWhere('student')">{{ $t('login.modal.btn2') }}</Button>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
import { User } from '@/service/User'

export default {
    data() {
        return {
            curPage: 0,
            defaultSchool: {
                name: '',
                code: ''
            },
            userOauth: {
                code: '',
                state: ''
            },
            identityFlag: false,
            lang: localStorage.getItem('local')
        }
    },
    computed: {
        
        tmdurl: function () {
            let twUrl = 'https://www.habook.com/zh-tw/news.php?act=view&id=408'
            let cnUrl = ' https://www.habook.com.cn/news.php?act=view&id=331'
            let enUrl = 'https://www.habook.com/en/news.php?act=view&id=408'

            return this.lang === 'zh-tw' ? twUrl : this.lang === 'zh-cn' ? cnUrl : enUrl
        }
    },
    created() {
        // 取得學校設定簡碼
        this.setDefSchool()

        //TEAMModelID 社群登入資訊
        this.userOauth.code = this.$route.query.code == undefined ? '' : this.$route.query.code;
        this.userOauth.state = this.$route.query.state == undefined ? '' : this.$route.query.state;

        // 社群帳號登入
        if (this.userOauth.code != '' & this.userOauth.state != '') {
            this.putUserCode()
        } else if (this.userOauth.code != '') { // 大雲快速登入
            this.SSOLogin(this.userOauth.code)
        }
    },
    methods: {
        putUserCode: function () { //如果第三方登入會啟動的function
            this.$Spin.show(); //開啟加載畫面
            let redirect_uri = window.location.origin + '/login'
            this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res => {
                this.$Spin.hide(); //關閉加載畫面
                this.loginProcess(res, this.defaultSchool.code)
            })
        },
        SSOLogin: function (code) { // 快速登入
            this.$Spin.show(); //開啟加載畫面
            this.$api.SSOLogin(code).then(async res => {
                this.$Spin.hide(); // 關閉加載畫面
                if (!res.error) {
                    // 登入大雲開始
                    this.loginProcess(res, this.defaultSchool.code)
                } else {
                    this.$Message.warning(this.$t('login.sse.error.text1'));
                }

                this.$router.push({ name: 'login' })
            })
        },
        loginProcess: async function (item, schoolCode) { // 登入用function
            let result;

            await this.$api.login.loginIES(item, schoolCode).then(res => {
                result = res
            })
            console.log('////', result)
            //設定權限並登入
            let identity = localStorage.getItem('identity')
            User.login(result).then(res => {
                if (res && identity) {
                    this.saveUserCodes({
                        TEAMModelId: result.id,
                        name: result.name,
                        schoolCode: result.defaultschool
                    })
                    let path = identity == 'student' ? '/studentWeb' : '/home'
                    this.$router.push({ path: path })
                } else {
                    this.identityFlag = true;
                }
            })
        },
        saveUserCodes: function (res) {
            this.$store.commit('setUserInfo', res)
        },
        setDefSchool: function () {
            let defschool = sessionStorage.defaultSchool
            if (defschool) {
                defschool = JSON.parse(decodeURIComponent(defschool), "utf-8")
                this.defaultSchool.code = defSchool.code
                this.defaultSchool.name = defSchool.name
            }
        },
        goWhere: function (identity) {
            localStorage.setItem('identity', identity)
            let path = identity == 'student' ? '/studentWeb' : '/home'
            this.$router.push({ path: path })
        },
        loginTo: function (identity) {
            let pathname = identity == 'student' ? 'loginStudent' : 'loginTeacher'
            this.$router.push({ name: pathname })
        }
    }
}
</script>