<!-- 账号注册页 -->
<template>
	<view class="uni-content" style="padding: 0px 53px;">
		<match-media :min-width="690">
			<view class="login-logo">
				<image :src="logo"></image>
			</view>
			<!-- 顶部文字 -->
			<text class="title title-box">用户名密码注册</text>
		</match-media>
		<view class="nav_area"></view>
		<view class="logo_area">
			<image src="../../../../static/home/logo.png" mode=""></image>
			<view class="close" @click="backPrev()"></view>
		</view>
		<text class="title title-box">注册</text>
		<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
			<!-- <uni-forms-item name="username" required>
				<uni-easyinput :inputBorder="false" :focus="focusUsername" @blur="focusUsername = false"
					class="input-box" placeholder="请输入用户名" v-model="formData.username" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="nickname">
				<uni-easyinput :inputBorder="false" :focus="focusNickname" @blur="focusNickname = false"
					class="input-box" placeholder="请输入用户昵称" v-model="formData.nickname" trim="both" />
			</uni-forms-item> -->
			<uni-forms-item name="phone">
				<uni-easyinput :inputBorder="false" :focus="focusUsername" @blur="focusUsername = false"
					class="input-box" placeholder="手机号码" v-model="formData.phone" trim="both" />
					<view class="getCaptchaCode" v-if="0">
						获取验证码
					</view>
			</uni-forms-item>
			<uni-forms-item name="phoneCaptcha" v-if="0">
				<uni-easyinput :inputBorder="false" :focus="focusCaptcha" @blur="focusCaptcha = false"
					class="input-box" placeholder="手机验证码" v-model="formData.phoneCaptcha" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="invitationCode">
				<uni-easyinput :inputBorder="false" :focus="focusCode" @blur="focusCode = false"
					class="input-box" placeholder="邀请码" v-model="formData.invitationCode" trim="both" />
			</uni-forms-item>
			<!-- :placeholder="'请输入' + (config.passwordStrength == 'weak'?'6':'8') + '-16位密码'" -->
			<uni-forms-item name="password" v-model="formData.password" >
				<uni-easyinput :inputBorder="false" :focus="focusPassword" @blur="focusPassword = false"
					class="input-box" maxlength="20"
					placeholder="密码" type="password"
					v-model="formData.password" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="repassword" v-model="formData.repassword" >
				<uni-easyinput :inputBorder="false" :focus="focusPassword2" @blur="focusPassword2 =false"
					class="input-box" placeholder="确认密码" maxlength="20" type="password" v-model="formData.repassword"
					trim="both" />
			</uni-forms-item>
			<!-- <uni-forms-item>
				<uni-captcha ref="captcha" scene="register" v-model="formData.captcha" />
			</uni-forms-item> -->
			<!-- <uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements> -->
			<button class="uni-btn register-btn" type="primary" @click="submitForm">立即注册</button>
			<!-- <button @click="navigateBack" class="register-back">返回</button> -->
			<match-media :min-width="690">
				<view class="link-box">
					<text class="link" @click="registerByEmail">邮箱验证码注册</text>
					<text class="link" @click="toLogin">已有账号？点此登录</text>
				</view>
			</match-media>
		</uni-forms>
	</view>
</template>

<script>
	import rules from './validator.js';
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	import config from '@/uni_modules/uni-id-pages/config.js'
	import API from '@/common/js/api.js'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'

	const uniIdCo = uniCloud.importObject("uni-id-co")
	export default {
		mixins: [mixin],
		data() {
			return {
				formData: {
					username: "",
					nickname: "",
					password: "",
					repassword: "",
					captcha: ""
				},
				rules,
				focusUsername: false,
				focusCaptcha: false,
				focusCode: false,
				focusNickname: false,
				focusPassword: false,
				focusPassword2: false,
				logo: "/static/logo.png"
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					// this.submit();
					this.submitForm();
				}
			};
			// #endif
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				this.$refs.form.validate().then((res) => {
					if (this.formData.captcha.length != 4) {
						this.$refs.captcha.focusCaptchaInput = true
						return uni.showToast({
							title: '请输入验证码',
							icon: 'none',
							duration: 3000
						});
					}
					if (this.needAgreements && !this.agree) {
						return this.$refs.agreements.popup(() => {
							this.submitForm(res)
						})
					}
					this.submitForm(res)
				}).catch((errors) => {
					let key = errors[0].key
					key = key.replace(key[0], key[0].toUpperCase())
					this['focus' + key] = true
				})
			},
			submitForm() {
				let data = {
					phone: this.formData.phone,
					password: this.formData.password,
					repassword: this.formData.repassword,
					sms_code: this.formData.phoneCaptcha,
					invite_code: this.formData.invitationCode
				}
				API.register(data, res=>{
					console.log(res);
					uni.showToast({
						title: res.msg
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/uni_modules/uni-id-pages/pages/login/login-withpwd?phone='+data.phone
						})
					}, 1500)
				})
				// uniIdCo.registerUser(this.formData).then(e => {
				// 		this.loginSuccess(e)
				// 	})
				// 	.catch(e => {
				// 		console.log(e.message);
				// 		//更好的体验：登录错误，直接刷新验证码
				// 		this.$refs.captcha.getImageCaptcha()
				// 	})
			},
			navigateBack() {
				uni.navigateBack()
			},
			toLogin() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
				})
			},
			registerByEmail() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/register/register-by-email'
				})
			},
			backPrev(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (max-width: 690px) {
		.uni-content {
			// margin-top: 15px;
			height: 100%;
			background-color: #fff;
		}
	}

	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 30px 40px 60px;
			max-height: 530px;
		}

		.link-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;
		}

		.link {
			font-size: 12px;
		}
	}

	.uni-content ::v-deep .uni-forms-item__label {
		position: absolute;
		left: -15px;
	}
	
	.nav_area{
		background-color: #fff;
		width: 750rpx;
		/*  #ifdef H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef APP-PLUS  */
		height: 108rpx;
		/*  #endif  */
		padding-top: var(--status-bar-height);
	}
	.logo_area{
		width: 269px;
		height: 50px;
		margin: 4px auto;
		position: relative;
		
		image{
			width: 50px;
			height: 47px;
		}
		
		.close{
			width: 24px;
			height: 24px;
			position: absolute;
			top: 0px;
			right: -24px;
			background-image: url("../../../../static/home/close2.png");
			background-size: contain;
		}
	}
	.title-box{
		font-size: 26px;
		color: #444;
		// margin-bottom: 20px;
	}
	.uni-content /deep/ .uni-easyinput__content{
		background-color: #fff !important;
		border-bottom: 1px solid #ebebeb;
		font-size: 16px !important;
	}
	.uni-easyinput__placeholder-class{
		font-size: 16px;
		color: #cecece;
	}
	/deep/ .uni-easyinput__content-input{
		padding-left: 0px !important;
	}
	// .uni-forms .uni-forms-item.is-direction-left:nth-of-type(1) /deep/ .uni-easyinput__content-input{
	// 	flex: 0.6;
	// }
	// .uni-forms .uni-forms-item.is-direction-left:nth-of-type(1) /deep/ .content-clear-icon{
	// 	flex: 0.4;
	// 	text-align: left;
	// }
	// 搭配验证码使用
	.getCaptchaCode{
		position: absolute;
		top: 0px;
		right: 0px;
		line-height: 44px;
		color: #CD2731;
		font-size: 16px;
	}
	.register-btn{
		border-radius: 10px;
		margin-top: 100px;
	}
	button {
		margin-top: 15px;
	}
</style>
