<template>
    <div>
        <div class="reg-container">
            <div class="title">
                注册
            </div>
            <div class="body">
                <div class="form">
                    <div class="form-item clearfix">
                        <img class="icon" src="../assets/phone.png">
                        <input type="text" v-validate="'required'" :class="{'is-danger':errors.has('username')}" name="username" class="form-control input" placeholder="请输入手机号或邮箱" v-model="formData.username">
                        <span v-show="errors.has('username')" class="help is-danger">请输入手机号或邮箱</span>
                    </div>
                    <div class="form-item clearfix">
                        <img class="icon" src="../assets/idencode.png">
                        <div class="input-group">
                            <input type="text" v-validate="'required'" :class="{'is-danger':errors.has('captche')}" name="captche" class="form-control" placeholder="请输入验证码" v-model="formData.captche">
                            <span class="input-group-btn">
                                <button class="btn" :class="{'btn-primary':!countdown,'btn-default':countdown}" :disabled="countdown" type="button" @click="getCaptche">{{countdown ? '倒计时('+second+')' : '获取验证码'}}</button>
                            </span>
                        </div>
                        <span v-show="errors.has('captche')" class="help is-danger">请输入验证码</span>
                    </div>
                    <div class="form-item clearfix">
                        <img class="icon" src="../assets/password.png">
                        <input type="password" v-validate="'required'" :class="{'is-danger':errors.has('password')}" name="password" class="form-control input" placeholder="请输入密码" v-model="formData.password">
                        <span v-show="errors.has('password')" class="help is-danger">请输入密码</span>
                    </div>
                    <div class="form-item clearfix">
                        <img class="icon" src="../assets/invite-code.png">
                        <input type="text" v-validate="'required'" :class="{'is-danger':errors.has('invcode')}" name="invcode" class="form-control input" placeholder="请输入邀请码" v-model="formData.invitation_code">
                        <span v-show="errors.has('invcode')" class="help is-danger">请输入邀请码</span>
                    </div>
                    <div class="clearfix operate" style="padding-top:10px;">
                        <button class="btn btn-danger" style="width:120px" @click="regist">立即注册</button>
                    </div>
                    <div class="tologin">
                        已有账号？<router-link to="/login">立即登录</router-link>
                    </div>
                    <div class="checkbox" style="margin-top:14px;margin-bottom:0;line-height:1;padding-left:36px;text-align:left;">
                        <label>
                            <input type="checkbox" v-validate="'required'" name="mustread" style="margin-top:1px;"> 我已阅读并同意《专业翻译条款》
                        </label>
                        <span v-show="errors.has('mustread')" class="help is-danger">请勾选</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                formData:{},
                countdown:false,
                second:3
            }
        },
        methods:{
            getCaptche(){
                this.beginCountDown();
                var form = new FormData();
                form.append('mobile',this.formData.username);
                form.append('type','register');
                //获取验证码
                this.$http.post('apiv1/getcodes',form).then(res => {
                    if(res.body.code == '200'){
                        this.$notify({
                            title: '成功',
                            message: '验证码'+res.body.captche,
                            type: 'success'
                        });
                    }
                },res => {
                    console.log(res.body);
                });
            },
            beginCountDown(){
                if(!this.countdown){
                    this.countdown = true;
                }
                if(this.second === 0){
                    this.countdown = false;
                    this.second = 3;
                    return;
                }else{
                    this.second -= 1;
                }
                var self = this;
                setTimeout(function(){
                    self.beginCountDown();
                },1000);
            },
            regist(){
                this.$validator.validateAll().then(() => {
                    var form = new FormData();
                    form.append('password',this.formData.password);
                    var reg = new RegExp("^[0-9]*$");
                    if(reg.test(this.formData.username)){
                        form.append('mobile',this.formData.username);
                    }else{
                        form.append('email',this.formData.username);
                    }
                    form.append('captche',this.formData.captche);
                    form.append('invitation_code',this.formData.invitation_code);
                    //注册
                    this.$http.post('apiv1/tmembers',form).then(res => {
                        if(!res.body.code || res.body.code == 200){
                            this.$notify({
                                title: '成功',
                                message: '注册成功',
                                type: 'success'
                            });
                        }
                    },res => {
                        console.log(res.body);
                    });
                }).catch(() => {

                });
            }
        }
    }
</script>

<style scoped>
    .reg-container{
        width:600px;
        /*height:300px;*/
        /*background-color:#000;*/
        top:center;
        left:center;
    }

    .title{
        text-align:center;
        height:70px;
        background-color:#fdd32c;
        line-height:70px;
        color:#000;
        font-weight:bold;
        font-size:24px;
    }

    .body{
        border-width:0 2px 2px 2px;
        border-style:solid;
        border-color:#d6d6d6;
        padding:28px 0;
        text-align:center;
    }

    .body .form{
        display:inline-block;
    }

    .body .form .form-item{
        margin-bottom:20px;
    }

    .body .form .icon{
        float:left;
        margin-top:2px;
    }
    .body .form .input,.body .form .input-group{
        float:left;
        width:300px;
        margin-left:6px;
    }
    .body .form .operate button{
        float:left;
        margin-left:36px;
    }

    .body .form .tologin{
        text-align:left;
        padding-left:36px;
        margin-top:14px;
        line-height:1;
    }

    .body .form .tologin a{
        color:#000;
        font-weight:bold;
    }
</style>
