<template>
	<view class="indexassembly" :style="{width:width,height:height}">
		<view>
			<slot>
				登录
			</slot>
			<button class="hotsopt" :style="{width:width,height:height}" open-type="getUserInfo" @tap="getUserProfile()"
				@click="getCode"></button>
		</view>
		<van-popup :show="showPhone" @click-overlay="closeOverlayHandler">
			<view
				style="width: 70vw;background: #FFF;display: flex;flex-direction: column;align-items: center;padding-bottom: 20px;border-radius: 8px;">
				<view
					style="width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #EBEBEB;color: #111111;">
					手机号授权
				</view>
				<image :src="obj.Photo" style="width: 120rpx;height: 120rpx;border-radius: 50%;margin-top: 15px;">
				</image>
				<text style="margin-top: 15px;font-size: 18px;font-weight: bold;color: #111111;">{{obj.Name}}</text>
				<text style="margin-top: 5px;font-size: 13px;color: #111111;">申请获取您微信绑定的手机号码</text>
				<view class="btn">获取手机号
					<button type="default" open-type="getPhoneNumber" v-if="showLogin == true"
						style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;"
						@getphonenumber=" decryptPhoneNumber"></button>
				</view>
			</view>
		</van-popup>
	</view>

</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import {
		login,
		phoneLogin,
		parsePhone
	} from "../../../api/index";

	export default {
		name: "",
		props: {
			state: String,
			width: {
				type: String,
				default: '100rpx'
			},
			height: {
				type: String,
				default: '100rpx'
			},
		},
		components: {},
		setup(props, {
			attrs,
			slots,
			emit
		}) {

			const pages = getCurrentPages() // 获取栈实例
			const currentRoute = pages[pages.length - 1].route; // 获取当前页面路由

			let Toast = inject("$toast");
			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
			});
			let methods = {
				closeOverlayHandler(){
					data.showPhone=false
				},
				getUserProfile() {
					//新的获取用户资料
					var that = this;
					wx.getUserProfile({
						desc: "用于完善资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (info) => {
							data.obj.Name = info.userInfo.nickName;
							data.obj.Photo = info.userInfo.avatarUrl;
							data.showPhone = true; //显示获取手机号码弹窗
							if (currentRoute == "pages/index/index") {
								uni.hideTabBar() //手机授权弹窗出现 隐藏tabbar 
							}
						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败",
								icon: "none",
							});
						},
					});
				},
				decryptPhoneNumber(e) { //授权手机号码
					if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
						uni.showToast({
							title: "微信手机号码授权失败",
							icon: "none",
						});
					} else { //授权通过
						// console.log(e)
						data.obj.iv = e.detail.iv
						data.obj.encryptedData = e.detail.encryptedData
						// that.getCode()
						that.parsePhoneNum(data.obj.encryptedData, data.obj.iv, data.obj.code)
					}
				},
				getCode() { //获取code
					uni.getProvider({
						service: "oauth",
						success: function(res) {
							if (~res.provider.indexOf("weixin")) {
								uni.login({
									provider: "weixin",
									success: (res) => {
										//获取code
										data.obj.code = res.code

									},
									fail: () => {
										uni.showToast({
											title: "微信登录授权失败",
											icon: "none",
										});
									},
								});
							} else {
								uni.showToast({
									title: "请先安装微信或升级版本",
									icon: "none",
								});
							}
						},
					});
				},
				//解密手机号
				async parsePhoneNum(encryptedData, iv, code) {
					uni.showLoading({
						title: "登录中",
					});
					data.showLogin = false; //防止多次点击登录
					let res = await parsePhone({
						code,
						encryptedData,
						iv,
						AccountType:2
					})
					console.log(res)
					if (res && res.Data.UserMobile) {
						// console.log('dsadas', res)
						// data.obj.phoneNum = res.Data.UserMobile
						// that.phoneNumLogin()
						// let obj = {
						// 	Account: data.obj.phoneNum,
						// 	WeChatName: data.obj.Name,
						// 	WeChatPhoto: data.obj.Photo,
						// 	OpenId: data.obj.openid,
						// 	unionid: data.obj.unionid,
						// }
						uni.setStorageSync("userInfo", res.Data);
						uni.reLaunch({
							url:'/pages/index/index'
						})
						
					} else {
						Toast.fail("授权失败,请重新授权")
						data.showLogin = true; //防止多次点击登录
						uni.hideLoading();
					}
				},
				//手机号授权登录
				// async phoneNumLogin() {
				// 	let res = await phoneLogin({
				// 		Account: data.obj.phoneNum,
				// 		OpenId: data.obj.openid,
				// 		unionid: data.obj.unionid,
				// 	})
				// 	if (res.Code == 1) {
				// 		uni.hideLoading();
				// 		data.showLogin = true; //防止多次点击登录
				// 		res.Data.Account = data.obj.phoneNum;
				// 		uni.setStorageSync("userInfo", res.Data);
				// 		Toast.success("登录成功");
				// 		setTimeout(()=>{
				// 			emit('success')
				// 		},1000)
				// 		data.showPhone = false
				// 		uni.showTabBar()
				// 	} else {
				// 		data.showLogin = true; //防止多次点击登录
				// 		data.showPhone = false
				// 		if (currentRoute == "pages/index/index") {
				// 			uni.showTabBar() //手机授权弹窗出现 隐藏tabbar 
				// 		}
				// 		uni.hideLoading();
				// 		if (res.Data.Error == -1) { //如果没找到电话号码 就跳入登录
				// 			// setTimeout(() => {
				// 			//   uni.reLaunch({
				// 			//   	url: '/pages/login/login'
				// 			//   });
				// 			// }, 1000);
				// 		}

				// 	}
				// }
			};

			onMounted(() => {
				//   console.log(38, props);
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>
<style scoped>
	.indexassembly {
		line-height: 90rpx;
		position: relative;
	}

	.hotsopt {
		position: absolute;
		background: transparent;
		border: none;
		outline: none;
		opacity: 0;
		left: 0;
		top: 0;
	}

	.btn {
		width: 60vw;
		height: 60rpx;
		border-radius: 30rpx;
		background: #4C50E7;
		font-size: 14px;
		color: #FFFEFE;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		position: relative;
	}
</style>
