<template>
	<view class="content">
		<image class="logo-img" mode="aspectFit" src="/static/img/logo.png"></image>
		<u-button shape="circle" class="login-btn" type="success" plain :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<view class="login-btn-content">
			  <view class="wechat-img"></view>
			  <view>微信登陆</view>
			</view>
		</u-button>
		<view class="canseLogin" @click="gotoHome()">
		  取消登录
		</view>
	</view>
</template>

<script>
	import {
		login
	} from "@/api/login.js"
	export default {
		components: {},
		data() {
			return {
				path: '/pages/index/index',
				lanuch: true,
				code: ''
			}
		},
		onShow() {
			
		},
		mounted() {},
		onLoad(option) {
			// 为解决首次登录异常问题 进入页面先调微信登录获取code
			this.wxLogin()
			const {
				path,
				lanuch
			} = option;
			this.lanuch = (lanuch + '') === 'true';
			if (path) {
				this.path = decodeURIComponent(path);
			}
		},
		methods: {
			getPhoneNumber(e) {
				let _this = this
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				if (!this.code) {
					this.wxLogin()
				} 
				if (e.target.errMsg === 'getPhoneNumber:ok') {
					setTimeout(()=>{
						login({
							code: _this.code,
							encryptedData: e.target.encryptedData,
							iv: e.target.iv
						}).then(res => {
							uni.hideLoading();
							_this.code = ''
							console.log(res, 'login data')
							if (res.status == '200') {
								getApp().globalData.token = res.data
								_this.$u.vuex('vuex_token',res.data)
								if (_this.path === '/pages/index/index' || _this.lanuch) {
									uni.reLaunch({
										url: _this.path
									});
								} else {
									uni.redirectTo({
										url: _this.path
									});
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 2500
								});
							}
						});
					},300)
				} else {
					uni.showToast({
						title: '授权失败',
						icon: 'none',
						duration: 2500
					});
				}
			},
			// 调微信登录 获取code
			wxLogin () {
				let _this = this
				uni.login({
					provider: 'weixin',
					success(res) {
						_this.code = res.code
					}
				})
				console.log(this.code,'1111111111')
			},
			gotoHome () {
			  wx.reLaunch({
			    url: '/pages/index/index'
			  })
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		padding: 0;
		display: flex;
		align-items: center;
		padding-top: 35%;
		.logo-img {
			width: 400rpx;
			height: 100rpx;
		}
	}
	.wechat-img {
	  width: 40px;
	  height: 35px;
	  margin-right: 10px;
	  padding-top: 10px;
	  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiMwOUJCMDciIGQ9Ik0xMDEwLjggNjI4YzAtMTQxLjItMTQxLjMtMjU2LjItMjk5LjktMjU2LjItMTY4IDAtMzAwLjMgMTE1LjEtMzAwLjMgMjU2LjIgMCAxNDEuNCAxMzIuMyAyNTYuMiAzMDAuMyAyNTYuMiAzNS4yIDAgNzAuNy04LjkgMTA2LTE3LjdsOTYuOCA1My0yNi42LTg4LjJjNzAuOS01My4yIDEyMy43LTEyMy43IDEyMy43LTIwMy4zek02MTggNTg4LjhjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MGMwIDIyLTE3LjkgNDAtNDAgNDB6IG0xOTQuMy0wLjNjLTIyLjEgMC00MC0xNy45LTQwLTQwczE3LjktNDAgNDAtNDAgNDAgMTcuOSA0MCA0MC0xNy45IDQwLTQwIDQweiIgIC8+PHBhdGggZmlsbD0iIzA5QkIwNyIgZD0iTTM2Ni4zIDEwNi45Yy0xOTQuMSAwLTM1My4xIDEzMi4zLTM1My4xIDMwMC4zIDAgOTcgNTIuOSAxNzYuNiAxNDEuMyAyMzguNGwtMzUuMyAxMDYuMiAxMjMuNC02MS45YzQ0LjIgOC43IDc5LjYgMTcuNyAxMjMuNyAxNy43IDExLjEgMCAyMi4xLTAuNSAzMy0xLjQtNi45LTIzLjYtMTAuOS00OC4zLTEwLjktNzQgMC0xNTQuMyAxMzIuNS0yNzkuNSAzMDAuMi0yNzkuNSAxMS41IDAgMjIuOCAwLjggMzQgMi4xQzY5MiAyMTIuNiA1MzkuOSAxMDYuOSAzNjYuMyAxMDYuOXpNMjQ3LjcgMzQ5LjJjLTI2LjUgMC00OC0yMS41LTQ4LTQ4czIxLjUtNDggNDgtNDggNDggMjEuNSA0OCA0OC0yMS41IDQ4LTQ4IDQ4eiBtMjQ2LjYgMGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhzMjEuNS00OCA0OC00OCA0OCAyMS41IDQ4IDQ4LTIxLjUgNDgtNDggNDh6IiAgLz48L3N2Zz4K') no-repeat center  center;
	}
	
	.login-btn {
	  margin-top: 30px;
	}
	
	.login-btn-content {
	  width: 65vw;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.canseLogin{
	  width: 65vw;
	  padding : 20rpx 15rpx;
	  text-align : center;
	  font-size: 1em;
	  margin-top: 1.8em;
	  color: #666;
	}
</style>
