<template>
	<view style="text-align: center;">
		<!--pages/user/login/login.wxml-->
		<image class="logo" src="/static/images/ui/KXMH_icon.png" />
		<!-- #ifndef MP-ALIPAY -->
		<button class="login" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">授权登录</button>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<!-- <button class="login" open-type="getAuthorize" @getAuthorize="onGetAuthorize" onError="onAuthError"
			scope='phoneNumber'>
			授权手机号
		</button> -->
		<button class="login" @click="getUserInfo">
			授权手机号
		</button>
		<!-- #endif -->

		<uModalExtra :show="show" showCancelButton @getphonenumber='getPhoneNumber' @onGetAuthorize="onGetAuthorize"
			confirm-button-open-type="getPhoneNumber" @cancel="show=false">
			<view class="slot-content dialog_content">
				<view class="flex jc-c">
					<u-icon name="checkmark-circle" color="green" size="120rpx" />
				</view>
				<view class="_l">用户信息授权成功</view>
				<view>授权绑定你的手机号</view>
			</view>
		</uModalExtra>
	</view>
</template>

<script>
	// pages/user/login/login.js
	import uModalExtra from '@/components/u-modal-extra/u-modal-extra';
	const app = getApp();
	import {
		httpUtil,
		http
	} from '../../../utils/util';
	export default {
		components: {
			uModalExtra
		},
		data() {
			return {
				code: '',
				userInfo: null,
				show: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			getUserInfo(e) {
				uni.showLoading({
					title: '加载...',
					mask: true
				});
				var that = this;
				// #ifdef MP-WEIXIN
				wx.getUserProfile({
						// #endif
						// #ifndef MP-WEIXIN
						uni.getUserInfo({
							// #endif
							desc: '展示用户信息',
							// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
							success: (res) => {
								// #ifndef MP-ALIPAY
								that.userInfo = res.userInfo;
								// #endif
								uni.login({
									success: (res) => {
										console.log(res)
										let code = res.code
										app.globalData.code = code;
										this.setData({
											code,
											show: true
										});
									},
									fail: (res) => {
										uni.showToast({
											title: '调用login失败' // 内容
										});
									},
									complete: (res) => {
										uni.hideLoading();
									}
								});

							},
							fail: (res) => {
								uni.showToast({
									title: '调用用户信息失败' // 内容
								});
							}
						});
					},

					// #ifndef MP-ALIPAY
					getPhoneNumber(e) {
						console.log(e);
						this.setData({
							show: false
						})

						if (e.detail.encryptedData || e.detail.iv) {
							let encryptedData = e.detail.encryptedData
							let iv = e.detail.iv
							if (getApp().globalData.code) {
								let code = getApp().globalData.code;
								this.tokenAndLogin(code, encryptedData, iv)
							} else {
								console.log('调用login出错或者code失效');
							}

						} else {
							console.log('获取用户手机号被拒！');
							uni.showToast({
								title: '请绑定手机号',
								// 内容
								success: (res) => {}
							});
						}
					},
					// #endif

					// #ifdef MP-ALIPAY
					onGetAuthorize(e) {
						this.setData({
							show: false
						})
						my.getOpenUserInfo({
							fail: (res) => {},
							success: (res) => {
								let userInfo = JSON.parse(res.response).response
								this.userInfo = userInfo;
								console.log("ali userInfo", userInfo);
							},
						})
						my.getPhoneNumber({
							success: (res) => {
								let encryptedData = res.response;
								console.log(res);
								if (getApp().globalData.code) {
									let code = getApp().globalData.code;
									this.tokenAndLogin(code, encryptedData)
								} else {
									console.log('调用login出错或者code失效');
								}
							},
							fail: (res) => {
								console.log(res);
								console.log('getPhoneNumber_fail');
							},
						});
					},
					// #endif

					tokenAndLogin(code, encryptedData, iv) {
						let getTokenUrl = ''
						let loginUrl = ''
						// #ifdef MP-WEIXIN
						getTokenUrl = '/api/v1/get-token'
						loginUrl = '/api/v1/login'
						// #endif
						// #ifdef MP-TOUTIAO
						getTokenUrl = '/api/v1/dy-get-token'
						loginUrl = '/api/v1/dy-login'
						// #endif
						// #ifdef MP-ALIPAY
						getTokenUrl = '/api/v1/ali/get-token'
						loginUrl = '/api/v1/ali/login'
						// #endif
						httpUtil(getTokenUrl, 'get', {
							code
						}).then((res) => {
							if (res.token) {
								app.globalData.code = null;
								// #ifndef MP-ALIPAY
								let data = {
									token: res.token,
									encryptedData,
									iv
								}
								// #endif
								// #ifdef MP-ALIPAY
								let data = {
									token: res.token,
									encryptedData
								}
								// #endif
								httpUtil(loginUrl, 'post', data).then((res1) => {
									console.log(this.userInfo)
									let userInfo = this.userInfo
									// #ifndef MP-ALIPAY
									userInfo.avatarUrl = userInfo.avatarUrl.replace("/132", "/0")
									// #endif
									wx.setStorageSync('userInfo', Object.assign(res1, userInfo))
									app.globalData.token = res1.token
									app.globalData.uid = res1.uid
									app.globalData.userInfo = userInfo
									setTimeout(() => {
										uni.showToast({
											title: '登录成功！'
										});
										uni.navigateBack();
										var pages = getCurrentPages(); //获取页面栈
										if (pages.length > 1) {
											//上一个页面实例对象
											var prePage = pages[pages.length - 2];
											prePage.onLoad(prePage.options);
										}
									}, 1000);
								});
							} else {
								console.log('token获取异常！');
							}
						});

					},

				}
			};
</script>
<style>
	/* pages/user/login/login.wxss */
	.logo {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 100px 0 50px 0;
	}

	.login {
		width: 500rpx;
		margin: auto;
		height: 80rpx;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		border-radius: 44rpx;
		color: #fff;
		font-size: 36rpx;
		line-height: 80rpx;
	}
</style>
