<template>
	<view class="container">
		
		<view v-if="type == 2">
			<view class="logo">
				<!-- <view class="img">
					<image mode="widthFix" src="">
					</image>
				</view> -->
			</view>
			<view class="form re" style="top:200rpx;">
				<view class="username">
					<view class="get-code" style="color: #676767;" @click.stop="getCode()">{{getCodeText}}</view>
					<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: #676767;" />
				</view>
				<view class="code">
					<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #676767;" />
				</view>
				<view class="btn mart50" @tap="doReg">立即登录</view>
				<view class="width90 marb20 font15 fcor666 fotct" @click="updateStu(1)">微信授权登录</view>
			</view>
		</view>


		<view v-if="type == 1">
			<view class="banner backcorlb">
				<!-- 左边圆环 -->
				<view class="identity-code">
					<image src="../../static/img/logo2.jpg" mode="" class="img1"></image>
				</view>
				<!-- 数据交互 -->
				<view class="shuju">
					<image src="../../static/img/shujuzhuanhuan.png" mode="" style="width: 60rpx;height: 40rpx;">
					</image>
				</view>
				<!-- 右边圆环 -->
				<view class="aut-code">
					<image src="../../static/img/personal.png" mode="" class="img1"></image>
				</view>
			</view>
			<!-- 提示-->
			<view class="notice fcor333">
				授权
				<text class="name"> 嗨森逛 </text>
				服务获取以下信息为您提供相关服务
				<view class="line1 mart10 marb5"></view>

				<view class="mart10 marb5 checkbox">
					<text v-if="disabled==false" class='checkno' @click="getchecked"></text>
					<view v-else class='checkyes' @click="getchecked">
						<image style="width: 18px;height: 18px;margin-top: 2px;" src="../../static/img/gou.png" mode="">
						</image>
					</view>
					授权即表示同意
					<text style="color: #089BF5;" @click="getDocument(1)">《注册协议》</text><text style="color: #089BF5;"
						@click="getDocument(2)">《服务协议》</text>
				</view>
			</view>
			<!-- 授权按钮 -->
			<view class="confirm-box">
				<button type="default" class="cancel" @click="updateStu(2)">短信登录</button>
				<!--  v-if="code"-->
				<button type="primary" v-if="!user" open-type="getPhoneNumber" @getphonenumber="loginByPhone"
					class="confirm">获取手机号</button>
				<button type="primary" v-if="user && user.infoCompleteStatus == 1" @click="getuserinfo"
					class="confirm">获取用户信息</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getUserInfo,
		loginByPhone,
		HandleCode,
		phone,
		getLoginSMSCode
	} from "../../Utils/Api.js"
	export default {
		data() {
			return {
				user: '',
				imagewxUrl: app.globalData.imageWxImg,
				phoneNumber: "",
				code: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				type: 1, // 区分登录方式
				disabled: true ,
			}
		},
		onLoad() {
			// #ifdef MP
			if (!app.globalData.openId) {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						app.globalData.code = loginRes.code;
						// 请求接口
						let params = {
							code: app.globalData.code
						}
						HandleCode(params).then(res => {
							if (res.return_code == '000000') {
								app.globalData.openId = res.return_data.openId;
							}
						})
					},
				})
			}
			// #endif
			this.user = app.globalData.userInfo;
		},
		methods: {
			//开启状态
			getchecked() {
				this.disabled = !this.disabled
			},
			//跳转协议
			getDocument(item) {
				uni.navigateTo({
					url: './agreement/agreement?id=' + item
				})
			},
			getuserinfo() {
				let that = this;
				uni.getUserProfile({
					desc: '登录中...',
					success: function(res) {
						let params = {
							openId: app.globalData.openId,
							iv: res.iv,
							encryptedData: res.encryptedData
						}
						getUserInfo(params).then(res => {
							if (res.return_code == '000000') {
								app.globalData.userInfo = res.return_data
									.object
									.highUser;
								that.user = res.return_data.object.highUser;
								app.globalData.token = res.return_data.uniqueCode;
								that.isShowAuth = false
								uni.setStorage({
									key: "user",
									data: res.return_data
										.object
										.highUser
								})
								uni.setStorage({
									key: "token",
									data: res.return_data.uniqueCode
								})
								if (res.return_data.object.highUser.infoCompleteStatus == 0) {
									uni.navigateBack({})
								}
							} else {
								uni.showToast({
									title: res.return_msg,
									duration: 2000,
									icon: 'none'
								})
							}
						});
					},
					fail: res => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})
				that.isShowAuth = false
			},
			// 微信获取手机号
			loginByPhone(PhoneNumber) {
				if (this.disabled == false) {
					uni.showToast({
						title: '请勾选用户协议',
						icon: "none",
						duration: 2000
					})
					return;
				}
				if (PhoneNumber.detail.iv == undefined) {
					uni.showToast({
						title: "用户取消授权",
						icon: "none"
					});
					return;
				}
				let params = {
					openId: app.globalData.openId,
					iv: PhoneNumber.detail.iv,
					encryptedData: PhoneNumber.detail.encryptedData
				}
				loginByPhone(params).then(res => {
					if (res.return_code == '000000') {
						uni.showToast({
							title: '手机号授权成功',
							icon: 'none',
							duration: 2000
						})
						this.user = res.return_data.object.highUser;
						app.globalData.token = res.return_data.uniqueCode;
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						uni.setStorage({
							key: "token",
							data: res.return_data.uniqueCode
						})
						if (res.return_data.object.highUser.infoCompleteStatus == 0) {
							uni.navigateBack({})
						}
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			getH5userinfo() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			//改变登录方式
			updateStu(item) {
				if (this.disabled == false) {
					uni.showToast({
						title: '请勾选用户协议',
						icon: "none",
						duration: 2000
					})
					return;
				}
				this.type = item;
			},
			//发送短信
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '发送中...'
				})
				let params = {
					phone: this.phoneNumber
				}
				getLoginSMSCode(params).then(res => {
					if (res.return_code == '000000') {
						this.getCodeisWaiting = true;
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						this.setTimer();
					} else {
						uni.showToast({
							title: res.return_msg,
							duration: 2000,
							icon: "none"
						})
						uni.hideLoading()
					}
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			//手机短信登录
			doReg() {
				uni.hideKeyboard()
				//模板示例部分验证规则
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				let params = {
					phone: this.phoneNumber,
					type: "SMS",
					platform: "H5",
					smsCode: this.code

				}
				phone(params).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000') {
						app.globalData.token = res.return_data.uniqueCode;
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						uni.setStorage({
							key: "token",
							data: res.return_data.uniqueCode
						})
						uni.navigateBack({})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	.btns {
		border-radius: 6px;
	}

	page {
		background-color: #f0f0f1;
	}

	.container {

		.banner {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 350rpx;
		}

		.identity-code {
			width: 150rpx;
			height: 150rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: relative;
		}



		.img1 {
			border: 1px solid rgba(255, 255, 255, 0.4);
			border-radius: 100%;
			width: 130rpx;
			height: 130rpx;
		}

		.shuju {
			margin: 0rpx 10rpx;
		}

		// 右边
		.aut-code {
			width: 150rpx;
			height: 150rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.notice {
			border-bottom: 20rpx solid #f0f0f1;
			background-color: #FFFFFF;
			padding: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;

			.name {
				font-size: 34rpx;
				font-weight: 600;
				color: #2c2d28;
			}

			.checkbox {
				display: flex;
				align-items: center;
				// line-height: 35rpx;

				.checkyes {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border: 1px solid #f4f4f4;
					background-color: #089BF5;
					margin-right: 10rpx;
					border-radius: 50%;
					text-align: center;
					vertical-align: sub;
				}

				.checkno {
					width: 35rpx;
					height: 35rpx;
					display: inline-block;
					border: 1px solid #666;
					margin-right: 10rpx;
					border-radius: 50%;
					vertical-align: sub;
				}
			}

		}

		.phone {
			width: 80%;
			margin: auto;
			padding: 20rpx;
			border-radius: 25rpx;
			box-shadow: 5rpx 5rpx 10rpx 10rpx #a1a1a1;
			background-color: rgba(255, 255, 255, 1);

			.ph-title {
				display: block;
				width: 100%;
				// border: 1px solid red;
				text-align: center;
				color: #000000;
				font-size: 40rpx;
				margin-bottom: 25rpx;

			}

			.ph-phone {
				display: flex;
				width: 90%;
				margin: auto;
				align-items: center;
				margin-top: 50rpx;
				margin-bottom: 50rpx;

				.ph-it1 {
					flex: 3;
					display: inline-block;
					border-bottom: 1px solid #b5b5b5;
				}

				.ph-btn {
					flex: 2;
					margin-left: 10rpx;
					display: inline-block;
					border: 1px solid #2cb0b0;
					border-radius: 18rpx;
					text-align: center;
					height: 50rpx;
					line-height: 45rpx;
				}
			}

		}

		.confirm-box {
			display: flex;
			flex-direction: row;
			margin-top: 100rpx;

			.cancel {
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: 700;
				background-color: #089bf5;
				width: 40%;
				padding: 0px;
				color: #fff;
			}

			.confirm {
				border-radius: 10rpx;
				background-color: #089bf5;
				font-size: 32rpx;
				font-weight: 700;
				color: #FFFFFF;
				width: 40%;
				padding: 0px;
			}
		}
	}
</style>
