<template>
    <div class="register">
        <m-header v-if="headerStatus" />

        <van-cell-group :border="false">
            <van-field @blur="codeBlur" :border="false" v-model="form.username" type="text" label="您的用户名" placeholder="请输入用户名" />
            <!-- <van-field name="radio" label="您的性别">
                <template #input>
                    <van-radio-group v-model="form.gender" direction="horizontal">
                        <van-radio :name="1">男</van-radio>
                        <van-radio :name="0">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field> -->
            <van-field @blur="codeBlur" maxlength="20" :border="false" v-model="form.password" type="password" label="设置登录密码" placeholder="请输入密码" />
            <van-field @blur="codeBlur" maxlength="20" :border="false" v-model="form.tPassword" type="password" label="再次输入登录密码" placeholder="请输入密码" />
            <van-button round size="large" @click="onCodeLogin">登录</van-button>
        </van-cell-group>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import { userSetPassword } from '@/api/app'
import { browser }  from '@/common/common'
export default {
    name: 'register',
    components: { MHeader },
    data() {
        return {
            headerStatus: true,
            groupId: this.$route.query.groupId,
            countDownStatus: true, // 到计时状态
            codeText: '获取验证码',
            countDownTime: 1000 * 120, // 倒计时时间
            form: {
                username: null,
                gender: 1,
                password: null,
                tPassword: null,
            },
            isClick: false
        }
    },
    mounted() {
        // 登录时删除无用的token
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        if(browser().android || browser().iPhone) {
            this.headerStatus = false
        } else {
            document.title = '注册'
        }
    },
    methods: {
        codeBlur() {
            setTimeout(() => {
                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        },
        async onCodeLogin() { // 短信登录
            let form = this.form
            let nameReg = /^[\u4E00-\u9FA5]+$/
            if(!form.username) {
                 this.$toast('请输入用户名')
                 return
            } else if(!nameReg.test(form.username)) {
                 this.$toast('用户名必须为中文')
                 return
            } else if(form.username.length < 2 || form.username.length > 15) {
                 this.$toast('用户名必须为2~15个字')
                 return
            }

            if(!form.password || form.password && (form.password.length < 6 || form.password.length > 20)) {
                this.$toast('请输入6-20位数字/字母密码')
                return
            }

            if(form.password != form.tPassword) {
                this.$toast('两次输入密码不一致，请重新输入')
                return
            }

            if(this.isClick) {
                return
            }
            this.isClick = true
            // userSetPassword
            let params = {
                username: form.username,
                password: form.password
            }

            await userSetPassword(params).then(sms => {
                let s = sms.data
                this.isClick = false
                // 保存用户信息
                if(s.code == 200) {
                    // let auth = s.data.authentication
                    // localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
                    this.$router.push({
                        path: '/classDetail',
                        query: {
                            groupId: this.groupId
                        }
                    })
                } else {
                    this.$toast(s.msg)
                }
            })
            // queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
            //     let result = res.data
            //     if(result.code == 200) {
            //         this.isRegister = result.data
            //     }
            //     this.onLogin()
            // })
        },
        onFinished() { // 倒计时结束
            this.countDownStatus = true
            this.$refs.countdown.reset()
        },
        checkPhone(phoneNumber) {
            let result = true
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber))){ 
                this.$toast('手机号输入有误')
                result = false
            }
            return result
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");

.register {
    min-height: 100vh;
    background: #fff;
}
// .container {
//     padding: .4rem .28rem 0;
//     .title {
//         font-size: .16rem;
//         color: #444;;
//         padding-bottom: .1rem;
//     }
// }
// .input-group {
//     position: relative;
//     height: .44rem;
//     border-radius: .5rem;
//     border: .02rem solid @whiteColor;
//     margin-bottom: .2rem;
//     padding-left: .3rem;
//     padding-right: .3rem;
//     display: flex;
//     align-items: center;
//     .input {
//         flex: 1;
//         font-size: .14rem;
//         color: @whiteColor;
        
//         background: transparent;
//         border: none;
//         &::placeholder {
//             color: @whiteColor;
//         }
//     }
//     .code-text {
//         position: absolute;
//         right: 0;
//         flex: 1;
//         display: block;
//         width: .94rem;
//         text-align: center;
//         border-left: .02rem solid @whiteColor;
//         font-size: .14rem;
//         color: @whiteColor;
//         line-height: .3rem;
//         height: .3rem;
//     }
// }
.van-button--plain.van-button--primary {
    color: #14928A;
    border-color: #14928A;
}
/deep/.van-cell-group {
    margin: .3rem .28rem 0;
}
/deep/.van-cell {
    display: block;
    padding: .05rem 0;
    margin-bottom: .1rem;
    border-bottom: 1px solid #EBEBEB;
    .van-field__label {
        font-size: .16rem;
        color: #444;
        padding-bottom: .05rem;
        width: 100%;
    }
    .van-field__value {
        font-size: .16rem;
    }
}
/deep/.van-count-down {
    font-size: .14rem;
    color: #14928A;
    padding: .02rem .08rem;
    border-radius: 1rem;
    border: 1px solid #14928A;
}
/deep/.van-button--large {
    height: .44rem;
    line-height: .42rem;
    color: #FFFFFF;
    border: 0;
    background: #14928A;
}
/deep/.van-button:active::before {
    opacity: 0.05;
}
/deep/.van-button--disabled {
    opacity: 1;
    color: rgba(255, 255, 255, 0.4);
}
.login-change {
    padding-top: .08rem;
    font-size: .14rem;
    color: @whiteColor;
    float: right;
}
</style>