<template>
    <view class="content">
		<view class="campus-header">
			<view class="logo">
				<image src="@/static/img/campusLogin_logo.png" mode="aspectFill"></image>
				<view class="title">联通全额消费金活动登录</view>
			</view>
			<image class="cover" src="@/static/img/campusLogin_back_red.png" mode="aspectFill"></image>
		</view>
        <view class="campus-cont">
            <form @submit="forgetlogin">
				<view class="campus-inputs">
				    <!-- <image class="campus-form-icon" src="/static/img/campus_login_02.png" mode="aspectFill"></image> -->
				    <input class="campus-form-input" type="number" placeholder="请输入手机号" @input="getNameValue" name="mobile"></input>
				</view>
				<view class="campus-inputs inputs-code" v-if="!passwordLogin">
				    <!-- <image class="campus-form-icon" src="/static/img/campus_login_03.png" mode="aspectFill"></image> -->
					<input class="campus-form-input" type="number" placeholder="请输入验证码" @input="getCodeValue" maxlength="4"></input>
					<button class="campus-form-code" @tap="getCode" :disabled="disabled" hover-class="none">{{ codename }}</button>
				</view>
				<view class="campus-inputs" v-else>
				    <!-- <image class="campus-form-icon" src="/static/img/campus_login_03.png" mode="aspectFill"></image> -->
				    <input class="campus-form-input" type="password" placeholder="请输入登录密码" name="password"></input>
				</view>
				<view class="resPassword">
					<navigator url="password">忘记密码</navigator>
				</view>
				<button class="campus-form-btn" form-type="submit">登录</button>
            </form>
			<view class="login-box">
				<view @click="onCutLogin">{{passwordLogin ? '验证码登录': '密码登录'}}</view>
				<navigator url="register">快速注册</navigator>
			</view>
        </view>
    </view>
</template>

<script>
    import { send, auth, passlogin } from '@/apis/interfaces/auth'
    export default {
        data() {
            return {
                codename     : '获取验证码',
                mobileNo     : '',   // 手机号
                code         : '',   // 验证码
				passwordLogin: true, // 登录方式
                disabled     : false,
            }
        },
        
        methods: {
			// 切换登录方式
			onCutLogin(){
				this.passwordLogin = !this.passwordLogin
			},
            // mobileNo
            getNameValue(e) {
                this.mobileNo = e.detail.value
            },
            
            // 获取code
            getCode(){
                let mobileNo = this.mobileNo,
                    myreg    = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9]|16[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=>{
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
                }
            },
            
            // 获取后输入code
            getCodeValue (e) {
                this.code = e.detail.value
            },
            
            // 立即登录
            forgetlogin(e){
                let mobileNo = e.detail.value.mobile || '',
                    code     = this.code || '',
					password = e.detail.value.password || '',
					loginFunction
				
				if(this.passwordLogin){
					loginFunction = passlogin({
						mobile	: mobileNo,
						password: password
					})
				}else{
					loginFunction = auth({
						mobile: mobileNo,
						code: code,
						type: ''
					})
				}
				
				loginFunction.then(res => {
					this.$store.commit('setToken', res.token)
					uni.reLaunch({
					    url: '/pages/giftPack/index'
					})
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
            }
        }
    }
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background-image: linear-gradient(to top right, #fff9f9, #fff9f9);
		// background-image: linear-gradient(to top right, #cbaf7f, #fcf4cb);
	}
	.campus-cont{
		padding: 40rpx 60rpx;
		.campus-inputs{
			position: relative;
			padding-left: 30rpx;
			// padding-left: 90rpx;
			padding-right: 30rpx;
			background-image: linear-gradient(to right, #f4eeee, #f4eeee);
			// background-image: linear-gradient(to right, #575a85, #252f4b);
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			margin-bottom: 30rpx;
			&.inputs-code{
				padding-right: 280rpx;
				.campus-form-code{
					width: 260rpx;
					position: absolute;
					top: 0;
					right: 0;
					padding: 0;
					margin: 0;
					background-color: transparent;
					font-size: 30rpx;
					height: 90rpx;
					line-height: 90rpx;
					color: #f25448;
					&::after{
						border: none;
					}
					&[disabled]{
						color: rgba($color: #f25448, $alpha: .5);
					}
				}
			}
		}
		.campus-form-icon{
			position: absolute;
			left: 26rpx;
			top: 26rpx;
			width: 38rpx;
			height: 38rpx;
		}
		.campus-form-input{
			height: 90rpx;
			color: #000000;
			font-size: 32rpx;
		}
		
		.resPassword{
			text-align: right;
			font-size: 28rpx;
			navigator{
				display: inline-block;
			}
		}
		
		.campus-form-btn{
			margin-top: 100rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			border-radius: 45rpx;
			background-image: linear-gradient(to right, #f25448, #fe786d);
			// background-image: linear-gradient(to right, #575a85, #252f4b);
			font-size: 32rpx;
			color: #ffffff;
		}
		.login-box{
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			margin-top: 100rpx;
			view{
				color: #28314e;
			}
		}
	}
	.campus-header{
		width: 100%;
		padding-top: 70%;
		position: relative;
		.cover{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		.logo{
			position: absolute;
			bottom: 80rpx;
			width: 100%;
			z-index: 2;
			text-align: center;
			image{
				margin-top: 20%;
				width: 160rpx;
				height: 160rpx;
				vertical-align: top;
				margin-bottom: 30rpx;
				border-radius: 50%;
			}
			.title{
				font-weight: bold;
				color: white;
				font-size: 40rpx;
			}
		}
	}
</style>
