<template>
  <div class="container">
    <h1>{{info.SchoolName || '登录'}}</h1>
    <img :src="info.HeadImgUrl || headImg">
    <div class="content" ref="contentWrapper">
        <div>
        <group gutter="0" label-width="4em" label-margin-right="1em" label-align="right">
            <x-input title="账号" type="text" placeholder="请输入账号" v-model.trim="phone" ></x-input>
            <x-input type="password" title="密码" placeholder="请输入密码" v-model="password" ></x-input>
            <x-input type="text" title="验证码" placeholder="请输入验证码" v-model.number="code" class="weui-vcode">
                <x-button slot="right" class="code"  mini @click.native="getCode" :disabled="isWait">{{isWait ? count + 's' : text}}</x-button>
            </x-input>
        </group>
        <box gap="30px 15px 0">
            <x-button type="primary" @click.native="login">登录</x-button>
        </box>
        <!-- <button class="btn btn-primary" @click="login">登录</button> -->
        </div>
    </div>
    <div class="copyright" v-html="info.SchoolCopyright"></div>
    <!-- <div class="btn btn-success test" @click="testLogin">管理员测试登录</div> -->
  </div>
</template>

<script>
import headImg from '@/assets/images/head.png'
import { Group, XInput, Box, XButton } from 'vux'
import BScroll from 'better-scroll'
export default {
    name: 'Login',
    components: { Group, XInput, Box, XButton },
    data () {
        return {
            headImg,
            info: {}, // 学校信息
            phone: '', // 账号
            password: '', // 密码
            code: '', // 验证码
            isWait: false, // 验证是否等待中
            count: 60, // 验证码等待秒数
            timer: null, // 定时器
            text: '获取验证码' // 获取验证码文字
        }
    },
    created () {
        try {
            // token 没过期则返回首页
            localStorage.teacherToken && localStorage.teacherExpireTime && localStorage.teacherExpireTime > Date.now() && this.$router.replace('/')
        } catch (e) {}
        this.getInfo()
    },
    mounted () {
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.contentWrapper, {
                click: true
            })
        })
    },
    methods: {
        // 获取学校信息
        getInfo () {
            this.$api.platBaseApi.getFamilySchoolInfo().then(res => {
                if (res.data.Status) this.info = res.data.Data
            })
        },
        // 获取验证码
        getCode () {
            if (this.isWait) return false
            if (!this.phone) return this.$vux.toast.show({ type: 'warn', text: '请输入账号' })
            this.isWait = true
            this.waiting()
            const params = encodeURIComponent(this.phone)
            this.$api.platBaseApi.sendSMSVerifyCodeByUserName(params).then(res => {
                if (!res.data.Status) {
                    this.endWait()
                    this.$vux.toast.show({ type: 'warn', text: res.data.ResponseError.LongMessage })
                }
            }).catch(() => {
                this.endWait()
            })
        },
        // 验证码计时
        waiting () {
            this.timer = setInterval(() => {
                this.count--
                if (!this.count) this.endWait()
            }, 1000)
        },
        // 验证码结束计时
        endWait () {
            clearInterval(this.timer)
            this.text = '重新获取'
            this.isWait = false
            this.count = 60
        },
        // 登录
        login () {
            if (!this.phone) return this.$vux.toast.show({ type: 'warn', text: '请输入账号' })
            if (!this.password) return this.$vux.toast.show({ type: 'warn', text: '请输入密码' })
            if (!this.code) return this.$vux.toast.show({ type: 'warn', text: '请输入验证码' })
            this.$api.loginApi.login({
                UserName: this.phone,
                Password: this.password,
                ValidateCode: this.code,
                Client: 2,
                WxOpenId: this.$store.state.openId,
                UserType: 1,
                RealName: '',
                SchoolCode: this.$store.state.schoolCode
            }).then(res => {
                if (res.data.Status) {
                    const expireTime = new Date(res.data.Data.expireTime).getTime()
                    this.$store.commit('saveAccessToken', res.data.Data.token)
                    this.$store.commit('saveExpireTime', expireTime)
                    setTimeout(this.refreshToken, expireTime - Date.now())
                    this.$router.replace('/')
                } else {
                    this.$vux.toast.show({ type: 'warn', text: 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('saveAccessToken', Data.token)
                    this.$store.commit('saveExpireTime', refreshTime)
                    setTimeout(this.refreshToken, refreshTime - Date.now())
                }
            })
        },
        // 测试环境管理员登录
        testLogin () {
            this.$api.loginApi.getToken({
                UserName: 'lanyAdmin',
                Password: '7A90DDBB4FC3F89D51B40D8700309FFA',
                UserType: 1
            }).then(res => {
                if (res.data.Status) {
                    const expireTime = new Date(res.data.Data.expireTime).getTime()
                    this.$store.commit('saveAccessToken', res.data.Data.token)
                    this.$store.commit('saveExpireTime', expireTime)
                    setTimeout(this.refreshToken, expireTime - Date.now())
                    this.$router.replace('/')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .weui-cells input {
    height: auto;
    margin-bottom: 0;
    padding: 0;
    border: none;
    color: #333;
    padding-right: 30px;
}
/deep/ .weui-cells p {
    color: inherit;
    font-size: inherit;
    margin-bottom: 0;
}
h1 {
    font-size: 20px;
    text-align: center;
    padding: 30px 0 20px;
    margin: 0;
}
img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    display: block;
    margin: 0 auto 30px;
}
// .clear {
//     position: absolute;
//     top: 15px;
//     right: 15px;
// }
// main .code-number {
//     width: calc(100% - 100px);
// }
.code {
    // width: 100px;
    // float: right;
    min-width: 100px;
    text-align: center;
    color: #009688;
    padding: 0 6px;
    // &.active {
    //     color: inherit;
    // }
}
// button {
//     display: block;
//     width: 80%;
//     margin: 30px auto 0;
// }
.copyright {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
}
.test {
    position: fixed;
    top: 0;
    right: 0;
    width: auto;
    font-size: 12px;
}
</style>
