<template>
    <view>
        <image class="loginBack" src="/static/img/login_back.png" mode="aspectFill"></image>
        <view class="login">
            <view class="header">
                <view class="header-btn" @click="loginBack">
                    <uni-icons type="closeempty" size="28" color="#666"></uni-icons>
                </view>
            </view>
            <view class="title">
                <image class="title-logo" src="../../static/img/logo.png" mode="aspectFill"></image>
                <view class="title-name">欢迎使用，本时生活</view>
            </view>
            <view class="form">
                <view class="inputs">
                    <input type="number" v-model="mobile" @input="getNameValue" placeholder="输入手机号码" />
                </view>
                <view class="inputs">
                    <input type="number" v-model="password" @input="passwordValue" password placeholder="输入登录密码" />
                </view>
                <view class="inputs">
                    <input type="number" v-model="confirmation" @input="confirValue" password placeholder="确认登录密码" />
                </view>
                <view class="inputs">
                    <input type="number" @input="getCodeValue" :value="code" placeholder="输入手机验证码" />
                    <button type="default" @click="getCode" :disabled="disabled">
                        {{ codename }}
                    </button>
                </view>
                <button
                    type="default"
                    class="button"
                    :disabled="mobile.length <= 0 || password.length <= 0 || confirmation.length <= 0 || code.length <= 0"
                    @click="forgetlogin"
                >立即注册</button>
                <view class="login-wechat">
                    <navigator hover-class="none" url="/pages/auth/login" class="login-wechat-btn">
                        短信快捷登录
                    </navigator>
                    <navigator hover-class="none" url="/pages/auth/password_login" class="login-wechat-btn login-register">
                        密码登录
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import { register, send } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
                parentId    : '', // 推荐人id
				codename    : '获取验证码',
                password    : '', // 登录密码
                confirmation: '', // 确认登录密码
                mobile      : '', // 手机号
                code        : '', // 验证码
                disabled    : false // 按钮状态
			};
		},
		onLoad(e){
		},
		onUnload() {},
		methods:{
            // mobileNo
            getNameValue(e) {
                this.mobile = e.detail.value
            },
            
            // passwordNo
            passwordValue(e) {
                this.password = e.detail.value
            },
            
            // confirmationNo
            confirValue(e) {
                this.confirmation = e.detail.value
            },
            
            // 获取code
            getCode(){
                let mobileNo = this.mobile,
                    myreg    = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/
        
                var _this    = this
                if  (mobileNo == "") {
                    uni.showToast({
                        title     : '手机号不能为空',
                        icon      : 'none',
                        duration  : 1000
                    })
                    return false;
                }else if (!myreg.test(mobileNo)) {
                    uni.showToast({
                        title     : '请输入正确的手机号',
                        icon      : 'none',
                        duration  : 1000
                    })
                    return false;
                }else{
                    send({
                        mobile : mobileNo,
                        channel: 'LOGIN'
                    }).then(res=>{
                        uni.showToast({
                            title   : '发送成功',
                            icon    : 'success',
                            duration: 2000
                        })
                        var num = 61;
                        var timer = setInterval(function () {
                            num--;
                            if (num <= 0) {
                                clearInterval(timer);
                                _this.codename  = '重新发送'
                                _this.disabled  = false
                    
                            } else {
                                _this.codename  = num + "s后重新获取"
                                _this.disabled  = true
                            }
                            }, 1000)
                    }).catch(err=>{})
                }
            },
            
            // 获取后输入code
            getCodeValue (e) {
                this.code = e.detail.value
            },
            
            // forgetlogin
            forgetlogin(){
                uni.showLoading({
                	title: '注册中...'
                })
                register({
                    mobile: this.mobile,
                    password: this.password,
                    password_confirmation: this.confirmation,
                    code: this.code,
                    parent_id: ''
                }).then(res=>{
                    // 存储登录token
                    this.$store.commit('setToken', res.token)
                    uni.hideLoading()
                    
                    // 若没有登录密码则跳转设置登录密码页面
                    if(res.has_password == false) {
                        uni.redirectTo({
                            url: '/pages/auth/password'
                        })
                        return
                    }
                    
                    // 设置过登录密码,则跳到首页
                    uni.switchTab({
                        url: '/pages/index/index'
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: err.message,
                        icon : 'none'
                    })
                })
            }
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style lang="scss" scoped>
    .loginBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
    }
    
	.login{
        width: 100%;
        z-index: 2;
		padding: var(--status-bar-height) 20rpx * 4 0;
        box-sizing: border-box;
        position: relative;
        top: 0;
        left: 0;
		.header{
			padding: (20rpx * 2) 0 (20rpx * 5);
			.header-btn{
				display: none;
				height: 90rpx;
				width: 90rpx;
				line-height: 90rpx;
				text-align: center;
				margin-left: -30rpx;
			}
		}
		.title {
			margin-bottom: 20rpx * 5;
			font-size: 30rpx;
			font-weight: bold;
            text-align: center;
			color: #000;
            .title-logo {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 20rpx;
            }
		}
		// 表单
		.form{
			.inputs{
				margin-bottom: 20rpx * 2;
                box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .2);
                border-radius: 80rpx;
                padding: 0 30rpx;
                box-sizing: border-box;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				input {
					flex: 1;
					height: 90rpx;
					font-size: 30rpx;
				}
				button{
					font-size: 30rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: white;
					color: #188600;
					margin-left: 20rpx;
                    background: transparent;
					padding: 0;
					&:after{
						border: none;
					}
					&[disabled]{
						color: #C8C7CC;
					}
				}
			}
			.button{
				margin-top: 20rpx * 4;
				background: #000000;
				color: white;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				border: none;
                box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: .7);
				&[disabled]{
					background: #c1c1c1;
					box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: .1);
				}
			}
		}
		// 微信快捷登录
		.login-wechat{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 140rpx;
            display: flex;
            padding: 0 100rpx;
            box-sizing: border-box;
			.login-wechat-btn {
                width: 50%;
				display: inline-block;
			}
            .login-register {
                text-align: right;
            }
		}
	}
</style>