<template>
	<view class="page-container">
		<view class="login-header-bg">
			<view class="flex-row ">
				<view class="bgleft">
				</view>
				<view class="bgright">
				</view>
			</view>
			<view class="logo">
				<image src="/static/images/header-logo.png" mode="widthFix" class="logo">
			</view>
		</view>
		<view class="nav-tabs">
		
			<u-tabs lineColor="#DA2538" line-width="60px" line-hight="3px" :scrollable="false"
				:active-style="{fontSize: '18px', fontWeight: 'bold', color: '#fff'}" :list="navs"
				:current="navIndex"  @click="tabsClick"></u-tabs>
		</view>
		<view class="login-input" v-if="navIndex==0">
			<view class="input-box align-center">
				<view class="code">+86</view>
				<input type="number" v-model="phone" placeholder="请输入手机号码">
			</view>
			<view class="input-box align-center" v-if="phone_sms==true">
				<input type="number" v-model="code" placeholder="请输入验证码">
				<u-code ref="uCode" keep-running start-text="获取验证码" change-text="Xs后重发" @change="codeChange"></u-code>
				<text :text="codeTip" class="code-tip" @click="getCode">{{codeTip}}</text>
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="password" password placeholder="请设置密码（6-16位）">
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="invite" placeholder="邀请码（选填）增加观影特权">
			</view>
		</view>
		<view class="login-input" v-else>
			<view class="input-box align-center">
				<input type="text" v-model="email" placeholder="请输入邮箱">
			</view>
			<view class="input-box align-center" v-if="email_sms==true">
				<input type="number" v-model="code" placeholder="请输入验证码">
				<u-code ref="uCode" keep-running start-text="获取验证码" change-text="Xs后重发" @change="codeChange"></u-code>
				<text :text="codeTip" class="code-tip" @click="getCode">{{codeTip}}</text>
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="password" password placeholder="请设置密码（6-16位）">
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="invite" placeholder="邀请码（选填）增加观影特权">
			</view>
		</view>
		<view class="login-button">
			<u-button shape="circle" :disabled="phone === '' && email ==='' || loading" :loading="loading" color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)"
				text="注册" @click="reg"></u-button>
		</view>
		<view class="login-bottom flex-row">
			<text>已有账号</text>
			<navigator url="/pages/user/login" open-type="redirect" hover-class="none" class="link-button">立即登录
			</navigator>
		</view>
		<view class="reg-agreement flex-row">
			<!--  <u-checkbox-group @change="onChange">
	  	<u-checkbox shape="circle" activeColor="#09a96a" name="agreement"></u-checkbox>
	  </u-checkbox-group> -->
			<view>
				<text>注册即代表您已同意</text>
				<navigator url="/pages/user/agreement">《许可协议》</navigator>
				<text>和</text>
				<navigator url="/pages/user/privacy">《隐私政策》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/utils/api'
	const phone = /^1[345789]\d{9}$/
	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	const password = /^.{6,16}$/
	const code = /^[a-zA-Z0-9]{4,10}$/
	const invite = /^[a-zA-Z0-9]{4,8}$/
	// #ifdef APP-PLUS
	const openinstall = uni.requireNativePlugin('openinstall-plugin');
	// #endif
	export default {
		data() {
			return {
				phone: '',
				email:'',
				password: '',
				code: '',
				invite: '',
				ac:'phone',
				agreement: false,
				loading: false,
				codeTip: '',
				navs: [{
					name: '手机注册'
				},{
					name: '邮箱注册'
				}],
				navIndex:0,
				email_sms:false,
				phone_sms:false
			}
		},
		onLoad() {
			this.invite = uni.getStorageSync('inviteCode')
			this.bindInfo()
		},
		methods: {
			async bindInfo() {
				let res = await user.codeMsg().then()
				if (res.code == 1) {
					this.email_sms = res.data.email_sms;
					this.phone_sms = res.data.phone_sms
				} 
			},
			tabsClick(data) {
				if (this.navIndex != data.index) {
					this.navIndex = data.index
					this.ac=this.navIndex == 0 ? 'phone' : 'email'
					this.code=''
					this.password=''
				}
			},
			async reg() {
				switch (this.navIndex) {
				  case 0:
				  if (!phone.test(this.phone)) {
				  	uni.showToast({
				  		icon: 'none',
				  		title: '请输入正确的手机号码~!',
				  		duration: 3000
				  	})
				  	return
				  }
				    break;
				  case 1:
				  if(!emailRegex.test(this.email)){
					  uni.showToast({
					  	icon: 'none',
					  	title: '请输入正确的邮箱地址~!',
					  	duration: 3000
					  })
					  return
				  }
				    break;
				  default:
				}
				if(this.phone_sms==true && this.ac == 'phone'){
					if (!code.test(this.code)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的验证码~!',
							duration: 3000
						})
						return
					}
				}
				if(this.email_sms==true && this.ac == 'email'){
					if (!code.test(this.code)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的验证码~!',
							duration: 3000
						})
						return
					}
				}
				if (!password.test(this.password)) {
					uni.showToast({
						icon: 'none',
						title: '密码必须是6-16位~!',
						duration: 3000
					})
					return
				}
				if (this.invite && !invite.test(this.invite)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的邀请码~!',
						duration: 3000
					})
					return
				}
				this.loading = true
				await user.reg(this.phone, this.email,this.password, this.code, this.invite,this.ac).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
            // #ifdef APP-PLUS
						openinstall.reportRegister();
            // #endif
						uni.setStorage({
							key: 'user_token',
							data: res.data.user_token
						})
						getApp().globalData.share.code = res.data.user_invite_code
						getApp().globalData.userToken = res.data.user_token
						uni.switchTab({
							url: '/pages/user/index'
						})
					}
				}).catch(e => {})
				this.loading = false
			},
			codeChange(text) {
				this.codeTip = text
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					switch (this.navIndex) {
					  case 0:
					  if (!phone.test(this.phone)) {
					  	uni.showToast({
					  		icon: 'none',
					  		title: '请输入正确的手机号码~!',
					  		duration: 3000
					  	})
					  	return
					  }
					    break;
					  case 1:
					  if(!emailRegex.test(this.email)){
						  uni.showToast({
						  	icon: 'none',
						  	title: '请输入正确的邮箱地址~!',
						  	duration: 3000
						  })
						  return
					  }
					    break;
					  default:
					}
					
					
					this.$refs.uCode.start()
					console.log(this.phone,this.email, 1,this.ac);
					user.sendMsg(this.phone,this.email, 1,this.ac).then(res => {
						console.log(res);
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 3000
						})
					})
				}
			},
			onChange(values) {
				if (values.includes('agreement')) {
					this.agreement = true
				} else {
					this.agreement = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 20px;
		background-color: $uni-bg-color;
		.reg-title{
			font-size: 18px;
			font-weight: bold; 
			color: #fff;
		}
		.reg-agreement {
			margin-top: 30px;
			font-size: 12px;
			font-weight: 400;
			color: #999;
			align-items: center;
			justify-content: center;

			uni-checkbox .uni-checkbox-input {
				border-radius: 50%;
			}

			uni-navigator {
				color: #FC5667;
				display: inline-block;
			}
		}
.nav-tabs {
		margin-left:15px;
		width: 55%;
		margin-bottom: 40px;
		height: 50px;
		position: relative;
		z-index: 1;
	}
		.login-button {
			margin-top: 20px;
		}
		
		.login-bottom {
			uni-text {
				margin-right: 10px;
			}
		}
	}
</style>