<template>
	<view class="container">
		<view class="page-title">绑定手机号</view>
		<form @submit="login">
			
			<view class="cell flex-row-between">
				<input type="number" name="tel" @input="getphone" :value="phone" maxlength="11" placeholder="请输入手机号码"></input>
				<i class="iconfont iconquchu" @click="onClearPhone" v-show="phone"></i>
			</view>
			
			<view class="cell flex-row-between">
				<input type="number" name="register_code" maxlength="6" placeholder="请输入验证码"></input>
				<view class="code-btn" @click="getCode">{{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}</view>
			</view>
			
			<view class="cell flex-row-between">
				<input type="text"  name="pass" 
				maxlength="16" placeholder="请输入6到16位的数字和字母组合"></input>
			</view>
			
			<view class="cell flex-row-between">
				<input type="text" name="repass" maxlength="16" placeholder="请再次输入登录密码"></input>
			</view>
			
			<view class="xieyi flex-row" >
				<image src="../../static/images/select_on.png" mode="aspectFit" class="icon" v-if="xieyiActive"></image>
				<image src="../../static/images/select.png" mode="aspectFit" class="icon" v-else></image>
				<view class="xieyi-text">你已阅读并同意</view>
				<view @click.stop="agreement" style="color: #007AFF;">《注册服务协议》</view>
			</view>
			<button form-type="submit" class="login-btn">确定</button>
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: null,
				code: null,
				xieyiActive: true,

				codeConfig: {
					type: 1,
					time: 60
				},

			}
		},
		onLoad(e) {
			this.code = e.code;
			this.type=e.type;
		},
		methods: {
			getphone(e) {
				this.phone = e.detail.value;
			},
			onClearPhone() {
				this.tel = "";
				this.phone = "";
			},
			agreement(e) {
				uni.navigateTo({
					url: "../text/text?title=注册服务协议"
				})
			},
			getCode() {
				if (this.codeConfig.type == 2) {
					return false
				}
				if (!/^1[0-9]{10}/.test(this.phone)) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					})
					return false
				}
				//请求验证码
				this.request({
					url: "user/sendcode",
					data: {
						tel: this.phone,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.codeConfig.type = 2
						this._timer = setInterval(() => {
							if (this.codeConfig.time == 1) {
								this.codeConfig = {
									type: 1,
									time: 30
								}
								clearInterval(this._timer)
							}
							this.codeConfig.time--
						}, 1000)
					}
				}).catch((res) => {
					console.log("message", res)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})

				});
			},


			login(e) {
				let data, url;
				if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
					uni.showToast({
						title: "请正确输入手机号",
						icon: 'none'
					})
					return false
				}

				if (!e.detail.value.register_code) {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
					return false
				}

				if (!e.detail.value.pass) {
					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					})
					return false
				}
				
			if (e.detail.value.pass!=e.detail.value.repass) {
					uni.showToast({
						title: "确认密码不一致",
						icon: 'none'
					})
					return false
			}
			
			data=e.detail.value;
			data.code=this.code;
			data.type=this.type;
			this.request({
					url:"user/register",
					data,
			}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.setStorageSync("token", res.data.token);
						uni.setStorage({
							key: 'login',
							data: {
								tel: e.detail.value.tel,
							},
							success: () => {
								console.log('success');
								uni.reLaunch({
										url: "../index/index"
								})
									
								// if (!this.is_pwd) {
								// 	uni.reLaunch({
								// 		url: "./password?tel=" + e.detail.value.tel
								// 	})
								// } else {
								// 	uni.reLaunch({
								// 		url: "../index/index"
								// 	})
								// }
								
							}
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			}

		}
	}
</script>

<style>
	.container {
		padding: 0 60rpx;
	}

	.page-title {
		padding: 40rpx 0 50rpx 0;
		font-size: 54rpx;
		line-height: 1;
		font-weight: 700;
		color: #242424;
	}

	.cell {
		height: 90rpx;
		border-bottom: 2rpx solid #ededed;
	    margin-bottom: 30rpx;
	}

	.cell .iconquchu {
		flex: none;
		font-size: 23rpx;
		color: #cbcbcb;
	}

	.cell .code-btn {
		flex: none;
		width: 170rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #3387FF;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.cell input {
		flex: auto;
		margin-right: 40rpx;
	}

	.login-btn {
		width: 630rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		margin: 100rpx auto 0;
	}

	.xieyi {
		font-size: 26rpx;
	}

	.xieyi .icon {
		flex: none;
		margin-right: 12rpx;
		display: block;
		width: 28rpx;
		height: 28rpx;
	}


	.xieyi .xieyi-text {
		color: #a8a8a8;
	}

	.xieyi navigator {
		color: #3387FF;
	}
</style>
