<template>
	<view class="login_register">
		<view class="nav-bar" style="position: relative;">
			<image style="display: block;width: 100%;height: 100%;" :src="myTopBgSrc"></image>
		</view>
		<view class="handle-area">
			<view class="login-area">
				<form style="display: block;" @submit="formSubmit">
					<view class="login-item">
						<image class="login-icon" src="../../static/login/avatar.png"></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="name" v-model="name" placeholder="请输入您的姓名" />
					</view>
					<view class="login-item">
						<image class="login-icon" src="../../static/login/avatar.png"></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="number" name="phone" v-model="phone" placeholder="请输入您的手机号" />
					</view>
					<view class="login-item">
						<image class="login-icon" src="../../static/login/password.png"></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="code" v-model="code" placeholder="请输入验证码" />
						<button class="getMessageCode" @click="getCode">{{codeTips}}</button>
					</view>
					<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
					<view class="">
						<button type="default" form-type="submit" class="login-btn">注册</button>
					</view>
				</form>
			</view>
		</view>
		<view class="privacy">
			<view class="privacyIn">
				<u-checkbox-group>
					<u-checkbox v-model="checkedShow"></u-checkbox>
				</u-checkbox-group>
				<view class="privacyCon">
					我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
						style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
				</view>
			</view>
		</view>
		<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
			:closeable='true'>
			<view style="padding: 30upx;" v-html="content">{{content}}</view>
		</u-popup>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				timer:null,
				agreement: false,
				checkedShow: true,
				name: '',
				phone: '',
				message: '',
				code: "",
				myTopBgSrc: require("../../static/login/my-bg.jpg"),
				codeTips: "获取验证码",
				type:'',
				content:'',
				count:0,
			}
		},
		onLoad(params) {
			this.type = params.type;
		},
		methods: {
			//检查form表单是否填写完整
			checkedParams(obj) {
				let that =this;
				if (obj.name == "" || obj.name == undefined || obj.name == null) {
					myShowToast('用户名不能为空');
					return false;
				};
				if (obj.phone == "" || obj.phone == undefined || obj.phone == null) {
					myShowToast('手机号不能为空');
					return false;
				};
				if (obj.code == "" || obj.code == undefined || obj.code == null) {
					myShowToast('验证码不能为空');
					return false;
				};
				if (that.checkedShow == false) {
					myShowToast('请勾选用户协议和隐私政策');
					return false;
				}

				function myShowToast(text) {
					uni.showToast({
						title: text,
						icon: 'none'
					})
				};
				return true;
			},
			formSubmit(e) {
				uni.showLoading({
				    title: '提交中'
				});
				var that = this;
				let obj = e.target.value;
				obj.type= that.type;
				if (!that.checkedParams(obj)) return;
				that.$u.api.visitorRegister(obj).then(res => {
					 uni.hideLoading();
					 if(res.err_msg){
						 this.$u.toast(res.err_msg);
					 }else{
						 uni.reLaunch({
						 	url: '/pages/login/login_'
						 })
					 }
					
				}).catch(e => {
					console.log(e)
					uni.showToast({
						title: e.err_msg,
						icon: 'none'
					})
				})
			
			 },
			ranStr(e) { 
				//形参e,需要产生随机字符串的长度   
				//如果没有传参，默认生成32位长度随机字符串
			    e = e || 32;
			    //模拟随机字符串库
			    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
			    a = t.length,//字符串t的长度，随机数生成最大值
			    n = "";
			    for (let i = 0; i < e; i++) {
			    	//随机生成长度为e的随机字符串拼接
			        n += t.charAt(Math.floor(Math.random() * a));
			    }
			    //返回随机组合字符串
			    return n
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode(e) {
				// debugger;
				// console.log(this.phone);
				let that = this;
				if (that.phone !== '') {
					if(that.count>0){
						that.$u.toast('倒计时结束后再发送');
					}else{
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						that.$u.api.getCode({
							phone: that.phone
						}).then(res => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							that.$u.toast('验证码已发送');
							that.count = 59;
							that.timer = setInterval(() => {
							  if (that.count > 0 && that.count <= 60) { 
								that.count--;
								that.codeTips = that.count+'秒重新获取';
							  } else {
								clearInterval(that.timer);
								that.timer = null;
								that.codeTips = '重新获取';
							  }
							}, 1000);
						})
					}
				} else {
					that.$u.toast('请输入手机号');
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.privacy {
		width: 100%;
		height: 40upx;
		padding: 0 40upx;
		margin-bottom: 25upx;
		position: fixed;
		bottom: 20upx;
		.privacyIn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.privacyCon {
				font-size: 26upx;
			}
		}
	}

	.wxBig {
		width: 100%;
		height: auto;
		margin-top: 100upx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;

		.Wxtitle {
			text-align: center;
			width: 100%;
			padding: 0 50upx;

			.WxtitleIn {
				width: 100%;
				font-size: 26upx;
				color: #808080;
				position: relative;
			}

			.WxtitleIn::after {
				content: '';
				width: 217upx;
				height: 2upx;
				background-color: #f6f6f6;
				position: absolute;
				right: 0;
				top: 18upx;
			}

			.WxtitleIn::before {
				content: '';
				width: 217upx;
				height: 2upx;
				background-color: #f6f6f6;
				position: absolute;
				left: 0;
				top: 18upx;
			}
		}

		.wx {
			width: 70upx;
			height: 70upx;
			margin-top: 50upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.login_register {
		position: relative;
		background-color: #f3fbff;
		min-height: 100%;
	}

	.nav-bar {
		height: 494upx;
		background-color: #2cade8;
		color: #FFFFFF;
	}

	.handle-area {
		width: 705upx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 10upx;
		position: absolute;
		top: 360upx;
		left: 50%;
		padding-bottom: 80upx;
		transform: translateX(-50%);
		box-shadow: 0px 5px 9px 5px rgba(141, 169, 185, 0.3);
	}
	.login-area{
		padding-top: 80upx;
	}
	.login-item {
		width: 635upx;
		height: 88upx;
		border-radius: 88upx;
		margin: 0 auto;
		background-color: #ebf6ff;
		padding-left: 72upx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 56upx;
	}

	.loginItemInput {
		border-radius: 0 88upx 88upx 0;
	}

	.code-img-item {
		padding-left: 72upx;
	}

	.login-item .login-icon {
		width: 22upx;
		height: 28upx;
		position: absolute;
		top: 50%;
		left: 35upx;
		transform: translateY(-50%);
	}

	.login-item input {
		height: 100%;
		line-height: 88upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
	}

	.my-code-input {
		width: 300upx;
	}

	.code-img {
		width: 155upx;
		height: 53upx;
		position: absolute;
		top: 50%;
		right: 20upx;
		transform: translateY(-50%);
		background-color: #EEEEEE;
	}

	.getMessageCode {
		width: fit-content;
		position: absolute;
		top: 10%;
		right: 20upx;
		height: 80%;
		color: #ffffff;
		font-size: 26upx;
		border-color: #19be6b;
		background-color: #19be6b;
		z-index: 100;
		border-radius: 36upx !important;
	}

	.login-btn,
	.register-btn {
		width: 635upx;
		height: 88upx;
		border-radius: 88upx;
		margin: 0 auto;
		background-color: #1d7ef3;
		font-family: AdobeHeitiStd-Regular;
		font-size: 30upx;
		line-height: 88upx;
		color: #ffffff;
	}

	.to-login {
		font-family: AdobeHeitiStd-Regular;
		font-size: 24upx;
		line-height: 72upx;
		color: #2c6fd9 !important;
		border: none !important;
		margin-top: 20upx;
	}

	.code-item {
		position: relative;
	}

	.my-code {
		width: 376upx;
	}

	.code {
		width: 155upx;
		height: 53upx;
		background-color: #0075ff;
		border-radius: 27upx;
		font-family: PingFang-SC-Medium;
		font-size: 20upx !important;
		line-height: 53upx;
		color: #fefeff;
		position: absolute;
		top: 50%;
		right: 20upx;
		transform: translateY(-50%);
		padding-left: 12upx;
		padding-right: 12upx;
	}
</style>
