<template>
	<view class="UserInfor" v-show="GetStep">
		<!-- 用户信息 -->
		<u-modal :show="true" :title="title" confirmText="授权" cancelText="暂不" showCancelButton @confirm="confirm">
			<template v-slot:confirmButton>
				<view class="btn">
					<view class="btn-item" @tap="SetStep(0)">
						暂不
					</view>
					<view class="btn-item" v-if="GetStep == 1" @tap="getUserInfo">
						同步个人信息
					</view>
					<view class="btn-item" v-if="GetStep == 2">
						<button class="openbtn" open-type="getPhoneNumber" @getphonenumber="getUserInfo">同步手机号</button>
					</view>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	/**
	 * @仿微信授权个人信息弹框
	 * */
	import {
		mapGetters,
		mapMutations,
		mapActions,
	} from 'vuex';
	export default {
		name: "authorization-userinfor",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('api', ['SetStep']),
			...mapActions('api', ['againAuth', 'alipayagainAuth', 'savePhone']),
			/**
			 * @点击确认授权用户信息
			 * */
			getUserInfo(e) {
				let self = this;
				// 判断当前是手机号授权还是用户信息授权
				if (this['GetStep'] == 1) {
					// 微信环境下
					// #ifdef MP-WEIXIN
					// 弹出授权
					uni.getUserProfile({
						desc: '用于完善会员资料',
						success(res) {
							// 重新获取code
							uni.login({
								provider: 'weixin',
								success(loginRes) {
									console.log('code', loginRes.code);
									uni.showLoading({
										title: '同步中...'
									});
									// 提交后台
									self.againAuth({
										rawData: res.rawData,
										code: loginRes.code
									}).then(res => {
										self.SetStep(2);
										uni.hideLoading();
									}).catch(res => {
										uni.hideLoading();
									})
								}
							})
						},
						fail(e) {
							console.log(e)
							self.SetStep(0);
						}
					});
					// #endif
					// 支付宝环境下
					// #ifdef MP-ALIPAY
					my.getAuthCode({
						scopes: 'auth_user',
						success: (res) => {
							my.alert({
								content: res.authCode,
							});
							self.alipayagainAuth({
								auth_code: res.authCode
							})
						},
					});
					// #endif
				} else {
					let encryptedData = e.detail.encryptedData;
					let iv = e.detail.iv;
					console.log(e,'-----------------');
					if (e.detail.errMsg === 'getPhoneNumber:fail user deny') return;
					uni.login({
						provider: 'weixin',
						success: res => {
							uni.showLoading({
								title: '同步中...'
							});
							self.savePhone({
								iv: iv,
								encryptedData: encryptedData,
								code: res.code,
							}).then(res => {
								uni.hideLoading();
								self.SetStep(0);
							}).catch(res => {
								uni.hideLoading();
								uni.showToast({
									title:res['msg'],
									icon:'none'
								})
							})
						},
						fail:()=>{
							
						}
					})
				}


			}
		},
		computed: {
			...mapGetters('api', ['GetStep']),

			title() {
				switch (this['GetStep']) {
					case 1:
						return '您需要授权个人信息';
					case 2:
						return '您需要授权手机号';
				}
			}
		},

	}
</script>

<style lang="scss">
	.UserInfor {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
	}

	.btn {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn-item {
		text-align: center;
		line-height: 88rpx;
		width: 50%;
		height: 100%;
		font-size: 30rpx;
		font-weight: 800;
		position: relative;
	}

	.openbtn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		font-size: 30rpx;

		&::after {
			border: none !important;
		}
	}
</style>
