<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="password" type="password" maxlength="6" isShowPass placeholder="请输入密码"></wInput>
				<wInput v-model="confirmpwd" type="password" maxlength="6" isShowPass placeholder="确认密码"></wInput>
			</view>

			<wButton class="wbutton" text="注册并登录" :rotate="isRotate" @click.native="startReg()"></wButton>
			<wButton class="wbutton" fontColor="#000" bgColor="linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0.6))"
			 text="取 消" :rotate="isRotate" @click.native="toindex()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<view class="" @click="gologin">
					去登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-input.vue' //input
	import wButton from '../../components/watch-button.vue' //button
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: 'data:image/png;base64,[encoded data, 23364 characters]',
				phoneData: '', // 用户/电话
				password: "", //密码
				confirmpwd: "", //确认密码
				isRotate: false, //是否加载旋转
				istrue: false,
			}
		},
		// onShow() {
		// 	uni.checkSession({
		// 		success() {
		// 			console.log("已登录")
		// 			return;
		// 		},
		// 		fail() {
		// 			uni.navigateTo({
		// 				url: "../doctor_related/doctor_info"
		// 			})
		// 		}
		// 	})
		// },
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		methods: {
			isShowAgree() {},
			startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.password.length != 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码位数不低于6位'
					});
					return false;
				}
				if (this.password !== this.confirmpwd) {
					uni.showToast({
						title: "两次密码不一致!",
						icon: "none",
						position: "bottom"
					})
					return false
				}
				console.log("注册成功")
				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			},
			gologin() {
				uni.switchTab({
					url: "./login"
				})
			}
		}
	}
</script>

<style>
	@import url("../../components/colorui/icon.css");
	@import url("./css/main.css");

	.dlbutton {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		width: 601rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.dlbutton_loading {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.buttonBorder {
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		-webkit-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-moz-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-ms-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-o-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
	}

	/* 旋转动画 */
	.rotate_loop {
		-webkit-transition-property: -webkit-transform;
		-webkit-transition-duration: 1s;
		-moz-transition-property: -moz-transform;
		-moz-transition-duration: 1s;
		-webkit-animation: rotate 1s linear infinite;
		-moz-animation: rotate 1s linear infinite;
		-o-animation: rotate 1s linear infinite;
		animation: rotate 1s linear infinite;
	}

	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(360deg)
		}
	}

	@-moz-keyframes rotate {
		from {
			-moz-transform: rotate(0deg)
		}

		to {
			-moz-transform: rotate(359deg)
		}
	}

	@-o-keyframes rotate {
		from {
			-o-transform: rotate(0deg)
		}

		to {
			-o-transform: rotate(359deg)
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

	button::after {
		border: none; 
	}
</style>
