<template>
	<view class="weixin-login">
		<!-- 微信授权手机号一键登录 -->
		<view class="wechat-auth agree">
			<button class="btn-normal" v-if="!disabled" @click="onAgree">
				<view class="wechat-auth-container">
					<!-- <image class="icon" src="../../../static/channel/wechat.png"></image> -->
					<text class="title">手机号快捷登录</text>
				</view>
			</button>
			<button v-else class="btn-normal" open-type="getPhoneNumber"
				@getphonenumber="handelMpWeixinMobileLogin($event)" @click="clickPhoneNumber">
				<view class="wechat-auth-container">
					<!-- <image class="icon" src="../../../static/channel/wechat.png"></image> -->
					<text class="title">手机号快捷登录</text>
				</view>
			</button>
		</view>
		<view class="agree-text" @click="onRadio">
			<view class="item">
				<!-- <image src="../../../static/icon/g.svg"></image> -->
				<label>
					<radio value="index" :checked="disabled" />已阅读并同意
				</label>
				<view class="xieyi" @click.stop="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
				<view class="xieyi" @click.stop="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
			</view>
		</view>
		<u-popup :show="showAgree" mode="center" :round="10" :closeable="true" @close="showAgree = false">
			<view class="offline">
				<view class="head">
					<view class="info">
						<text class="title">请阅读并同意《用户协议》《隐私政策》</text>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import store from '@/store'
	import storage from '@/utils/storage'
	import {
		isEmpty,
		inArray
	} from '@/utils/util'

	export default {
		props: {
			// 是否存在第三方用户信息
			isParty: {
				type: Boolean,
				default: () => false
			},
			// 第三方用户信息数据
			partyData: {
				type: Object
			}
		},

		data() {
			return {
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				code: '',
				disabled: false,
				showAgree: false
			}
		},

		methods: {

			// 按钮点击事件: 获取微信手机号按钮
			// 实现目的: 在getphonenumber事件触发之前获取微信登录code
			// 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
			async clickPhoneNumber() {
				this.code = await this.getCode()
			},

			// 微信授权获取手机号一键登录
			// getphonenumber事件的回调方法
			async handelMpWeixinMobileLogin(e) {
				const {
					detail
				} = e;
				const app = this
				if (detail.errMsg != 'getPhoneNumber:ok') {
					console.log('微信授权获取手机号失败', detail.errMsg)
					// app.$error(detail.errMsg)
					return
				}
				if (detail.errMsg == 'getPhoneNumber:ok') {
					app.isLoading = true
					store.dispatch('LoginMpWxMobile', {
							code: detail.code,
							encryptedData: detail.encryptedData,
							iv: detail.iv,
							isParty: app.isParty,
							partyData: app.partyData,
							refereeId: Number(storage.get('refereeId'))
						})
						.then(result => {
							console.log("result: ", result);
							// 显示登录成功
							app.$toast(result.message)
							// 跳转回原页面
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index',
									complete(res) {
										console.log(res)
									}
								})
							}, 1000)
						})
						.catch(err => {
							console.log("err: ", err);
							// const resultData = err.result.data
							// 显示错误信息
							app.$error(err.message)
							// if (isEmpty(resultData)) {
							// 	app.$toast(err.result.message)
							// }
							// 跳转回原页面
							// if (resultData.isBack) {
							// 	setTimeout(() => app.onNavigateBack(1), 2000)
							// }
						})
						.finally(() => app.isLoading = false)
				}
			},

			onRadio() {
				this.disabled = !this.disabled
			},

			// 获取微信登录的code
			// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('code', res.code)
							resolve(res.code)
						},
						fail: reject
					})
				})
			},

			iAgree() {
				this.disabled = !this.disabled
				this.showAgree = false
			},

			onAgree() {
				this.$error('请阅读并同意(勾选)《用户协议》《隐私政策》')
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agree {
		background: linear-gradient(#27b0fd, #3f72f4);
		// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
	}

	// 微信授权登录
	.wechat-auth {
		width: 600rpx;
		height: 86rpx;
		margin: 100rpx auto 50rpx auto;
		color: $main-text;
		border-radius: 12rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn-normal {
			width: 580rpx;
		}

		.btn-normal-no {
			width: 580rpx;
		}

		button {
			background: none !important;
		}

		.wechat-auth-container {
			display: flex;
			justify-content: center;
			display: flex;
			align-items: center;
			color: $main-text;
			background: none !important;

			.title {
				color: #f3f3f3;
			}
		}

		// 登录按钮
		.login-button {
			width: 100%;
			height: 86rpx;
			margin-top: 80rpx;
			background: linear-gradient(#ff0077, #4d0d68);
			// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
			color: $main-text;
			border-radius: 80rpx;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
			letter-spacing: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}


	.offline {
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 120rpx;
		line-height: 120rpx;
		padding: 30rpx;

		.head {
			padding-top: 10rpx;
			width: 600rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: 600;
			}

			.sub-title {
				padding-top: 8rpx;
				padding-left: 40rpx;
				color: #3f72f4;
				font-size: 26rpx;
			}
		}

		.desc {
			color: #3f72f4;
			display: flex;
			font-size: 26rpx;
			line-height: 3rem;
		}
	}

	.agree-text {
		text-align: center;
		width: 750rpx;
		font-size: 26rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.xieyi {
				color: #3f72f4;
				// text-decoration:underline;
			}
		}
	}
</style>