<template>
	<view
		style="height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;">
		
		<view style="padding: 35rpx;">
			<button type="primary" block open-type="getUserInfo" @getuserinfo="appLoginWx">
				微信一键登录
			</button>
		</view>
		<ywx-auth-model></ywx-auth-model>
	</view>
</template>

<script>
	//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
	import ywxAuthModel from "@/components/ywx-auth-model/ywx-auth-model.vue";

	export default {
		//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步） 
		components: {
			ywxAuthModel
		},
		data() {
			return {
				openid: "",
				loginstate: "0",
				openid: "",
				userEntity: null,
				terminal: "",
				osVersion: "",
				phoneNumber: "",
				showModal: false, //定义登录弹窗  
			}
		},
		onLoad: function() {},
		methods: {
			// 授权获取微信用户信息
			appLoginWx(res) {
				console.log(res)
				// 获取用户信息成功
				if (res.detail.errMsg === 'getUserProfile:ok' || res.detail.errMsg === 'getUserInfo:ok') {
					this.userInfo = res.detail.userInfo;
					let _this = this;
					uni.showLoading({
						title: '获取用户信息...',
						mask: true
					});
					// 获取jsCode
					uni.login({
						provider: 'weixin',
						success(resLogin) {
							console.log(resLogin);
							if (resLogin.errMsg === "login:ok") {
								// 获取jsCode成功，通过jsCode调用微信api获取用户openId
								_this.wechatLogin(resLogin.code);
								return
							}
							uni.hideLoading();
							uni.showToast({
								title: '获取用户信息失败，请重试',
								icon: 'none',
								duration: 2000
							});
						},
						fail() {
							uni.hideLoading();
							uni.showToast({
								title: '获取用户信息失败，请重试',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			},
			wechatLogin(wxCode) {
				// 这里一般让后端去调用微信api获取openId等信息，前端调用的话像会多下面这个请求
				// 因为若果是后端去调用的话，后端拿到微信api返回的openId后可直接去数据库查询判断该用户是否已注册，
				// 如果已经注册了就直接返回注册的用户信息，
				// 如果未注册，则后端需要返回openId、sessionKeyde等信息，
				// 然后前端页面弹出授权获取手机号码的按钮，用户点击后拿到手机号后进行解密后再把信息提交给后台进行注册
				const params = {
					appid: this.appId, // 小程序的appId（注意需要企业的appId，并且你目前是开发人员，不然后续无法获取到手机号码）
					secret: '***************', // 企业小程序的secret
					js_code: wxCode, // 注意jsCode动态获取的，使用一次后将失效
					grant_type: 'authorization_code' // 这个参数固定写死
				}
				that.$ajax('index/index', {
					code: resLogin.code
				}).then(res => {
					console.log(res)
				})
				// 调用微信api获取openid等信息
				this.$get('https://api.weixin.qq.com/sns/jscode2session', params).then(res => {
					console.log(res)
					if (res.errcode) {
						console.log('获取openId失败')
						uni.hideLoading();
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none',
							duration: 2000
						});
						return
					}
					this.openId = res.openid
					this.sessionKey = res.session_key
					this.unionid = res.unionid

					// 调用后端接口判断用户是否已注册过
					this.$post('/login', {
						openId: this.openId
					}).then(res => {
						uni.hideLoading();
						// 若返回的参数中有token说明已经注册过
						if (res.status === 200 && res.data.token) {
							uni.showToast({
								title: '登录成功！',
								duration: 1000
							});
							// 缓存用户信息
							uni.setStorageSync("token", res.data.token);
							uni.setStorageSync("userInfo", res.data);
							// 登录成功返回上一页
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
							return
						}
						// 走到这里说明没有注册过，需要弹出授权获取用户手机号的弹框按钮让用户授权
						if (res.status == 200) {
							this.showPhone = true
							return
						}
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}).catch(() => {
						uni.hideLoading();
						uni.showToast({
							title: '登录失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					})

				}).catch(err => {
					console.log(err)
					uni.hideLoading();
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none',
						duration: 2000
					});
				})

				// 下面注释的就是后端去调用微信api获取用户openId的提供给前端的接口
				// this.$post('/login', {
				//     jsCode: wxCode
				// }).then(res => {
				//     console.log(res);
				//     uni.hideLoading();
				//     // 若直接返回token说明已经注册
				//     if (res.status === 200 && res.data.token) {
				//         uni.showToast({
				//             title: '登录成功！',
				//             duration: 1000
				//         });
				//         uni.setStorageSync("token", res.data.token);
				//         this.saveUserInfo(res.data);
				//         setTimeout(() => {
				//             // this.goTabBar('/pages/index')
				//             uni.navigateBack({
				//                  delta: 1
				//             })
				//         }, 1000)
				//         return
				//     }
				//     if (res.status == 200) {
				//         this.openId = res.data.openid
				//         this.sessionKey = res.data.session_key
				//         this.unionid = res.data.unionid
				//         this.id = res.data.id
				//         this.showPhone = true
				//         return
				//     }
				//     uni.showToast({
				//         title: res.message,
				//         icon: 'none',
				//         duration: 2000
				//     });
				// }).catch(() => {
				//     uni.hideLoading();
				//     uni.showToast({
				//         title: '登录失败，请稍后重试',
				//         icon: 'none',
				//         duration: 2000
				//     });
				// })
			},
			// 授权电话号回调 (这里千万注意：小程序必须要完成 微信认证才能获取到加密的手机号码)
			getPhone(res) {
				console.log(res)
				if (res.detail.errMsg === 'getPhoneNumber:ok') {
					const encryptedData = res.detail.encryptedData
					console.log(123, sessionKey, encryptedData, iv)
					const pc = new WXBizDataCrypt(this.appId, this.sessionKey)
					const data = pc.decryptData(encryptedData, res.detail.iv) // 这里使用解密手机号的方法
					console.log('解密后 data: ', data.phoneNumber)
					this.phone = data.phoneNumber
					this.showPhone = false
					this.loginHandle()
				} else {
					this.showPhone = false
					uni.showToast({
						title: '获取手机号失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 用户注册
			loginHandle() {
				const data = {
					"account": this.phone,
					"icon": this.userInfo.avatarUrl,
					"id": this.id,
					"nickname": this.userInfo.nickName,
					"openId": this.openId,
					"phone": this.phone,
					"unionid": this.unionid
				}
				console.log(data)
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				this.$post('/login/login', data).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.status == 200) {
						uni.showToast({
							title: '登录成功！',
							duration: 1000
						});
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("userInfo", res.data);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style>

</style>
