<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-show="!ispwdlogin" v-model="verCode" type="number" maxlength="4" placeholder="验证码" isShowCode ref="runCode"
				 @setCode="getVerCode()"></wInput>
				<wInput v-show="ispwdlogin" v-model="password" type="password" maxlength="6" placeholder="请输入密码" isShowPass></wInput>
			</view>

			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click.native="startReg()"></wButton>
			<button style="margin-top: 20rpx;" :class="['buttonBorder',!istrue?'dlbutton':'dlbutton_loading']" open-type="getUserInfo"
			 @getuserinfo="getinfo">
				<view :class="istrue?'rotate_loop':''">
					<text v-if="istrue" class="cuIcon cuIcon-loading1 "></text>
					<view v-if="!istrue">
						<slot name="text">微信授权一键登录</slot>
					</view>
				</view>
			</button>
			<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="goreg">
					注册账号
				</view>
				<view class="" @click="ispwd">
					{{ispwdlogin?'验证码':'账号密码'}}登录
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="16">
			<view style="width: 500rpx;height: 400rpx;position: relative;" class="flex flex-direction align-center justify-center">
				<view class="text-xl text-bold" style="position: absolute;top:30rpx">
					提示
				</view>
				<view class="text-gray margin-top-sm text-lg">
					请授权手机号方便注册！
				</view>
				<button open-type="getPhoneNumber" style="width: 100%;font-size: 32rpx;position: absolute;bottom: 0;"
				 @getphonenumber="getPhoneNumber">确认授权</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-input.vue' //input
	import wButton from '../../components/watch-button.vue' //button
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import store from '@/store'
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				//logo图片 base64
				logoImage: 'data:image/png;base64,[encoded data, 23364 characters]',
				phoneData: '', // 用户/电话
				verCode: "", //验证码
				isRotate: false, //是否加载旋转
				istrue: false,
				password: "", //密码
				ispwdlogin: false, //是否使用密码登录
				session_key: "",
				openid: "",
				show: false
			}
		},
		// onShow() {
		// 	uni.checkSession({
		// 		success() {
		// 			console.log("已登录")
		// 			return;
		// 		},
		// 		fail() {
		// 			uni.navigateTo({
		// 				url: "../doctor_related/doctor_info"
		// 			})
		// 		}
		// 	})
		// },
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		methods: {
			getVerCode() {
				//获取验证码
				if (_this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				setTimeout(function() {
					_this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '模拟倒计时终止'
					});
				}, 3000)
			},
			startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.verCode.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				if (this.password !== 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码位数不低于6位'
					});
					return false;
				}
				console.log("注册成功")
				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			},
			toindex() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			goreg() {
				uni.navigateTo({
					url: "./reg"
				})
			},
			ispwd() {
				this.ispwdlogin = !this.ispwdlogin
			},
			getinfo: async function(e) {
				let event = e
				console.log(event)
				let res = await this.$request.post("api/v2/common/wxLogin", {
					wechat_code: uni.getStorageSync("code"),
					nickname: event.detail.userInfo.nickName,
					avatar: event.detail.userInfo.avatarUrl
				})
				if (res.status == 0) {
					this.session_key = res.data.session_key
					this.openid = res.data.openid
					this.show = true
				}
			},
			getPhoneNumber: async function(e) {
				let res = await this.$request.post("api/v2/common/getPhoneNumber", {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					session_key: this.session_key,
					openid: this.openid
				})
				this.show = false
				if (res.status == 0) {
					if (res.data.token) {
						store.commit('setJwt', res.data.token);
						store.commit('setUser', res.data);
						store.commit('login');
						uni.showToast({
							title: "登录成功",
							icon: "none",
							duration: 2000
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				}
			}
		}
	}
</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>
