<template>
	<!-- 小程序登录流程是，获取登录信息，获取openid 头像 姓名 ，然后再获取手机号传给后台-->

	<!-- #ifdef MP-WEIXIN -->
	<view v-if="isCanUse">
		<view>
			<view class='headers'>
				<image src='../../static/img/logo.png'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>

	         <!-- 获取手机号 -->
			<button v-show="weixinPhone"class='bottom' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>

             <!-- 获取登录信息 -->
			<button v-show="!weixinPhone" class='bottom' bindtap="getUserProfile" @tap="wxGetUserInfo">
				授权登录
			</button>

		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	var _this;

	export default {
		data() {
			return {
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
				platform: "mp",
				weixinPhone: false,
				iv: '',
				sessionkey: '',
				//logo图片 base64
				logoImage: '',
			}
		},
		onLoad() {
			
			

		},

		mounted() {
			_this = this;
		},
		methods: {
			//小程序微信登录后获取手机号
			getPhoneNumber: function(e) {
				console.log(e);
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝提供手机号');
				} else {
					console.log('用户同意提供手机号');
					this.setPhoneByInsert(e.detail.encryptedData, e.detail.iv);

				}
			},
			//小程序微信登录后获取手机号
			setPhoneByInsert(decryptData, iv) {
				this.$queue.showLoading('登录中...');

				let data = {
					decryptData: decryptData,
					key: this.sessionkey,
					iv: iv
				};
				this.$Request.postT('/wx/selectPhone', data).then(res => {
					if (res.status === 0) {
						uni.hideLoading();
						this.phone = res.data.phoneNumber;
						this.getWeixinInfo(this.nickName, this.avatarUrl);

					} else {
						uni.hideLoading();
						this.$queue.showToast(res.msg);
					}
				})
			},
			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;

				wx.getUserProfile({
					desc: '业务需要',
					success: function(infoRes) {
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						try {
							uni.setStorageSync('isCanUse', false); //记录是否第一次授权  false:表示不是第一次授权
							_this.iv = infoRes.iv;
							_this.login(nickName, avatarUrl)

						} catch (e) {}
					},
					fail(res) {}
				});
			}, //登录
			
            //请求后台接口 登录更新用户信息
			getWeixinInfo(nickName, avatarUrl) {
				uni.showLoading({
					title: '登录中...'
				});
				let relation = this.$queue.getData("relation");
				if (relation) {
					this.invitation = relation;
				} else {
					this.invitation = this.$queue.getInvitation();
				}
				this.$Request.postJson("/user/mp/update", {
					invitation: this.invitation,
					unionid: this.$queue.getData("unionid"),
					imageUrl: avatarUrl,
					nickName: nickName,
					openid: this.$queue.getData("openid"),
					phone: this.phone,
				}).then(res => {
					if (res.status === 0) {
						this.$queue.setData("token", res.data.uuid);
						this.$queue.setData("userId", res.data.userId);
						this.$queue.setData("mobile", _this.phoneData);
						this.getUserInfo(res.data.userId, res.data.uuid);
					} else {

						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});
					}
				});
			},
			
			//登录接口
			login(nickName, avatarUrl) {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;

						_this.$Request.getT("/wx/mp/login?code=" + code).then(res => {
							if (res.status === 0) {
								_this.$queue.setData("openid", res.data.open_id)
								_this.$queue.setData("unionid", res.data.unionid)
								_this.nickName = nickName; //昵称
								_this.avatarUrl = avatarUrl; //头像
								_this.sessionkey = res.data.session_key;
								uni.hideLoading()
								if (res.data.isPhone == '否') {
									_this.getWeixinInfo(_this.nickName, _this.avatarUrl);
								} else {
									if (res.data.phone) {
										_this.getWeixinInfo(_this.nickName, _this.avatarUrl);
									} else {
										_this.weixinPhone = true;
									}
								}

							
							}
						});
					},
				});
			},
			
		   //获取用户信息 自己后台写接口
			getUserInfo(userId, token) {
				this.$Request.getT("/user/" + userId).then(res => {
					if (res.status === 0) {
						this.$queue.setData("image_url", res.data.image_url ? res.data.image_url :
							'/static/img/common/logo.jpg');
						this.$queue.setData("relation_id", res.data.relationId);
						this.$queue.setData("relation", res.data.invitation);
						this.$queue.setData("grade", res.data.grade);
						this.$queue.setData('pddpid', res.data.pdd);
						this.$queue.setData('jdpid', res.data.jd);
						this.$queue.setData("isInvitation", res.data.isInvitation);
						this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
						this.$queue.setData("gender", parseInt(res.data.gender));
						let href = this.$queue.getData("href");
						if (href) {
							if (href === '/pages/member/publisher') {
								this.$queue.remove("href");
								uni.redirectTo({
									url: '/pages/member/publisher?uid=' + userId + '&token=' + token
								});
							} else if (href === '/pages/member/user') {
								this.$queue.remove("href");
								uni.switchTab({
									url: '/pages/member/user'
								});
							} else {
								this.$queue.remove("href");
								uni.redirectTo({
									url: href
								});
							}
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}

					} else {
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});
						this.$queue.logout();
					}
					_this.isRotate = false
				});
			}
		}
	}
</script>

<style lang='scss'>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.back-btn {
		position: absolute;
		left: 20px;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 20px;
		font-size: 20px;
		opacity: 0.8;
		color: $font-color-dark;
	}

	.headers {

		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.headers image {
		border-radius: 100upx;
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		line-height: 80upx;
		border-radius: 80upx;
		margin: 70rpx 50rpx;
		height: 80upx;
		font-size: 35rpx;
	}
</style>