<template>
	<view class="content">
		<view class="content-body">
			<view class="login-logo">
				<u-image src="/static/logo-mini.png" width="396" height="76" class="logo"></u-image>
			</view>
		    <view class="login-btns">
				<u-button
				shape="circle" 
				:custom-style="wxButton" 
				class="login-btn" 
				type="success" 
				:hair-line="false" 
				:open-type="tyYd?'getPhoneNumber':''" 
				@click="getCheckYd"
				@getphonenumber="getPhoneNumber">
					手机号快捷登录
				</u-button>
				<u-button shape="circle" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
					手机验证码登录
				</u-button>
		    </view>
			<view>
				<text @click="goback">暂不登录</text>
			</view>
		</view>
		<view class="xieyi" style="display: flex;align-items: center;padding:50upx 0;justify-content: center;font-size: 24rpx;">
			<u-checkbox v-model="tyYd" shape="circle" style="width:25px;"></u-checkbox>
			登录代表您已同意<text @click="gotoXieyi()">隐私政策、服务条款</text>
		</view>
	</view>
    
</template>

<script>
	import {wxlogin} from '../../api/login.js'
    import {
        mapState,
        mapMutations
    } from 'vuex'
     
    export default {
        components: {
        },
        data() {
            return {
				path: '/pages/report/report',
				lanuch: false,
				mobile: '',
				code: '',
				codeText: '获取验证码',
				getCodeing: false,
				totalTime: 60,
                positionTop: 0,
				hasFocus: false,
				hasFocus1: false,
				wxButton:{
					background: '#20d468',
					borderColor: '#22c573'
				},
				phoneButton:{
					background: '#f8f8f8',
					borderColor: '#eeeeee'
				},
				tyYd: false
            }
        },
        computed: mapState(['forcedLogin']),
		mounted() {
			//微信平台登录
			//#ifdef MP-WEIXIN
			 this.$store.dispatch('wxLogin','weixin')
			//#endif
		},
		onLoad(option) {
			// 为解决首次登录异常问题 进入页面先调微信登录获取code
			this.wxLogin()
			const {
				path,
				lanuch,
				q
			} = option;
			this.lanuch = (lanuch + '') === 'true';
			if (path) {
				this.path = decodeURIComponent(path+"?q="+q);
			}
		},
        methods: {
			...mapMutations(['login']),
			changeYd(v){
				this.tyYd = v
			},
			goback(){
				uni.navigateBack()
			},
			getCheckYd(){
				if(!this.tyYd){
					uni.showToast({
						title: "请阅读并同意隐私政策、服务条款",
						icon: "none"
					})
					return
				}
			},
			// 微信授权登录
			getPhoneNumber(e) {
				let _this = this
				if(!this.tyYd){
					uni.showToast({
						title: "请阅读并同意隐私政策、服务条款",
						icon: "none"
					})
					return
				}
				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,
						}
						wxlogin(params).then(res => {
							uni.hideLoading();
							_this.code = ''
							console.log(res,_this.path, 'login data')
							if (res.status == '200') {
								this.toMain(res.data)
								uni.$emit("getUserInfo")
								if (_this.path === '/pages/report/report' || _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
					}
				})
			},
			toMain(data) {
			    this.login(data);
			    uni.reLaunch({
			        url: '/pages/report/report',
			    });
			},
			// 手机号登录
			phoneLogin(){
				wx.navigateTo({
					url: '/pages/login/phoneLogin'
				})
			},
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			gotoXieyi(url){
				uni.navigateTo({
					url: '/pages/xieyi/index?id=0'
				})
			}
        },
        onReady() {
            this.initPosition();
        }
    }
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100vh;
		padding:0 125upx;
		display: flex;
		flex-direction: column;
		text-align: center;
		.content-body{
			flex: 1;
			.logo{
				display: inline-block;
				margin:250upx 0 120upx;
			}
			.phoneBtn{
				display: block;
				margin: 30rpx 0 350upx;
			}
		}
		.xieyi{
			font-size: 24upx;
			padding-bottom: 60upx;
			text{
				color:#1283d4
			}
		}
	}
</style>
