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

		<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/image/act.png')" borderRadius="96rpx" prefixIconSize="40rpx"
						placeholder="请输入手机号" @input="is_d=false" :placeholder-style="{fontSize:'32rpx'}"
						:custom-style="{fontSize:'32rpx',paddingLeft:'60rpx'}" />
				</view>

				<view class="pwd">
					<u-field v-model="smsCode" 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']?'#6ACDBB':'#e0fdff'" name="checkmark-circle-fill"
						@click="form['check']=!form['check']"></u-icon>
					<view class="agreement">
						我已阅读并同意
						<text
							@click="$go('/subPackages/sub_agreement/agreement?type=service_user_agreement')">《用户服务协议》</text>
						和
						<text
							@click="$go('/subPackages/sub_agreement/agreement?type=service_privacy_agreement')">《隐私权政策》</text>
					</view>
				</view>
				<!-- :disabled="!form['mobile']||!form['pwd']" -->
				<view class="btn">
					<u-button :throttle-time="20" shape="circle" @click="register" :ripple="true" :loading="loading">
						注册</u-button>
				</view>
				<view class="register" @click="$go('/pages/login/index')">
					<text>手机号登录</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		login,
		register,
		agreement,
		getUserInfo,
		loginOrRe
	} from '../../api/all';
	export default {
		data() {
			return {
				loading: false,
				form: {
					check: false
				},
				switchVal: false,
				is_d: false,
				statusBarHeight: this.$statusBarHeight,
				navbarHeight: this.$navbarHeight,
				mobile: '',
				codeText: '',
				smsCode: '',
				code: '',
				role: 1,
			};
		},
		onLoad(e) {
			// console.log(e, 'role');
			this.role = e.role

		},
		mounted() {
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.code = loginRes.code
					// console.log(loginRes);
					uni.setStorageSync('code', loginRes.code)
				}
			})
		},
		methods: {
			//登录或者注册接口
			register() {
				if (!uni.$u.test.mobile(this.form['mobile'])) {
					this.$toast('请输入正确的手机号')
					return
				}
				if (!this.smsCode) {
					this.$toast('请输入验证码')
					return
				}
				if (!this.form['check']) {
					this.$toast('请勾选协议')
					return
				} 
				
				const data = {
					store_id: '11001',
					role: this.role,
					plate_type: 2,
					mobile: this.form['mobile'],
					status: 4,
					smsCode: this.smsCode,
					code: uni.getStorageSync('code')
				}

				loginOrRe(data).then(res => {
					if (res.errcode != -1) {
						uni.setStorageSync('token', res.data['token'])
						uni.setStorageSync('logInfo', res.data['user'])
						
						// 存储doctor_id或user_id，用于WebSocket绑定
						if (res.data['user'] && res.data['user']['id']) {
							uni.setStorageSync('doctor_id', res.data['user']['id']);
							uni.setStorageSync('user_id', res.data['user']['id']);
						}
						
						// 触发WebSocket初始化（注册成功后）
						uni.$emit('user-login');

						setTimeout(() => {
							uni.showToast({
								title: '开始注册',
								icon: 'success'
							})
						}, 1000)
						//跳转到激活页面
						setTimeout(() => {
							this.$go('../../subPackages/sub_workbench/workbench_succeed')
						}, 800)

					} else {
						this.$toast(res.msg)
						//跳转到激活页面
						// setTimeout(() => {
						// 	this.$go('../../subPackages/sub_workbench/workbench_succeed')
						// }, 900)

					}
					// console.log(res);
				})
			},
			checkboxChange(val) {
				console.log(val);
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						//发送验证码接口
						const data = {
							store_id: '11001',
							mobile: this.form['mobile']
						}
						register(data).then(res => {
							console.log(res);
							if (res.errcode != -1) {
								// this.code = res.data.code
								uni.setStorageSync('smsCode', res.data['smsCode'])
								// if(this.code==res.data.smsCode){
								// this.$go('../../subPackages/sub_workbench/workbench_upInfo/index')
								// }else{
								// 	this.$u.toast('验证码错误')
								// 	return
								// }
							}
						})
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	};
</script>

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

	.title {
		width: 750rpx;
		padding-top: 200rpx;
		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: #6ACDBB;
			border: 0;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.register {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15px;

		text {
			color: #999;
			font-size: 14px;
			cursor: pointer;
			word-spacing: 3px;
		}
	}
</style>