<template>
	<login-template title="手机注册">
		<jl-input type="number" v-model="phone" placeholder="请输入手机号" />
		<code-input ref="code" v-model="code" :getCode="getCaptcha" @key-change="keyChange" @confirm="goSetCode"></code-input>
		<view v-if="loading" class="btn nocheck">发送中</view>
		<view v-else-if="validate" class="btn" @click="goSetCode">获取验证码</view>
		<view v-else class="btn nocheck">获取验证码</view>
		
		<view class="changeLogintype">
			<navigator open-type="navigateBack">返回登录</navigator>
		</view>
	</login-template>
</template>

<script>
	import {
		isMobile
	} from '@/untils/validate.js'
	import codeInput from './codeInput.vue'
	import {
		accountsendValidate,
		getCaptcha,
		validateCode,
		reg
	} from '@/api/reg.js'
	import loginTemplate from './template.vue'
	import jlInput from '@/components/jl-input/main.vue'
	import {mapGetters} from 'vuex'
	export default {
		components: {
			jlInput,
			codeInput,
			loginTemplate
		},
		data() {
			return {
				loading: false,
				phone: '',
				code: '',
				key: '',
				sms: '',
				defCount:5,//默认发送验证码次数
			}
		},
		onLoad(options) {
			// 获取短信验证码
			uni.$off('accountsendValidate')
			uni.$on('accountsendValidate', (cb) => {
				accountsendValidate(this.phone, this.key, this.code).then(() => {
					cb()
				}).catch((res) => {
					uni.navigateBack()
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.$refs.code.refushCode()
				})
			})
			// 设置密码页抬头
			uni.$off('passwordGetTitle')
			uni.$on('passwordGetTitle', (cb) => {
				cb('创建密码')
			})
			// 短信验证码输入完毕
			uni.$off('setSMS')
			uni.$on('setSMS', (sms) => {
				validateCode(this.phone, sms).then(res => {
					this.sms = sms
					uni.hideKeyboard()
					uni.navigateTo({
						url: `./setPassword`
					})
				})
			})
			// 设置密码
			uni.$off('setPassword')
			uni.$on('setPassword', ({
				password,
				cb
			}) => {
				reg(this.phone, password, this.sms).then(() => {
					cb()
					uni.navigateBack({
						delta: 3
					})
					setTimeout(() => {
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						});
					}, 1000)
				})
			})
		},
		methods: {
			goLogin(success) {
				uni.redirectTo({
					url: './login',
					success
				})
			},
			goSetCode(e) {
				if(!this.userChecked){
					uni.showToast({
						title:'请先阅读并同意《服务及隐私协议》',
						icon:'none'
					})
				}
				else{
					this.loading = true;
					accountsendValidate(this.phone, this.key, this.code).then((res) => {
						if(res.data.code==200){
							let count=res.data.data;
							this.$store.dispatch('UpdateUserSendTimes',count);
							if(count>=1 && count<=5){
									uni.navigateTo({
										url: `./setCode?phone=${this.phone}&count=${count}`
									})
								
								
							}
						
						}
						this.loading=false;
					}).catch(() => {
						this.loading = false;
						this.$refs.code.refushCode()
					})
				}
			},
			keyChange(val) {
				this.key = val
			},
			isMobile,
			getCaptcha
		},
		computed: {
			...mapGetters(['userChecked']),
			validate() {
				return isMobile(this.phone) && this.code
			}
		}
	}
</script>

<style>
	@import "./css";
</style>
