<template>
	<view>
		<!-- 头部 -->
		<status-nav :ifReturn="true" navBarTitle="登录" titleColor="#333" backgroudColor="#fff"
			:ifBold="true"></status-nav>
		<view class="pl30 pr30">
			<view class='login-header'>
				<view class="infoImg">
					<image class="image" mode="widthFix" src="/static/public/logo.png"></image>
				</view>
			</view>
			<view class="agreement-box">
				<u-checkbox-group v-model="checkboxValue" @change="checkboxChange">
					<u-checkbox :name="item.name" shape="circle"  v-for="(item, index) in checkboxList" activeColor="#3d9f3d" :key="index">
					</u-checkbox>
				</u-checkbox-group>
				阅读并同意
				<text @tap="goBack(1)" class="agreement">《用户协议》</text>和<text @tap="goBack(2)"
					class="agreement">《隐私协议》</text>
			</view>
			<view class="login-footer">
				<button v-if="checkboxValue[0]" class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快速登录</button>
				<button v-else class="login-btn" @click="getClick">快速登录</button>
				<view class="mt25 fs14 dark" @tap="goBack(3)">暂不登录</view>
			</view>
		</view>
		
		<!-- 隐私政策弹框 -->
		<u-popup :show="policy" @close="close(1)" mode="bottom">
			<view class="policy">
				<div class="title">用户协议及隐私保护</div>
				<view class="st">
					我已阅读并同意
					<text @tap="goBack(1)" class="agreement">《用户协议》</text>和<text @tap="goBack(2)"
						class="agreement">《隐私协议》</text>
				</view>
				<button class="login-btn" @click="policyClick">同意并登录</button>
			</view>
		</u-popup>
		
		<!-- 获取头像&昵称 -->
		<u-popup :show="empowerShow" @close="close(2)" mode="center" round="16">
			<view class="user-info-box">
				<view class="info">
					<view class="cover">
						<image src="/static/public/logo.png" 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.baseUrl || 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>
		</u-popup>
	</view>
</template>
<script>
	import {
		postEditInfo,
		postUserInfo,
		postUpload,
		postBindPhone
	} from "@/api/index";
	export default {
		data() {
			return {
				checkboxValue:['选中'],
				checkboxList: [
					{
						name:'选中',
					}
				],
				userInfo: {
					nickName: '',
					avatarUrl: '',
					baseUrl: '' //展示头像需要添加域名
				}, //用户信息
				baseHttps: `${getApp().globalData.hostapi}`, //接口链接
				imgSrc: uni.getStorageSync('baseInfo').logo, //默认logo头像
				logoAvatar: '/static/public/logo-avatar.png', //默认头像
				appletName: uni.getStorageSync('baseInfo').platform, //小程序名称
				empowerShow: false, //是否显示授权弹窗
				isActive: false, //头像昵称是否填写完成
				
				policy:false, //隐私政策弹框
			};
		},
		onLoad() {},
		methods: {
			goBack(num) {
				if(num == 1) {
					uni.navigateTo({
						url:'/pagesB/singlePage/address?id=1'
					})
				}else if(num == 2) {
					uni.navigateTo({
						url:'/pagesB/singlePage/address?id=2'
					})
				}else if(num == 3) {
					uni.reLaunch({
						url: '/pages/home/home'
					})
				}
			},
			checkboxChange(e) {
				this.checkboxValue[0] = e;
			},
			
			getClick() {
				this.policy = true;
			},
			
			/* 关闭弹框 */
			close(e) {
				if(e == 1) {
					this.policy = false;
				}else {
					this.empowerShow = false;
				}
			},
			
			policyClick() {
				this.policy = false;
				this.checkboxValue[0] = '选中';
			},
			
			// 获取手机号
			getPhoneNumber(e) {
				if (e.detail.code) {
					let params = {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					}
					postBindPhone(params).then(res => {
						if (res.code == 0) {
							uni.setStorageSync('mobile', res.data.phone) //缓存电话
							this.empowerShow = true;
						} else {
							this.$toolAll.tools.showToast(res.msg);
						}
					}, error => {

					})
				} else {
					this.$toolAll.tools.showToast('您已拒绝授权');
				}
			},

			// // 头像上传
			uploadImg(url) {
				uni.showLoading({
					title: '上传中'
				});
				postUpload(url).then(res => {
					if (res.code == 0) {
						this.userInfo.avatarUrl = res.data.src;
						this.userInfo.baseUrl = this.baseHttps + 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.userInfo.avatarUrl == '') {
					this.$toolAll.tools.showToast('请选择头像！')
					return false;
				} else if (this.userInfo.nickName == '') {
					this.$toolAll.tools.showToast('请输入昵称！')
					return false;
				} else {
					this.isActive = true;
					return true;
				}
			},

			//调起登录授权
			bindGetUserInfo() {
				let ya = this;
				ya.checkForm();
				//新版登录方式
				if (ya.isActive == true) {
					ya.updateUserInfo();
				}
			},

			//调用登录接口
			updateUserInfo() {
				let ya = this;
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					duration: 10000
				})
				var params = {
					nickname: ya.userInfo.nickName, //用户昵称
					headimgurl: ya.userInfo.avatarUrl, //用户头像
				}
				postEditInfo(params).then(res => {
					uni.hideToast();
					if (res.code == 0) {
						uni.showToast({
							title: '授权成功',
							icon: 'loading',
							duration: 1000
						})
						postUserInfo().then(resData => {
							if (resData.code == 0) {
								uni.setStorageSync('userInfo', resData.data) //缓存用户信息
							}
						}, error => {
				
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								fail: () => {
									uni.reLaunch({
										url: '/pages/home/home'
									})
								}
							})
							let pages = getCurrentPages();
							if (pages.length > 1) {
								//上一个页面实例对象
								var prePage = pages[pages.length - 2];
								//关键在这里
								prePage.onLoad()
							}
						}, 1500)
					}
				}, error => {})
			}
		}
	}
</script>
<style scoped lang="less">
	.login-header {
		justify-content: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 160rpx;
	}

	.infoImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		box-sizing: border-box;
		border: 2rpx solid #d8d8d8;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		.image {
			width: 75%;
		}
	}

	.logo-name {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 4rpx;
		text-indent: 4rpx;
	}

	.login-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		flex-direction: column;
	}

	.login-btn {
		width: 100%;
		line-height: 94rpx;
		margin: 0 auto;
		background-color: #3d9f3d;
		border-radius: 90rpx;
		color: #ffffff;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		box-shadow: 0rpx 8rpx 20rpx rgba(5, 103, 184, .3);
	}

	.agreement-box {
		margin: 70rpx 0 50rpx 0;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agreement {
		color: #ef8904;
	}

	/* 授权弹窗 */
	.user-info-box {
		margin: 0 auto;
		box-sizing: border-box;
		width: 600rpx;
		border-radius: 16rpx;
		padding: 40rpx 45rpx;
		background-color: #ffffff;
	}

	.user-info-box .info {
		font-size: 26rpx;
		text-align: center;
	}

	.user-info-box .cover {
		width: 144rpx;
		height: 144rpx;
		border-radius: 100%;
		box-shadow: 0px 0px 20rpx 4rpx rgba(5, 103, 184, .1);
		margin: 0 auto;
		overflow: hidden;
	}

	.user-info-box .cover image {
		width: 80%;
		height: 100%;
	}

	.user-info-box .name {
		font-size: 30rpx;
		line-height: 1.5;
		margin: 22rpx 0 16rpx 0;
	}

	.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: 10rpx;
	}

	.user-info-box .empower-btns .btn {
		width: 50%;
		text-align: center;
		align-items: 1.5;
		color: #666666;
		font-size: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-info-box .empower-btns .btn:nth-of-type(2) {
		color: #fff;
		background: #3d9f3d;
		border-radius: 30px;
	}
	
	.policy {
		padding:70rpx 40rpx 50rpx 40rpx;
		.title {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
		}
		.st {
			margin: 40rpx 0;
			font-size: 28rpx;
			text-align: center;
		}
		.login-btn {
			width: 80%;
		}
	}
</style>