<template>
	<view class="">
		<navigation>Register</navigation>
		<view class="login-body">
			<view class="input-item flex">
				<view class="login-sigh flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_phone@2x.png" mode=""></image>
					</view>
					<span class="quhao">+{{areacode}}</span>
				</view>
				<input type="text" value="" placeholder="mobile number"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="mobile"
					@input="btnControl" />
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_img@2x.png" mode=""></image>
					</view>
				</view>
				<input class="input_pcod" value="" placeholder="Picture Code"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;" v-model="picCode" />
				<view class="login-sigh3 flex">
					<image :src="imgcodeUrl" mode="scaleToFill" class="img1"></image>
					<image src="../../static/login/icon_refresh@2x.png" mode="" class="img2" @click="getPicCode()">
					</image>
				</view>

			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_code@2x.png" mode=""></image>
					</view>
				</view>
				<input value="" placeholder="Verification code"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
					v-model="infoCode" />
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"
						start-text="OTP" change-text="xs" end-text="OTP"></u-verification-code>
					<u-button  @tap="getCode" style="color: #954DE3FF; border-radius: 4px;font-size: 15px;width: 20px; height: 24px;line-height: 40px;">{{tips}}</u-button>
		    
				</view>
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_key@2x.png" mode=""></image>
					</view>
				</view>
				<input type="password" value="" placeholder="password"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
					v-model="password" />
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_key@2x.png" mode=""></image>
					</view>
				</view>
				<input type="password" value="" placeholder="Confirm Password"
					placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform: capitalize;"
					v-model="password2" />
			</view>
			<view class="input-item flex">
				<view class="login-sigh login-sigh2  flex">
					<view class="imgcon">
						<image src="../../static/login/list_icon_invite@2x.png" mode=""></image>
					</view>
				</view>
				<input value="" placeholder="Invite code" placeholder-style="color: #BFC2CCFF;font-size:14px;"
					v-model="inviteCode" />
			</view>
			<button class="login-btn" @click="regist()" :class="btnNum==1?'login-btnon':''"
				:disabled="btnNum==1?false:true">
				Register
			</button>
			<view class="login-re" @click="goLogin()">
				Login
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import md5 from 'js-md5'
	import store from '@/store'
	import cont from "@/components/navigation/navigation.vue"

	export default {
		data() {
			return {
				tips: 'OTP',

				seconds: 10,
				mobile: '',
				mark: 'sms_user_register',
				countryCode: '',
				password: '',
				password2: '',
				inviteCode: '',
				infoCode: '',
				picCode: '',
				imgcodeUrl: '',
				btnNum: 0,
				rawData: '',
				siteInfo: {},
				areacode: ''
			}
		},

		onLoad() {
			this.getPicCode();
			this.areacode = uni.getStorageSync('siteInfo').areaCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.picCode == '') {
					uni.showToast({
						title: 'The graphic verification code is empty',
						icon: 'none',
						duration: 1500
					})
					return;
				}
			if (this.mobile == '') {
				uni.showToast({
					title: 'Please input mobile phone number',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			var a = /^[0-9]{9}$/;
			if (!a.test(this.mobile)) {
				uni.showToast({
					title: 'Wrong format of mobile phone number',
					icon: 'none',
					duration: 1500
				})
				return;
			}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: 'Getting captcha'
					})
			
					setTimeout(() => {
						uni.hideLoading();
						this.$refs.uCode.start();
					}, 2000);
					this.countryCode = uni.getStorageSync('siteInfo').countryCode
					const post = api.sendSmsCode({
					"mobile": this.mobile,
					"mark": this.mark,
					"countryCode": this.countryCode,
					"code": this.picCode
					})
					post.then(res => {
						var that = this;
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 2500
							})
						})
						.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
						})
				} else {
					this.$u.toast('Send after the countdown');
				}
		
			},

	
		btnControl() {
			this.btnNum = 1;
			if (this.mobile == '') {
				this.btnNum = 0;
			}

		},
		goLogin() {
			uni.navigateTo({
				url: '../login/index'
			})
		},

		getPicCode() {
			this.imgcodeUrl = "/start/api/home/imgCode?uuid=" + this.$u.guid(20);
			console.log();
			console.log(this.imgcodeUrl)
		},

		regist() {
			if (this.mobile == '') {
				uni.showToast({
					title: 'Please input mobile phone number',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			var a = /^[0-9]{4,14}$/;
			if (!a.test(this.mobile)) {
				uni.showToast({
					title: 'Wrong format of mobile phone number',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			var a = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/;
			if (!a.test(this.password)) {
				uni.showToast({
					title: 'Incorrect password format,a password requires a combination of numbers and letters',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			if (this.password.length < 6 || this.password.length > 20) {
				uni.showToast({
					title: 'The login password requires 6-20 digits',
					icon: 'none',
					duration: 1500
				})
				return;
			}

			if (this.inviteCode == '') {
				uni.showToast({
					title: 'inviteCode Code is empty',
					icon: 'none',
					duration: 1500
				})
				return;
			}
			if (this.password == '' || this.password2 == '') {
				uni.showToast({
					title: 'Password is empty',
					icon: 'none',
					duration: 1500
				})
				return;
			}


			if (this.password != this.password2) {
				uni.showToast({
					title: 'The two passwords are inconsistent',
					icon: 'none',
					duration: 1500
				})
				return;
			}

		uni.showLoading({
				    title: 'loading'
				});
				
				
				
				
				
				const post = api.register({
	           "mobile": this.mobile,
	        'password': md5(this.password),
	        'inviteCode': this.inviteCode,
	         'code': this.infoCode,
				})
				post.then(res => {
			uni.showToast({
				title: res.errMsg,
				icon: 'none',
				duration: 1500
			})
			setTimeout(function() {
				uni.navigateTo({
					url: '../login/index'
				})
			}, 1500)
		
					})
					.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
					})
				

}

		},
		goLogin() {
			uni.navigateTo({
				url: '../login/index',
			})
		}

	}
</script>

<style>
	@import './index.css';
</style>
