<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="close" :round="10" zIndex="999999">
			<view class="popup-box" style="background: #FFF;">
				<view class="title">
					授权登录
					<view class="iconClear">
						<u-icon name="close" size="14" @click="close"></u-icon>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view style="width: 100%;display: flex;justify-content: center;">
					<u-icon color="#19be6b" name="fingerprint" size="40px"></u-icon>
				</view>
				<view class="logo-box">

					<u-button v-if="storeDetail.display_setting && storeDetail.display_setting.wx_login_phone == 1"
						type="success" text="登录/注册" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber"></u-button>

					<u-button v-else type="success" text="登录" @click="click"></u-button>
				</view>
				<!-- #endif -->

				<!-- #ifdef MP-ALIPAY -->
				<view style="width: 100%;display: flex;justify-content: center;">
					<u-icon color="#2979ff" name="zhifubao" size="40px"></u-icon>
				</view>
				<view class="logo-box">
					<u-button type="primary" text="支付宝授权登录" @click="click"></u-button>
				</view>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<template v-if="$utils.isInWeChatBrowser()">
					<view style="width: 100%;display: flex;justify-content: center;">
						<u-icon color="#19be6b" name="fingerprint" size="40px"></u-icon>
					</view>
					<view class="logo-box">
						<!-- <u-button @click="click" shape="circle" type="success" text="微信快捷登录"></u-button> -->
						<u-button @click="$utils.toUrl('/subPackages/login/login/index')" shape="circle" type="success" text="微信快捷登录"></u-button>
					</view>
				</template>
				<template v-else-if="$utils.isInAliBrowser()">
					<view style="width: 100%;display: flex;justify-content: center;">
						<u-icon color="#2979ff" name="zhifubao" size="40px"></u-icon>
					</view>
					<view class="logo-box">
						<u-button @click="click" type="primary" text="支付宝授权登录"></u-button>
					</view>
				</template>
				<template v-else>
					<view class="logo-box">
						<u-button @click="$utils.toUrl('/subPackages/login/login/index')" shape="circle" type="success"
							text="去登陆"></u-button>
					</view>
				</template>
				<!-- #endif -->

				<!-- #ifdef APP -->
				<template>
					<view class="logo-box">
						<u-button @click="$utils.toUrl('/subPackages/login/login/index')" shape="circle" type="success"
							text="去登陆"></u-button>
					</view>
				</template>
				<!-- #endif -->
			</view>
		</u-popup>
	</view>
</template>


<script>
	// #ifdef H5
	// import ap from "@/uni_modules/alipayjsapi/alipayjsapi.js"
	// #endif
	export default {
		data() {
			return {

			}
		},
		props: {
			show: Boolean
		},
		computed: {
			storeDetail() {
				return this.$store.state.$GstoreDetail || {}
			}
		},
		methods: {
			close() {
				this.$emit('loginShow', false)
			},
			click() {
				this.$emit('empower', true)
			},
			// // 微信登录 H5
			// async weChatLogin() {
			// 	// 从后端API获取微信H5相关信息
			// 	const res = await this.$api.common.wechatH5();
			// 	// 获取微信应用的 appid
			// 	const appid = res.data.appid;
			// 	// 获取当前页面的重定向地址并进行编码
			// 	let redirect_uri = window.location.href;
			// 	redirect_uri = encodeURIComponent(redirect_uri);
			// 	// 构建微信授权链接，包含应用的appid、重定向地址等参数
			// 	const wxAuthUrl =
			// 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
			// 	// 通过重定向将用户导向微信授权页面
			// 	window.location.href = wxAuthUrl;
			// },
			// // 支付宝h5登陆
			// async aliH5Login() {
			// 	// 获取和授权的
			// 	ap.getAuthCode({
			// 		appId: '2021004101685250',
			// 		scopes: ['auth_user'],
			// 	}, function(res) {
			// 		ap.alert(JSON.stringify(res));
			// 		if (res.authCode) {
						
			// 		} else {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: res.errorDesc
			// 			})
			// 		}
			// 	});
			// },
			async getPhoneNumber(e) {
				let detail = e.detail
				console.log(detail, 'detail')
				if (detail.errMsg == 'getPhoneNumber:ok') {
					let code = detail.code
					this.login({
						phone_code: code
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: detail.encryptedData
					})
				}
			},
			login({
				phone_code
			} = {}) {
				// console.log(phone_code, 'phone_code')
				this.$emit('goLogin', true, {
					phone_code: phone_code
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		padding-bottom: 20px;

		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			position: relative;
			line-height: 100rpx;
			border-radius: 20rpx 20rpx 0 0;
			font-weight: bold;

			.iconClear {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
			}
		}

		.logo-box {
			padding: 30rpx 0;
			text-align: center;
			margin: 0 100rpx;
		}
	}
</style>