<template>
	<view class="content">
		<!-- <view> -->
			<view>
				<view class="logo-cont">
					<u-image src="/static/login_icon.png" width="160" height="160" class="logo"></u-image>
					<u-image src="/static/login_slogan.png" mode="aspectFit" width="286" height="36" class="logo_text"></u-image>
				</view>
				<view class="login-btns">
					<u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						微信授权登录
					</u-button>
					<u-gap height="30"></u-gap>
					<u-button shape="circle" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
						账号密码登录
					</u-button>
				</view>
			</view>
			<view class="nologin">
				<u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
					暂不登录
				</u-button>
			</view>
		<!-- </view> -->
		<view @click="toYs" class="yszc">登录即代表同意<text class="yszc-text">服务协议及隐私保护政策</text></view>
	</view>
</template>

<script>
	import {
		login
	} from "@/api/login"
	export default {
		components: {},
		data() {
			return {
				path: '/pages/index/index',
				lanuch: false,
				code: '',
				wxButton: {
					background: '#0DC55F'
				},
				phoneButton: {
					background: '#fff',
					color:'#000',
				}
			}
		},
		onLoad(option) {
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// 为解决首次登录异常问题 进入页面先调微信登录获取code
			this.wxLogin()
			const {
				path,
				lanuch
			} = option;
			this.lanuch = (lanuch + '') === 'true';
			if (path) {
				this.path = decodeURIComponent(path);
			}
		},
		methods: {
			cansel(){
				this.$store.state.vuex_noLogin = true
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			toYs(){
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			getPhoneNumber(e) {
				let _this = this
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				if (!this.code) {
					this.wxLogin()
				} 
				console.log(this.code, e)
				if (e.target.errMsg === 'getPhoneNumber:ok') {
					setTimeout(()=>{
						const params={
							code: _this.code,
							encryptedData: e.target.encryptedData,
							iv: e.target.iv,
						}
						login(params).then(res => {
							uni.hideLoading();
							_this.code = ''
							console.log(res,_this.path, 'login data')
							if (res.status == '200') {
								getApp().globalData.token = res.data
								_this.$u.vuex('vuex_token',res.data)
								uni.$emit("getUserInfo")
								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) {
						console.log(res.code)
						_this.code = res.code
					}
				})
			},
			// 手机号登录
			phoneLogin () {
				if(this.url){
					wx.navigateTo({
						url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url 
					})
				}else{
					wx.navigateTo({
						url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
					})
				}
			  
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		padding:0 40upx;
		margin: 0 auto;
		.logo-cont{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.logo{
			display: inline-block;
			margin:250upx 256upx 24upx;
		}
		.logo_text{
			display: inline-block;
			margin-bottom: 200upx;
		}
		.login-btn{
			display: block;
			width: 670upx;
			height: 80upx;
		}
		.phoneBtn:active{
			background: #fff ;
			outline: none;
		}
		.nologin{
			text-align: center;
			margin: 100upx 0 50upx 0;
		}
		.yszc{
			font-size: 24upx;
			text-align: center;
			.yszc-text{
				color:#07c160;
			}
			
		}
	}
	// .content {
	// 	width: 100%;
	// 	height: 100%;
	// 	padding: 40upx;
	// 	display: flex;
	// 	flex-direction: column;
	// 	> view{
	// 		text-align: center;
	// 		&:first-child{
	// 			flex-grow: 1;
	// 			height: 80vh;
	// 			padding: 20% 10%;
	// 			display: flex;
	// 			flex-direction: column;
	// 			justify-content: space-between;
	// 		}
	// 		&:last-child{
	// 			font-size: 24upx;
	// 			text{
	// 				color: #07c160;
	// 			}
	// 		}
	// 		.logo{
	// 			text-align: center;
	// 			display: flex;
	// 			justify-content: center;
	// 		}
	// 		.login-btns{
	// 			// padding: 60upx 0;
	// 			.login-btn{
	// 				width: 670upx;
	// 				height: 50upx;
	// 				border-radius: 25upx;
	// 			}
	// 		}
	// 	}
	// }
</style>
