<template>
	<view class="container">
		<view class="authModal">
			<view class='header'>
				<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582442269885&di=244f11fe921a75d4be2b7f41bded8a48&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fuploads%2F2018-12-06%2F062323200.jpg'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>

			<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxLogin">
				授权登录
			</button>
			<button class='bottom' type='danger' @click="notAuth4Login()">
				取消授权
			</button>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				// hasAuthed: uni.getStorageSync('accessToken'),
			}
		},
		// computed: {
		// 	...mapState(['hasLogined', 'userInfo'])
		// },
		methods: {
			wxLogin(e) { // 第一次微信授权登录
				const VUE = this;
				VUE.logining = true;
				uni.login({ // 请求微信后台接口，获取code
					provider: "weixin",
					success: (login_res => {
						let code = login_res.code;
						uni.getUserInfo({ // 已授权的用户获取用户详情
							async success(info_res) {
								let userInfo = JSON.parse(info_res.rawData);
								// 向服务器发起登录请求
								let res = await VUE.$http.call('/api/login/weChatLogin', {
									jsCode: code,
									...userInfo,
									bindAuthor: uni.getStorageSync('bindAuthor')
								})
								if(res){ // 登录成功
									await uni.setStorageSync("userInfo", res.result);
									await uni.setStorageSync('accessToken', res.accessToken)
									console.log('用户的openId', res.result.wxOpenid)
									VUE.$util.toast('授权登录成功')
									VUE.$store.commit('login', res.result) // 设置登录信息
									uni.reLaunch({ // 授权登录成功后，跳转到我的页面
										url: '/pages/user/user'
									})
									// util.refreshPage()
									// uni.navigateBack() // 返回上一个需要授权操作的页面
								}
								// 登录成功后，更新登录状态store 刷新上一页的load
								// VUE.$util.getToken() &&  && VUE.$util.refreshPrePage(); 
							}
						})
					})
				})
			},
			notAuth4Login(){
				// uni.navigateBack() // 返回上一页
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		position: relative;

		// 微信授权弹窗
		.authModal {
			position: absolute;
			top: 0;
			background-color: #fff;
			z-index: 100;
			margin-top: 30rpx;
			margin-left: 50%;
			border: 1px solid #eee;
			transform: translateX(-50%);
			border-radius: 10px;

			.header {
				margin: 90rpx 0 90rpx 50rpx;
				border-bottom: 1px solid #ccc;
				text-align: center;
				width: 650rpx;
				height: 300rpx;
				line-height: 450rpx;
				image {
					width: 200rpx;
					height: 160rpx;
				}
			}
			
			.content {
				margin-left: 50rpx;
				margin-bottom: 90rpx;
				text {
					display: block;
					color: #9d9d9d;
					margin-top: 40rpx;
				}
			}
			.bottom {
				/* border-radius: 80rpx; */
				margin: 70rpx 50rpx;
				font-size: 35rpx;
			}
		}
	}
</style>