<template>
	<view>
		
		
		<u-modal :show="showAuthorizePhone" :showConfirmButton="false">
		 	<view class="slot-content">
		 		<view class="auth-card">
		 			<view class="img">
		 				<img class="avatar-img" src="@/static/logo.png" mode="widthFix">
		 			</view>
		 			<view class="content">手机登录后才能查看名片哦~</view>
		 		</view>
		 		<view class="auth-btncard">
		 			<view class="btn-unok">
		 				<u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
		 					拒绝</u-button>
		 			</view>
		 			<view class="btn-ok">
		 				<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
		 					@getphonenumber="getPhoneNumber"> 立即登录</u-button>
		 			</view>
		 		</view>
		 	</view>
		 </u-modal>
		<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<img class="avatar-img" src="@/static/logo.png" mode="widthFix">
					</view>
					<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
					<view style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="userInfo" ref="uForm">
							<u-form-item label="头像">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
									slot="right">
									<image class="avatar"
										:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
									</image>
								</button>
							</u-form-item>
							<u-form-item label="昵称">
								<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
									@blur="userNameInput" placeholder="请输入昵称" border="false" />
								<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
							拒绝</u-button>
					</view>
					<view class="btn-ok">
						<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				showAuthorizePhone:false,
				showAuthorizeUser:false,
				userInfo: {
					head: '',
					nickname: '',
					phone: '',
				},
				customStyleUnOk: {
					marginTop: '20rpx',
					color: '#eaad1a',
					border: '2px solid #eaad1a',
					"border-radius": "10px",
					fontSize: "32rpx"
				},
				customStyleOk: {
					marginTop: '20rpx',
					color: '#fff',
					border: '2px solid #eaad1a',
					"border-radius": "10px",
					fontSize: "32rpx",
					background: "#eaad1a"
				},
			};
		},
		onLoad(){
			that = this
		},
		onShow: function() {
			
			if (uni.getStorageSync("userInfo").phone) {
			} else {
				this.showAuthorizePhone = true
			}
		
		},
		methods:{
			async getPhoneNumber(e) {
				console.log(0)
				that.userInfo = await this.$request.wxlogin()
				console.log(that.userInfo,1111)
				that.userInfo.phone = await this.$request.getPhone(e, that.userInfo)
				console.log(that.userInfo,2222)
				this.showAuthorizePhone = false
				this.showAuthorizeUser = true
			
			},
			async authUser(type) {
				//同步信息，没有头像和昵称自动生成
				this.userInfo = await this.$request.syncInfo(this.userInfo)
				if (this.userInfo.openId) {
					uni.setStorageSync("userInfo", that.userInfo)
					that.showAuthorizeUser = false
					// that.mescroll.resetUpScroll()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.auth-btncard {
		display: flex !important;
		justify-content: space-between !important;
	
		.btn-unok {
			width: 40%;
		}
	
		.btn-ok {
			width: 40%;
		}
	}
	
	.auth-card {
		text-align: center;
	
		.avatar-img {
			width: 250rpx;
		}
	
		.title {
			font-size: 20rpx;
		}
	
		.content {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 30rpx;
		}
	}
	
	.avatar-wrapper {
		color: #333 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 0;
	}
	
	.avatar-wrapper::after {
		border: none !important;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}
	
	/deep/.u-popup__content {
		border-radius: 20rpx !important;
	}
</style>
