<template>
	<uni-popup ref="authorizationPopup" background-color="#fff">
		<view class="authorization-box">
			<view class="title">授权登录</view>
			<view class="message">为了更完美的体验，请登录</view>
			<view class="btn-box">
				<button class="button" type="primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" hover-class="none">登录</button>
			</view>
			<view class="refuse" @click="refuse">拒绝</view>
		</view>
	</uni-popup>
</template>

<script>
import {
	customerWxToken,
	getUserInfo
} from "@/config/api.js"
export default {
    props: {
		
    },
    data() {
        return {
			code: ''
        }
    },
    methods: {
		openAuthorization() {
			this.$refs.authorizationPopup.open('center')
			uni.login({
				provider: 'weixin',
				success: loginRes=> {
					if(loginRes.errMsg === "login:ok") {
						this.code = loginRes.code
					}
				}
			});
		},
        refuse() {
			this.$refs.authorizationPopup.close()
			uni.showModal({
				content: '您拒绝了授权，登录失败！',
				showCancel: false
			})
		},
		//获取手机号
		async onGetPhoneNumber(e) {
			this.$refs.authorizationPopup.close()
			if (!e.detail.code) { //用户决绝授权  
				//拒绝授权后弹出一些提示
				uni.showModal({
					content: '您拒绝了授权，登录失败！',
					showCancel: false
				})
			} else { //允许授权 
				let data = await customerWxToken({
					code: this.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				})
				let res = JSON.parse(data.content.token)
				uni.setStorageSync('token', res.token)
				let info = await getUserInfo({
					params: {
						token: res.token
					}
				})
				let userInfo = {
					customerCode: info.content.userInfo.customerCode,
					customerName: info.content.userInfo.customerName
				}
				uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				uni.setStorageSync('userBtnPerms', JSON.stringify(info.content.userBtnPerms));
				this.$emit('success')
			}
		}
    }
}
</script>

<style lang="scss">
.authorization-box {
	box-sizing: border-box;
	width: 560rpx;
	padding-top: 30rpx;
	background-color: #FFFFFF;

	.title {
		text-align: center;
		font-size: 16px;
		color: #B60001;
		font-weight: bold;
	}

	.message {
		font-size: 14px;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
		text-align: center;
		color: #99A0AF;
		padding: 0 50rpx;
	}

	.btn-box {
		padding: 0 50rpx;

		.button {
			height: 40px;
			line-height: 40px;
			background-color: #B60001;
			font-size: 14px;
			color: #FFFFFF;
		}
	}

	.refuse {
		margin-top: 10px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 13px;
		color: #DE0000;
		border-top: 1rpx solid #D5E2F3;
	}
}
</style>
