<template>
	<view class="container">
		<view class="box flex-colum-start">
			<text>您好，</text>
			<text>欢迎使用{{uni.cache.set('NAME', '零点八零')}}</text>
		</view>
		<view class="top_box" :style="h">
			<view class="top_box_one">
				<text class="top_box_one_text">用户昵称</text>
				<input type="text" v-model="form.nickName" placeholder="请输入用户昵称" data-key="mobile" />
			</view>
			<view class="top_box_one">
				<text class="top_box_one_text">手机号码</text>
				<input type="text" v-model="form.telephone" placeholder="请输入手机号码" data-key="mobile" />
			</view>
			<view class="top_box_one">
				<text class="top_box_one_text">密码</text>
				<input type="mobile" v-model="form.password" placeholder="8-16位密码" maxlength="16"
					:password="!showPassword" />
				<view class="repeat" @click="display">
					<u-icon name="eye" v-if="showPassword"></u-icon>
					<u-icon v-else name="eye-off"></u-icon>
				</view>
			</view>
			<view class="top_box_one">
				<text class="top_box_one_text">验证码</text>
				<input type="mobile" v-model="form.code" placeholder="请输入短信验证码" maxlength="6" />
				<view class="repeats">
					<view v-if="showText == true" class="yzm"
						style="padding: 8rpx 16rpx 6rpx 16rpx; background: #288efb; border-radius: 15rpx"
						@click="CodeRegister">
						{{ Recapture }}
					</view>
					<view v-else
						style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx">
						{{ second }}s重新发送</view>
				</view>
			</view>
			<!-- <view class="top_box_one">
				<text class="top_box_one_text" @click="showTips">
					邀请码（选填）
					<uni-icons type="help" size="18"></uni-icons>
				</text>
				<input type="mobile" v-model="form.inviteCode" placeholder="请输入邀请人邀请码" />
			</view> -->
			<view class="Register" @click="Register">注册</view>
			<view class="agreement flex-start">
				<u-checkbox-group><u-checkbox shape="circle" @change="radioChange"
						size="12"></u-checkbox></u-checkbox-group>
				<text>阅读并同意银收客</text>
				<view class="agreement-Item" @click="Privacy(1)">《用户协议》</view>
				及
				<view class="agreement-Item" @click="Privacy(3)">《隐私政策》</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioChangeItem: false, //单选框
				h: null,
				showPassword: false,
				// 注册定时器   初始值
				second: 60,
				showText: true,
				Recapture: '发送验证码',
				form: {
					nickName: '',
					telephone: '',
					password: '',
					code: '',
					inviteCode: ''
				}
			};
		},
		mounted() {
			this.computed_h();
		},
		onLoad() {},
		methods: {
			showTips() {
				uni.showModal({
					title: '注意',
					content: '若该邀请码的用户无推广权限，将自动绑定到其上级名下',
					showCancel: false
				});
			},
			leftClick() {
				uni.navigateBack();
			},
			async CodeRegister() {
				//发起验证码
				if (this.form.telephone == null || this.form.telephone == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return false;
				}
				const res = await this.api.phoneValidateCode({
					// post  手机验证码
					phone: this.form.telephone
				});
				console.log(res);
				if (res) {
					uni.showToast({
						title: '验证码获取成功',
						icon: 'none'
					});
					// 定时器
					this.showText = false;
					this.Recapture = '重新获取';
					var interval = setInterval(() => {
						let times = --this.second;
						this.second = times < 10 ? '0' + times : times; //小于10秒补 0
					}, 1000);
					setTimeout(() => {
						clearInterval(interval);
						this.second = 60;
						this.showText = true;
					}, 60000);
				}
			},
			radioChange(n) {
				//是否同意
				console.log(n);
				this.radioChangeItem = n;
			},
			display() {
				// 切换密码显示隐藏
				this.showPassword = !this.showPassword;
			},
			async Privacy(e) {
				if (e == 1) {
					//用户协议
					let res = await this.api.agreementgetAgreementOne({
						discern: 0
					});
					uni.pro.navigateTo('my/about/agreement', {
						discern: 0,
						list: res.data.content
					});
				} else {
					let res3 = await this.api.agreementgetAgreementOne({
						discern: 3
					});
					uni.pro.navigateTo('my/about/agreement', {
						discern: 3,
						list: res3.data.content
					});
				}
			},
			async computed_h() {
				//获取div宽度
				let content_Icon = await uni.utils.info_distance('box');
				let content_top_box = await uni.utils.info_distance('top_box');
				let system_info = await uni.getSystemInfo();
				var h_ = null;
				if (content_Icon.height + content_top_box.height > system_info.windowHeight) {
					console.log(135);
					h_ = content_top_box.height + 30 + 'px';
				} else {
					h_ = system_info.windowHeight - content_Icon.height + 'px';
				}
				this.h = {
					height: h_
				};
			},
			async Register() {
				//注册
				if (this.form.nickName == null || this.form.nickName == '') {
					uni.showToast({
						title: '请输入用户昵称',
						icon: 'none'
					});
					return false;
				}
				if (this.form.telephone == null || this.form.telephone == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return false;
				}
				if (this.form.password == null || this.form.password == '' || uni.$u.trim(this.form.password, 'all') ==
					'') {
					uni.showToast({
						title: '请输入密码或密码不能输入空格',
						icon: 'none'
					});
					return false;
				}
				if (this.form.code == null || this.form.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				if (this.radioChangeItem == false) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读《用户协议》和《隐私政策》'
					});
					return;
				}
				let res = await this.api.cashierServiceloginregister({
					telephone: this.form.telephone,
					nickName: this.form.nickName,
					password: this.form.password,
					code: this.form.code,
					// inviteCode: this.form.inviteCode,
					source: 'promoter'
				});
				if (res) {
					setTimeout((res) => {
						uni.showToast({
							title: '注册成功',
							icon: 'none',
							success: () => {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						});
					}, 1500);
					// uni.cache.set('storage:authorization', res.data.auth_token);
					// this.$store.commit('set_login', true);
					// uni.pro.switchTab('index/index');
				}
				// if (result.status === 1) {
				// 	this.login(result.data);
				// 	uni.navigateBack();
				// } else {
				// 	this.$api.msg(result.msg);
				// 	this.logining = false;
				// }
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		background: linear-gradient(104deg, #4679ff 0%, #2868e8 47%, #2a94fc 100%);
	}

	.container {
		position: relative;

		.top {
			position: absolute;
			left: 64rpx;

			.u-navbar--fixed {
				top: 88rpx;
			}
		}

		.box {
			padding-top: 228rpx;
			padding-left: 64rpx;
			padding-bottom: 144rpx;

			text {
				font-size: 40rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
			}
		}

		.top_box::after {
			position: absolute;
			// content: url(@/static/icon.png);
			width: 282rpx;
			height: 280rpx;
			top: -240rpx;
			right: 32rpx;
			z-index: 2;
		}

		.top_box {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0px 0px;

			.top_box_one {
				position: relative;
				width: 85%;
				margin-top: 64rpx;
				border-bottom: 6rpx solid #e5e5e5;

				.top_box_one_text {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}

				input {
					padding: 18rpx 0 20rpx 0;
				}

				.repeat {
					position: absolute;
					bottom: 26rpx;
					right: 0;
					width: 25rpx;
					height: 17rpx;
				}

				.repeats {
					position: absolute;
					bottom: 26rpx;
					right: 0;
					font-size: 24rpx;
					z-index: 9;
					font-family: $uni_family;
					font-weight: 400;
					color: #ffffff;
					border-radius: 12rpx;
				}
			}

			.top_box_tow {
				width: 85%;

				text {
					margin-top: 34rpx;
					font-size: 24rpx;
					font-family: $uni_family;
					font-weight: 400;
					color: #666666;
				}
			}

			.Register {
				width: 75%;
				margin-top: 112rpx;
				padding: 10rpx 0;
				text-align: center;
				background: #288efb;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-size: 36rpx;
				font-family: $uni_family;
				font-weight: 400;
				color: #ffffff;
			}

			.agreement {
				margin-top: 14rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #7c8e97;

				.agreement-Item {
					color: #4ca1fc;
				}
			}
		}
	}
</style>