<template>
	<view>
		<view class='login-header'>
			<image class="infoImg" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image>
			<view class="logo-name">{{appletName}}</view>
		</view>
		<view class="login-footer" v-if="ifEnter">
			<view class="login-btn" type='primary' @tap="empowerShow=true" v-if="!isActive">微信授权</view>
			<view class="login-btn" type='primary' @tap="bindGetUserInfo('other')" v-else>微信授权</view>
			<view class="agreement-box">如您点击授权，您将同意授权<text @tap="toAgreement" class="agreement">《免责声明》</text></view>
		</view>
		<!-- 获取头像&昵称 -->
		<view class="pop-up-bg" v-if="empowerShow">
			<view class="user-info-box">
				<view class="info">
					<view class="cover">
						<image :src="imgSrc" mode="aspectFit"></image>
					</view>
					<view class="name">{{appletName}}</view>
					<view class="tips">
						<view>邀请您补全个人信息</view>
						<view>(昵称、头像)</view>
					</view>
				</view>
				<view class="msg">
					<view class="item">
						<text>头像</text>
						<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
							<view class="img"><image :src="userInfo.avatarUrl || logoAvatar" mode="aspectFit"></image></view>
						</button>
					</view>
					<view class="item">
						<text>昵称</text>
						<input class="nick-name" type="nickname" @blur="nickNameInput" v-model="userInfo.nickName" placeholder="请输入昵称" placeholder-style="color:#999"/>
					</view>
				</view>
				<view class="empower-btns">
					<view class="btn" @tap="refuseEv">拒绝</view>
					<view class="btn" @tap="bindGetUserInfo('other')">授权</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					nickName:'',
					avatarUrl:''
				}, //用户信息
				imgSrc: '/static/public/logo.jpg', //默认logo头像
				logoAvatar:'/static/public/logo-avatar.jpg',//默认头像
				appletName:'萌狮武术', //小程序名称
				empowerShow:false, //是否显示授权弹窗
				isActive:false, //是否已授权
				ifEnter:false,//是否判断完成
			};
		},
		onLoad() {
			// 进入登录
			this.bindGetUserInfo('enter');
			console.log(uni.getStorageSync('invite_code'))
		},
		methods: {
			// 查看免责声明
			toAgreement(){
				uni.navigateTo({
					url:'/pagesB/disclaimers/disclaimers'
				})
			},
			
			// 头像上传
			uploadImg(url){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/file/upload/image',{path:url}).then(res=>{
					if(res.code==0) {
						this.userInfo.avatarUrl = `${getApp().globalData.hostapi}`+res.data.src;
					}
					uni.hideLoading();
				})
			},
			
			// 获取头像
			chooseAvatar(e){
				// 上传头像
				this.uploadImg(e.detail.avatarUrl)
			},
			
			// 获取昵称
			nickNameInput(e){
				this.userInfo.nickName = e.detail.value
			},
			
			// 拒绝登录
			refuseEv(){
				this.$toolAll.tools.showToast('您已拒绝授权');
				this.empowerShow = false;
			},
			
			// 验证登录信息
			checkForm(){
				if(!this.isActive){
					if(this.userInfo.avatarUrl==''){
						this.$toolAll.tools.showToast('请选择头像！')
						return false;
					}else if(this.userInfo.nickName==''){
						this.$toolAll.tools.showToast('请输入昵称！')
						return false;
					}else{
						return true;
					}
				}else{
					return true;
				}
			},
			
			//调起登录授权
			bindGetUserInfo(status) {
				let ya = this;
				//新版登录方式
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						if (res.code) {
							ya.updateUserInfo(res.code,status);
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
						}
					},
				});
			},
			
			//调用登录接口
			updateUserInfo(code,status) {
				let ya = this;
				if(status=='enter'){
					this.$requst.post('/api/user/login',{
						code:code,
						invite_code:uni.getStorageSync('invite_code')?uni.getStorageSync('invite_code'):''
						}).then(res => {
						if(res.code == 0){
							console.log(res,'进入登录信息');
							if(res.data.is_active==1){
								this.isActive = true;
							}else{
								uni.setStorageSync('token',res.data.token) //缓存token
							}
							this.ifEnter = true;
						}
					},error => {
						
					})
				}
				if(status=='other'){
					uni.showToast({
						title: '登录中...',
						icon:'loading',
						duration:10000
					})
					var params = {
						code:code,
						nickname: ya.userInfo.nickName,//用户昵称
						headimgurl: ya.userInfo.avatarUrl,//用户头像
						country: ya.userInfo.country,//用户所在国家
						province: ya.userInfo.province,//用户所在省份
						city: ya.userInfo.city,//用户所在城市
						gender: ya.userInfo.gender,//用户性别
						language:ya.userInfo.language,//语言
						invite_code:uni.getStorageSync('invite_code')?uni.getStorageSync('invite_code'):'',
						is_active:1
					}
					this.$requst.post('/api/user/login',params).then(res => {
						if(res.code == 0){
							uni.setStorageSync('userId',res.data.account_id)
							uni.setStorageSync('token',res.data.token)//缓存token
							uni.setStorageSync('openid',res.data.openid)//缓存openid
							uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
							uni.setStorageSync('phone_active',res.data.phone_active)//是否授权手机号
							uni.setStorageSync('is_active',res.data.is_active)//是否授权头像和昵称
							uni.setStorageSync('invite_code',res.data.invite_code)//缓存邀请码
							if(uni.getStorageSync('page-path-options')) {
								uni.reLaunch({ // 重新进入当前页面
									url:uni.getStorageSync('page-path-options')
								})
							} else {
								uni.reLaunch({
									url:'/pages/tabbar/pagehome/pagehome'
								})
							}
						}
					},error => {})
				}
			}
		}
	}
</script>
<style scoped>
	.login-header {
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 0;
		position: fixed;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-50%);
	}
	.infoImg {
		width: 224rpx;
		height: 224rpx;
		border-radius: 100%;
		border: 2rpx solid #d8d8d8;
	}
	.logo-name {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 4rpx;
		text-indent: 4rpx;
	}
	.login-footer {
		width: 100%;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 120rpx;
	}
	.login-btn {
		width: calc(100% - 80rpx);
		line-height: 100rpx;
		margin: 0 auto;
		background-color: #e42417;
		border-radius: 20rpx;
		color: #ffffff;
		font-size: 34rpx;
		letter-spacing: 4rpx;
		text-indent: 4rpx;
		box-shadow: 0rpx 8rpx 20rpx rgba(228,36,23,.5);
	}
	.agreement-box{
		margin-top: 25rpx;
		font-size: 28rpx;
	}
	.agreement{
		color: #e42417;
	}
	/* 授权弹窗 */
	.pop-up-bg{
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}
	.user-info-box{
		box-sizing: border-box;
		width: calc(100% - 200rpx);
		border-radius: 10rpx;
		padding: 40rpx 45rpx 35rpx;
		background-color: #ffffff;
	}
	
	.user-info-box .info{
		font-size: 26rpx;
		text-align: center;
	}
	
	.user-info-box .cover{
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		box-shadow: 0px 0px 20rpx 4rpx rgba(228,36,23,.1);
		margin: 0 auto;
		overflow: hidden;
	}
	.user-info-box .cover image{
		width: 100%;
		height: 100%;
	}
	.user-info-box .name{
		font-size: 30rpx;
		line-height: 1.5;
		margin: 8rpx 0 15rpx;
	}
	.user-info-box .tips{
		font-size: 26rpx;
		line-height: 1.6;
		color: #666666;
	}
	.user-info-box .tips view:last-child{
		font-size: 24rpx;
		color: #e42417;
	}
	
	.user-info-box .msg{
		font-size: 26rpx;
	}
	
	.user-info-box .item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: 2rpx solid #f1f5f9;
	}
	
	.user-info-box .item text{
		line-height: 1.8;
	}
	
	.user-info-box .avatar{
		display: flex;
		justify-content: flex-end;
		width: calc(100% - 80rpx);
		height: 100rpx;
		padding: 0;
		margin: 0;
		background: none;
	}
	.user-info-box .avatar::after{
		display: none;
	}
	.user-info-box .avatar .img{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		overflow: hidden;
	}
	.user-info-box .avatar image{
		width: 100%;
		height: 100%;
	}
	
	.user-info-box .nick-name{
		width: calc(100% - 80rpx);
		height: 60rpx;
		text-align: right;
	}
	
	.user-info-box .empower-btns{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.user-info-box .empower-btns .btn{
		width: 50%;
		text-align: center;
		align-items: 1.5;
		padding-top: 20rpx;
		color: #666666;
		font-size: 30rpx;
	}
	.user-info-box .empower-btns .btn:nth-of-type(2){
		color: #e42417;
	}
</style>