<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="phone" @input="getNameValue" 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="phone.length <= 0 || code.length <= 0"
                    @click="forgetlogin"
                >登录</button>
                <view class="login-wechat">
                    <navigator hover-class="none" url="/pages/auth/password_login" class="login-wechat-btn">
                        密码登录
                    </navigator>
                    <navigator hover-class="none" url="/pages/auth/register" class="login-wechat-btn login-register">
                        账户注册
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import { auth, send } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
				codename    : '获取验证码',
                phone       : '', // 手机号
                code        : '', // 验证码
                disabled    : false ,// 按钮状态
                way         : '' // 登录方式-活动
			};
		},
		onLoad(options){
            // 登录方式-活动
            this.way = options.way
		},
		onUnload() {},
		methods:{
            // mobileNo
            getNameValue(e) {
                this.mobileNo = e.detail.value
            },
            
            // 获取code
            getCode(){
                let mobileNo = this.phone,
                    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(e){
                uni.showLoading({
                	title: '登录中...'
                })
                auth({
                    mobile: this.phone,
                    code: this.code,
                    type: ''
                }).then(res=>{
                    // 清空分享信息
                    if(this.way == 'shareLogin'){
                        getApp().globalData.shareObj = {
                            type    : '',
                            goodsId : '',
                            userId  : ''
                        }
                    }
                    
                    // 存储登录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: fixed;
        top: 140rpx;
        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>