<template>
	<view>
		<uni-popup ref="authorization" background-color="#fff">
            <view class="content-page" @touchmove="stopTouchMove">
				<view class="img-box">
					<!-- <image style="width: 100rpx; height: 100rpx;margin:22rpx;" mode="aspectFill" :src="`${serverConfig.pictureURL}/images/logo.png`"></image> -->
				</view>
				<view class="text">为了更完美的体验，请授权获取电话</view>
				<button class="login-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" hover-class="none">手机号登录/注册</button>
				<view class="refuse" @click="refuse">取消</view>
            </view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		analysisMobileApi,
		getPropertyLoginApi,
		bindingUserInfoApi
	} from "@/config/api.js"
	import serverConfig from "@/config/server_config.js";
	export default {
		data() {
			return {
				serverConfig,
				configData: {
					openid: '',
					sessionKey: '',
					unionid: null
				}
			}
		},
		onReady() {
			const userOpenId = uni.getStorageSync('openid');
			if(!userOpenId) {
				wx.login({
					success (res) {
						if (res.code) {
							getPropertyLoginApi({code: res.code}).then(row=> {
								if(row.code === 200) {
									getApp().globalData.configData = {...row.result}
								}
							})
						}
					}
				})
			}
		},
		methods: {
			onOpenLogin() {
				this.$refs.authorization.open('center')
			},
			stopTouchMove() {
				return false
			},
			refuse() {
				this.$emit('refuse')
				this.$refs.authorization.close()
				uni.showToast({
					icon: "none",
					title: '您拒绝了授权，登录失败！'
				})
			},
			//获取手机号
			async onGetPhoneNumber(e) {
				if (e.detail.errMsg === "getPhoneNumber:fail user deny") { //用户决绝授权  
					//拒绝授权后弹出一些提示
					uni.showModal({
						content: '您拒绝了授权，登录失败！',
						showCancel: false
					})
				} else { //允许授权
					let res = await analysisMobileApi({
						code: e.detail.code,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						sessionKey: getApp().globalData.configData.sessionKey
					})
					if (res.code === 200 && res.result) {
						this.onbindingUserInfo(res.result.purePhoneNumber)
						getApp().globalData.userPhone = res.result.purePhoneNumber
					}
				}
			},
			// 绑定用户
			async onbindingUserInfo(phone) {
				const { openid } = getApp().globalData.configData;
				let res = await bindingUserInfoApi({openId: openid, phone})
				if(res.code === 200 && res.result) {
					uni.setStorageSync('openid', res.result.communityUser.openid);
					uni.setStorageSync('user_phone', res.result.communityUser.phone);
					let userType = res.result.communityUser.userType
					if(userType === '1') {	// 业主
						this.$emit('loginEnd', res.result.communityOwners)
					} else {	// 维修员
						this.$emit('loginEnd', res.result.employeeVos)
					}
					this.$refs.authorization.close()
				}
			}
		}
	}
</script>

<style lang="scss">
.content-page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	.img-box {
		width: 144rpx;
		height: 144rpx;
		border: 2rpx solid #E4E6E9;
		border-radius: 50%;
		margin-top: 200rpx;
	}
	.text {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 50rpx;
		margin-top: 50rpx;
	}
	.login-btn {
		width: 578rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #6799F1;
		border-radius: 200rpx;
		margin-top: 72rpx;
	}
	.refuse {
		font-size: 28rpx;
		color: #767676;
		line-height: 33rpx;
		margin-top: 34rpx;
	}
}
</style>
