<template>
    <v-container>
        <div class="wrapper">
            <div class="login-form">
                <h4 class="title">账号登录</h4>
                <el-form>
                    <el-form-item>
                        <el-input placeholder="请输入账号" v-model.trim="userName" >
                            <i slot="prefix" class="iconfont">&#xe60a;</i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入密码" type="password" v-model="password">
                            <i slot="prefix" class="iconfont">&#xe638;</i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="flex">
                            <el-input placeholder="验证码" class="flex-1" v-model.trim="smsCode">
                                <i slot="prefix" class="iconfont">&#xe60c;</i>
                            </el-input>
                            <el-button plain class="code-btn"  @click="handleGetSMSCodeClick" :disabled="isOpenCutDown">{{ isOpenCutDown ? count : checkCodeBtnText }}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="remember">记住用户名</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="login-btn" @click="login" >登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <div class="other-title"><span>其他登录方式</span></div>
                        <div class="flex type">
                            <div class="item" v-for="(item,i) in loginType" :key="i" @click="otherLogin(i)">
                                <i  class="iconfont" v-html="item.icon"></i>
                                <p>{{ item.label }}</p>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </v-container>
</template>
<script>
export default {
    name: 'Login',
    props: {},
    components: {
        VContainer: () => import('./../components/VContainer')
    },
    data () {
        const userName = localStorage.remember || ''
        const host = process.env.API_ROOT
        return {
            userName,
            password: '',
            smsCode: '',
            count: 60,
            timer: null,
            checkCodeBtnText: '获取验证码',
            isOpenCutDown: false,
            remember: !!localStorage.remember,
            loginType: [
                { label: '微信登录', icon: '&#xe663;', href: `${host}/api/OtherLogin/Wechat` },
                // { label: '企业微信登录', icon: '&#xe662;', href: `${host}/api/OtherLogin/WorkWeixin` },
                { label: '企业微信登录', icon: '&#xe662;', href: 'https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=ww7381f0ce1883394b&state=387&usertype=admin&redirect_uri=https%3a%2f%2fgateway.vschool100.cn%2fapi%2fWorkWeixinApi%2fEduSSO' }
            ]
        }
    },
    created () {
        try {
            // token 没过期则返回首页
            localStorage.token && localStorage.expireTime && localStorage.expireTime > Date.now() && this.$router.replace('/')
        } catch (e) {}
    },
    mounted () {
        document.onkeydown = e => {
            if (window.event.keyCode === 13) { this.login() }
        }
    },
    beforeDestroy () {
        if (this.timer) clearInterval(this.timer)
    },
    methods: {
        endCountDown () {
            clearInterval(this.timer)
            this.checkCodeBtnText = '重新获取'
            this.isOpenCutDown = false
            this.count = 60
        },
        // 获取验证码
        handleGetSMSCodeClick () {
            if (this.isOpenCutDown) return false
            if (!this.userName) return this.$message.warning('请输入账号')
            this.isOpenCutDown = true
            this.timer = setInterval(() => {
                this.count--
                if (this.count === 0) this.endCountDown()
            }, 1000)
            const params = encodeURIComponent(this.userName)
            this.$api.platBaseApi.sendSMSVerifyCodeByUserName(params).then(res => {
                if (!res.data.Status) {
                    this.endCountDown()
                    this.$message.error(res.data.ResponseError.LongMessage)
                }
            }).catch(() => {
                this.endCountDown()
            })
        },
        otherLogin (i) {
            let { href } = this.loginType[i]
            window.location.href = href
        },
        // 登录
        login () {
            if (!this.userName) return this.$message.warning('请输入账号')
            if (!this.password) return this.$message.warning('请输入密码')
            if (!this.smsCode) return this.$message.warning('请输入验证码')
            this.$api.loginApi.login({
                UserName: this.userName,
                Password: this.password,
                ValidateCode: this.smsCode,
                Client: 1,
                WxOpenId: '',
                UserType: 1,
                RealName: '',
                SchoolCode: ''
            }).then(res => {
                if (res.data.Status) {
                    if (this.timer) clearInterval(this.timer)
                    const expireTime = new Date(res.data.Data.expireTime).getTime()
                    this.$store.commit('saveToken', res.data.Data.token)
                    this.$store.commit('saveExpireTime', expireTime)
                    setTimeout(this.refreshToken, expireTime - Date.now())
                    localStorage.remember = this.remember ? this.userName : ''
                    this.$router.replace('/')
                } else {
                    this.$message.error(res.data.ResponseError.LongMessage)
                }
            })
        },
        // 刷新 token
        refreshToken () {
            this.$api.loginApi.refreshToken().then(res => {
                const { Status, Data } = res.data
                if (Status) {
                    const refreshTime = Data.refreshTime - 8 * 60 * 60 * 1000
                    this.$store.commit('saveToken', Data.token)
                    this.$store.commit('saveExpireTime', refreshTime)
                    setTimeout(this.refreshToken, refreshTime - Date.now())
                }
            })
        }
    }

}
</script>
<style lang="less" scoped>
@import '~styles/varibles.less';
@inputHeigth: 40px;
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    background: url('@{staticFileDomain}/Common/login/bg.png') no-repeat;
    background-size: 100% 100%;
    .login-form {
        position: absolute;
        top: 48%;
        right: 10%;
        transform: translateY(-50%);
        display: inline-block;
        background: #fff;
        // box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.2),  -4px 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
        width: 350px;
        padding: 0 27px 20px;
        border-radius: 3px;
        .title {
            line-height: 44px;
            padding: 12px 0;
            text-align: center;
            color: #000;
            font-size: 22px;
        }
        /deep/.el-form {
            .el-form-item  {
                margin-bottom: 10px;
                .el-form-item__content {
                        line-height: @inputHeigth;
                    .el-input {
                        .el-input__inner {
                            height: @inputHeigth;
                            line-height: @inputHeigth;
                            // border: 1px solid #cfcfcf;
                            padding-left: 40px
                        }
                        .el-input__prefix {
                            margin: 0 6px;
                        }
                    }
                    .code-btn {
                        margin-left: 10px;
                        width: 115px;
                    }
                    .login-btn {
                        font-size: 16px;
                        width: 100%;
                        height: 40px;
                    }
                    .other-title {
                        position: relative;
                        height: 20px;
                        line-height: 20px;
                        span {
                            position: absolute;
                            left: 50%;
                            top: 0;
                            transform: translateX(-50%);
                            color: #AAAAAA;
                            font-size: 14px;
                            padding: 0 10px;
                            background: #fff;
                            z-index: 1;
                        }
                            &.other-title:after {
                            content: '';
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 100%;
                            border: 1px dotted #AAAAAA;
                        }
                    }
                    .type {
                        justify-content: center;
                        margin-top: 10px;
                        .item + .item { margin-left: 10px; }
                        .item {
                            cursor: pointer;
                            text-align: center;
                            line-height: 1;
                            .iconfont {
                                color: #AAAAAA;
                                font-size: 50px;
                            }
                            p {
                                    color: #AAAAAA;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
