<template>
    <view>
        <view class="login">
            <view class="title">
                身份验证
            </view>
            <view class="form">
                <form @submit="forgetlogin">
                	<view class="inputs">
                	    <input class="campus-form-input" type="number" placeholder="请输入手机号" @input="getNameValue" name="mobile"></input>
                	</view>
                	<view class="inputs">
                        <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>
                	<button class="button" form-type="submit">找回</button>
                </form>
            </view>
        </view>
    </view>
</template>

<script>
	import { send, auth } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
                codename     : '获取验证码',
                mobileNo     : '',   // 手机号
                code         : '',   // 验证码
                disabled     : false,
            };
		},
		onLoad(e){},
		methods:{
            // 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=>{})
                }
            },
            
            // 获取后输入code
            getCodeValue (e) {
                this.code = e.detail.value
            },
            
            // 立即登录
            forgetlogin(e){
                let mobileNo = e.detail.value.mobile || '',
                    code     = this.code || ''
                    
                auth({
                    mobile: mobileNo,
                    code: code,
                    type: 'reset_password'
                }).then(res => {
                    this.$store.commit('setToken', res.token)
                    uni.redirectTo({
                        url: '/pages/auth/password?type=forgetType'
                    })
                }).catch(err =>{
                    uni.showToast({
                        title: err.message,
                        icon : 'none'
                    })
                })
            }
		}
	}
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</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: 100rpx;
        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: 40rpx;
			font-weight: bold;
			color: #000;
		}
		// 表单
		.form{
			.inputs{
                background-color: #FFFFFF;
				margin-bottom: 20rpx * 2;
                border-radius: 10rpx;
                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: #d82d36;
				color: white;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				border: none;
			}
		}
	}
</style>