<template>
    <div>
        <div class="login-container">
            <div class="title">
                <div class="navs">
                    <a href="javascript:void 0" :class="{active:active === 0}" @click="activeNav(0)">普通登陆</a>
                    <a href="javascript:void 0" :class="{active:active === 1}" @click="activeNav(1)">快速登陆</a>
                    <span class="decoration" :style="{left:active === 0 ? '0' : '50%'}"></span>
                </div>
            </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="loginData.username">
                        <span v-show="errors.has('username')" class="help is-danger">请输入手机号或邮箱</span>
                    </div>
                    <div class="form-item clearfix" v-show="active === 0">
                        <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="loginData.password">
                        <span v-show="errors.has('password')" class="help is-danger">请输入密码</span>
                    </div>
                    <div class="form-item clearfix" v-show="active === 1">
                        <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="loginData.captche">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">获取验证码</button>
                            </span>
                        </div>
                        <span v-show="errors.has('captche')" class="help is-danger">请输入验证码</span>
                    </div>
                    <div class="clearfix operate" style="padding-top:10px;">
                        <button class="btn btn-danger" style="width:120px" @click="login">登录</button>
                        <router-link to="/reg">免费注册</router-link>
                        <router-link to="/forget">忘记密码？</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as Types from '../store/mutation-types'

    export default{
        data(){
            return {
                active:0,
                loginData:{}
            }
        },
        methods:{
            activeNav(idx){
                this.active = idx;
            },
            login(){
                var validObj;
                if(this.active == 0){
                    validObj = {
                        'username':this.loginData.username,
                        'password':this.loginData.password
                    }
                }else{
                    validObj = {
                        'username':this.loginData.username,
                        'captche':this.loginData.captche
                    }
                }
                this.$validator.validateAll(validObj).then(() => {
                    var form = {};
//                    form.append('username',this.loginData.username);
                    var reg = new RegExp("^[0-9]*$");
                    if(reg.test(this.loginData.username)){
                        form.mobile = this.loginData.username;
//                        form.append('mobile',this.loginData.username);
                    }else{
                        form.email = this.loginData.username;
//                        form.append('email',this.loginData.username);
                    }
                    if(this.active == 0){
                        form.password = this.loginData.password;
                        form.type = 'slow';
//                        form.append('password',this.loginData.password);
//                        form.append('type','slow');
                    }else{
                        form.captche = this.loginData.captche;
                        form.type = 'fast';
//                        form.append('captche',this.loginData.captche);
//                        form.append('type','fast');
                    }
                    this.$http.put('apiv1/tmembers/login',form,{emulateJSON:true}).then(res => {
                        if(!res.body.code){
                            this.$store.commit(Types.SET_USER,res.body);
                            this.$router.push('/');
                        }
                    },res => {
                        console.log('错误');
                    });
                }).catch(() => {

                });

            }
        },
        beforeCreate(){

        }
    }
</script>

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

    .title{
        text-align:center;
        height:70px;
        background-color:#fdd32c;
        line-height:70px;
    }

    .title .navs{
        display:inline-block;
        position:relative;
    }

    .title .navs a{
        float:left;
        display:inline-block;
        color:#666;
        font-size:24px;
        width:144px;
        margin:0 10px;
    }

    .title .navs a:hover{
        color:#000;
        font-weight:bold;
        text-decoration: none;
    }

    .title .navs .decoration{
        width:144px;
        margin:0 10px;
        position:absolute;
        height:6px;
        background-color:#000;
        bottom:0;
        left:0;
        transition:left 0.3s;
    }

    .title .navs a.active{
        color:#000;
        font-weight:bold;
        text-decoration: none;
    }

    .body{
        border-width:0 2px 2px 2px;
        border-style:solid;
        border-color:#d6d6d6;
        padding:80px 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 .operate a{
        float:left;
        display:inline-block;
        line-height:33px;
        margin-left:20px;
        color:#000;
        /*font-weight:bold;*/
    }
</style>
