<template>
	<view class="container">
	    <!-- 自定义顶部 -->
	    <view class="custom-header">
			<uni-icons type="left" size="40rpx" class="uni_back" @click="goBack"></uni-icons>
	      <view class="left-icon" @click="goBack">授权</view>
	      <view class="title"></view>
	    </view>
	
	    <!-- 页面内容 -->
	    <view class="content">
	      <view class="meisheng_first_aid">
	      	<image src="../../static/login/logo.png" mode=""></image>
	      </view>
		  <view class="con_btn">
		  	<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
			<button type="primary" ref="primaryBtn" @click="zanBtn">暂不登陆</button>		

		  </view>
		  <!-- 内部使用 -->
		  <view class="tips">
		  	<uni-icons type="info" size="35rpx" color="#5581FF" style="margin-right: 5rpx;height:30rpx;width: 30rpx;"></uni-icons><text>仅限内部人员使用</text>
		  </view>
	    </view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup_my">
				<view class="popup_my_title">
					<view class="title_name">
						<view class="title_name_icon">
							
						</view>
						智慧院前急救
					</view>
					<view class="title_icon">
						<uni-icons type="info" size="30" color="#A3C7AF"></uni-icons>
					</view>
				</view>
				<view class="popup_my_message">
					获取你的昵称.头像.地区及性别
				</view>
				<view class="popup_my_name">
					<view class="my_name_icon">
						<view class="my_name_img">
							
						</view>
						<view class="my_name_message">
							<view class="my_name_top">
								可可
							</view>
							<view class="my_name_bon">
								微信个人信息
							</view>
						</view>
					</view>
					
					<view class="my_name_ok">
						<uni-icons type="checkmarkempty" size="30" color="#A3C7AF"></uni-icons>
					</view>
				</view>
		<!-- 		<view class="popup_my_other">
					使用其他头像和昵称
				</view> -->
				<view class="popup_my_btn">
					<button type="default" >拒绝</button>
					<button type="primary" >允许</button>
				</view>
			</view>
		</uni-popup>
		<button @click="tologin">点击跳转首页</button>
	  </view>

</template>

<script>
import { log } from 'util';
import {request} from '../../request/request.js'
	export default {
		data() {
			return {
				type:'',
				code:'',
				userInfo1:{},
				avatarUrl:'',
				nickName:'',
				sessionKey:'',
				unionId:'',
				username:'',
				phone:'',
				openId:'',
				form:{
			
				}
			};
		},
		onmounted(){
			

		},
		 methods: {

			 button(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			 },
		    goBack() {
		      uni.navigateBack();
		    },
			zanBtn(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
				// 清空所有数据
				uni.clearStorageSync();
			},
			async loginAndGetUserInfo() {
			    try {
			        const res1 = await new Promise((resolve, reject) => {
			            uni.login({
			                provider: 'weixin',
			                success: (res1) => resolve(res1),
			                fail: (err) => reject(err)
			            });
			        });
			
			        const res2 = await request({url:'/user/code2Session', data:{code:res1.code}});
			        this.openId = res2.openid;
			        this.sessionKey = res2.session_key;
			
			        if (this.sessionKey) {
			            const res = await new Promise((resolve, reject) => {
			                uni.getUserInfo({
			                    success: (res) => resolve(res),
			                    fail: (err) => reject(err)
			                });
			            });
			
			            const userInfo = res.userInfo;
			            const encryptedData = res.encryptedData;
			            const iv = res.iv;
			            const wxEncryptedForm = {
			                encryptedData,
			                iv,
			                sessionKey: this.sessionKey
			            };
			
			            const data = await request({url:'/user/encryptedData', method:'POST', data:wxEncryptedForm});
			
			            const form = {
			                sessionKey: this.sessionKey,
			                avatarUrl: data.avatarUrl,
			                nickName: data.nickName,
			                unionId: '',
			                username: uni.getStorageSync('userName'),
			                phone: '',
			                openId: this.openId
			            };
			
			            return form;
			        }
			    } catch (error) {
			        throw error;
			    }
			},
		// 一键登录
				async getPhoneNumber(e){	
				  try {
					   const data1 = await this.loginAndGetUserInfo();
					const code = e.detail.code;
					const res = await request({url:'/getPhoneNumber', data:{code}});
					const data = { ...data1, phone: res.purePhoneNumber };
					const loginRes = await request({url:'/login', method:'POST', data});
					uni.setStorageSync('loginRes',JSON.stringify(loginRes))
					uni.switchTab({
						url:'/pages/home/index'
					})
				    // 在这里可以获取到loginAndGetUserInfo方法中异步操作的返回值data，并进行进一步处理
				  } catch (error) {
				    console.error(error);
				  }
			},
		  }
	}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  position: relative;
}

.custom-header {
  height: 77rpx;
  background-color: #fff;
  color: black;
  display: flex;
  align-items: center;
  padding-top: 10rpx;
}
.uni_back{
	margin-left: 25rpx;
}
.left-icon {
  font-size: 20rpx;
  color: #141414;
  // width: 59rpx;
  height: 29rpx;
  line-height: 29rpx;
  font-weight: 400;
  font-size: 30rpx;
}
.content{
	position: relative;
	.meisheng_first_aid{
		position: absolute;
		top: 300rpx;
		left: 273rpx;
		width: 205rpx;
		height: 158rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.con_btn{
		width: 447rpx;
		height: 239rpx;
		position: absolute;
		left: 134rpx;
		top: 614rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		button{
			width: 325rpx;
			height: 75rpx;
			border-radius: 35rpx;
			line-height: 75rpx;
			font-size: 20rpx;
			font-style: 400;
		}
	}
	//提示信息
	.tips{
		position: absolute;
		left: 230rpx;
		top:1100rpx;
		width: 250rpx;
		height: 60rpx;
		color: #5581FF;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.popup-content{
	height: 600rpx;
}
//弹出层
.popup_my{
	width: 749rpx;
	height: 701rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0rpx 0rpx ;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
	.popup_my_title{
		width: 669rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title_name{
			display: flex;
			font-weight: 400;
			font-size: 32rpx;
			color: #141414;
			.title_name_icon{
				width: 54rpx;
				height: 54rpx;
				background: #548DEB;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
	.popup_my_message{
		width: 669rpx;
		height: 80rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #141414;
		border-bottom: 1rpx solid #ccc;
	}
	.popup_my_name{
		width: 669rpx;
		height: 90rpx;
		border-bottom: 1rpx solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 40rpx;
		.my_name_icon{
			display: flex;
			.my_name_img{
				width: 93rpx;
				height: 92rpx;
				background: #A3C7AF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 20rpx;
			}
		}
	}
	.popup_my_other{
		width: 669rpx;
		height: 60rpx;
		color: #548DEB;
		font-weight: 400;
		font-size: 32rpx;
	}
	.popup_my_btn{
		width: 669rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		button{
			width: 250rpx;
			height: 80rpx;
		}
	}
}
</style>
