<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />

		<view class="title">
			欢迎注册新账号
		</view>

		<view class="box">
			<view class="info">
				<view class="pwd">
					<d-input :maxlength="11" height="96" v-model="form['mobile']"
						:prefixIcon="require('../../static/choose/act.png')" borderRadius="96rpx" prefixIconSize="40rpx"
						placeholder="请输入手机号" @blur="check" @input="is_d=false" :placeholder-style="{fontSize:'32rpx'}"
						:custom-style="{fontSize:'32rpx',paddingLeft:'60rpx'}" />
				</view>

				<view class="pwd">
					<u-field v-model="code" placeholder="请填写验证码" :placeholder-style="{fontSize:'32rpx'}">
						<u-button size="mini" slot="right" @click="getCode">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange" class="code">
					</u-verification-code>
				</view>

				<view class="flex-row" style="margin-top: 88rpx;">
					<u-icon size="35" :color="form['check']?'#2979FF':'#F3F4F5'" name="checkmark-circle-fill"
						@click="form['check']=!form['check']"></u-icon>
					<view class="agreement">
						我已阅读并同意
						<text @click="getInfo(1)">《用户服务协议》</text>
						和
						<text @click="getInfo(2)">《隐私权政策》</text>
					</view>
				</view>
				<view class="btn" :class="form['check']?'':'bg'">
					<u-button :throttle-time="20" shape="circle" @click="register" :disabled="!form['check']">
						立即注册</u-button>
				</view>
			</view>
		</view>

		<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="68%" border-radius="20"
			:closeable="true">
			<view class="agreen">
				<u-parse :html="content"></u-parse>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getAgreem,
		getCodes,
		getsLogin
	} from '../../request/api/api';
	export default {
		data() {
			return {
				form: {
					check: false
				},
				is_d: false,
				statusBarHeight: this.$statusBarHeight,
				navbarHeight: this.$navbarHeight,
				mobile: '',
				code: '',
				codeText: '',
				time: "",
			};
		},
		onLoad(e) {

		},
		methods: {
			check() {
				this.getCode()
			},
			getCode() {
				if (this.form['mobile'] == '') {
					// uni.showToast({
					// 	title: '手机号不能为空',
					// 	duration: 2000,
					// 	icon: 'error'
					// });
					this.$refs.uToast.show({
						title: '手机号不能为空',
						type: 'default',
						icon: false
					})
					return
				}
				if (!/^1[345678]\d{9}$/.test(this.form['mobile'])) {
					// uni.showToast({
					// 	title: '请输入正确的手机号',
					// 	duration: 2000,
					// 	icon: 'error'
					// });
					this.$refs.uToast.show({
						title:'请输入正确的手机号',
						type: 'default',
						icon: false
					})
					return
				}

				let data = {
					mobile: this.form['mobile'],
					store_id: '11001'
				}

				getCodes({
					method: 'post',
					data: data
				}).then((res) => {
					// console.log(res, 'code');
					if (res.data.errcode == 0) {
						uni.setStorageSync('smsCode', res.data.data.smsCode)
					}

					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				})
			},
			register() {
				if (this.form['pwd'] == []) {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				if (!this.form['check']) {
					uni.showToast({
						title: '请勾选协议',
						duration: 2000,
						icon: 'error'
					});
					return
				}

				uni.showLoading({
					title: "加载中"
				});
				uni.removeStorageSync('token')

				let data = {
					mobile: this.form['mobile'],
					smsCode: this.code,
					store_id: '11001',
					status: 3
				}
				getsLogin({
					method: "post",
					data: data
				}).then(res => {
					// console.log(res,'ress');

					if (res.data.errcode == 0) {
						uni.setStorageSync('token', res.data.data.token)
						uni.reLaunch({
							url: "/pages/home/home",
							fail: (e) => {
								// console.log(e);
							},
							success() {
								uni.showToast({
									title: '登陆成功',
									duration: 2000
								});
								uni.hideLoading();
							}
						})
					} else {
						uni.showToast({
							icon: "error",
							title: '登陆失败'
						})
					}
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 协议
			getInfo(e) {
				this.show = true

				getAgreem({
					method: "post",
					data: {
						end: 1,
						store_id: '11001'
					}
				}).then((res) => {
					console.log(res);

					if (e == 1) {
						this.content = res.data.data[0].content
					} else {
						this.content = res.data.data[1].content
					}
				})
			},
			checkboxChange(val) {
				console.log(val);
			},
			codeChange(text) {
				this.codeText = text;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.title {
		width: 750rpx;
		padding-top: 100rpx;
		text-align: center;
		font-size: 48rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0D111A;
		background: linear-gradient(180deg, #EAF2FF 0%, #FFFFFF 100%);
		margin-bottom: 60rpx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		margin-bottom: 34rpx;

		.agreement {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #6C7380;
			margin-left: 16rpx;

			text {
				color: #2979FF;
				size: 24rpx;
			}
		}
	}

	.box {
		box-sizing: border-box;
		padding: 0 52rpx;
	}

	.code {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1777FF;
		background: #F9FAFB;
	}

	.agreement {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #6C7380;
		margin-left: 16rpx;
	}

	.pwd {
		width: 646rpx;
		height: 96rpx;
		background: #F9FAFB;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
		margin: 0rpx 0 30rpx;

		::v-deep button {
			color: #1777FF;
			border: 0;
		}
	}

	.hint {
		margin-top: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #6C7380;
	}

	.btn {
		::v-deep button {
			width: 648rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #4175EE;
			border: 0;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.bg {
		::v-deep button {
			width: 648rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #8ABAFF;
			border: 0;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.agreen {
			padding: 60rpx 50rpx 20rpx;
		}
	}
</style>