<template>
	<view>
		<view v-if="showWxLogin" class="mask"></view>
		<uni-popup ref="popup" type="center" @maskClick="maskClick">
			<view class="popupBox">
				<view class="h2 bold">获取您的头像和手机号</view>
				<view class="h3">获取用户头像，主要用于向用户提供具有辨识度的用户中心界面；获取手机号，主要用于手机注册</view>
				<view class="form">
					<view class="input u-flex">
						<view class="h2">头像</view>
						<view class="info">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl || '../../../../static/head.png'"></image>
							</button>
						</view>
						<uni-icons name="arrow-right" size="32rpx" color="#999"></uni-icons>
					</view>
					<!-- 					<view class="input u-flex">
						<view class="h2">昵称</view>
						<view class="info">
							<input type="nickname" v-module="nickName" placeholder="请输入昵称" @blur="onBlur" />
						</view>
					</view> -->
				</view>
				<button class="submit" :style="{background:PrimaryColor}" @getphonenumber="submit"
					open-type="getPhoneNumber">确定</button>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions,
	} from 'vuex';
	export default {
		computed: {
			...mapState(['showWxLogin']),
		},
		data() {
			return {
				PrimaryColor: '#1fba1a', //主题色
				avatarUrl: '',
				nickName: ''
			}
		},
		watch: {
			showWxLogin(news, olds) {
				if (news && news === true) {
					this.$refs.popup.open('');
				} else {
					this.$refs.popup.close('');
				}
			},


		},
		mounted() {

		},
		methods: {
			...mapMutations(['setShowWxLogin', 'setUserInfo']),
			...mapActions(['getFeedBackList']),
			onClose() {
				this.setShowWxLogin(false);
			},
			maskClick() {
				this.setShowWxLogin(false);
			},
			onChooseAvatar(e) {
				//该图片需要上传到自己服务器--此处没做处理
				this.avatarUrl = e.detail.avatarUrl
			},
			onBlur(e) {
				this.nickName = e.detail.value
			},
			submit(e) {
				let code = e.detail.code
				var that = this
				// if (!that.avatarUrl) {
				// 	uni.showToast({
				// 		title: '请上传头像~',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					uni.showToast({
						title: "拒绝手机号登录",
						icon: 'none'
					});
					return;
				}
				uni.login({
					provider: 'weixin',
					success(res) {
						let httpData = {
							phoneCode: code,
							wxCode: res.code,
						};
						that.$http('common.applogin', httpData, '登录中', true).then((res) => {
							if (res.code === 0) {
								// 储存登录信息
								let userInfo = {
									headLogo: that.avatarUrl,
									// nameList: that.nickName,
									wechatId: res.data.wechatId,
									token: res.data.token ||
										"",
								}
								uni.setStorageSync('userType', res.data.usrType);
								uni.setStorageSync('token', res.data.token);
								that.setUserInfo(userInfo)
								uni.$emit("loginCallback") //全局登录监听回调方法
								uni.showToast({
									title: '登录成功~',
									icon: 'none',
									success: function() {
										uni.redirectTo({
											url: '/subpkg/pages/home/home',
											success: function(res) {}
										});
									}
								});
								that.onClose();
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.popupBox {
	  z-index: 2000; 
		width: 90%;
		padding: 50rpx 40rpx 30rpx;
		margin: auto auto;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.h2 {
			color: #333;
			font-size: 32rpx;
		}

		.h3 {
			font-size: 26rpx;
			color: #999;
			line-height: 1.4;
			padding-top: 14rpx;
		}

		.bold {
			font-weight: bold;
		}

		.form {
			margin-top: 30rpx;
			border-top: 1px solid #EFEFEF;

			.input {
				padding: 24rpx 0;
				border-bottom: 1px solid #EFEFEF;
				display: flex;
				align-items: center;

				.info {
					flex: 1;
					margin-left: 30rpx;

					.avatar-wrapper {
						width: 70rpx;
						height: 70rpx;
						border-radius: 10rpx;
						margin: 0;
						padding: 0;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 10rpx;
						}
					}

					input {
						background: transparent;
						width: 100%;
						height: 70rpx;
						color: #333;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.submit {
		margin-top: 30rpx;
		width: 100%;
		height: 92rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
		font-size: 32rpx;
		background: #E83F3C;
	}
	.mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
       	background: #fff;
	    opacity: 1; 
      	z-index: 1000; 
    }
</style>