<template>
	<view class='container'>
		<view class="center">
			<image class="w-240 h-240" src="@/static/logo.png"></image>
		</view>
		
		<view class="login-btn">
			<button v-if="agreement" class="lh-90 br-8" style="height: 100%;background-color: #31AD6F;color: #FFF;"
				open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
				<text>立即登录</text>
			</button>
			<view v-else @click="$u.toast('请同意用户协议与隐私政策')" class="lh-90" style="height: 100%;background-color: #ccc;border-radius: 8rpx;">
				<text class="fs-30">立即登录</text>
			</view>
			<view @click="youkeLogin" class="lh-90 br-8 mt-30" style="height: 100%;background-color: #31AD6F;">
				<text>游客登录</text>
			</view>
		</view>
		
		<view class="agreement">
			<image v-if="!agreement" @click="agreement = !agreement" src="@/static/select.png"></image>
			<image v-else @click="agreement = !agreement" src="@/static/is-select.png"></image>
			<text>阅读并同意<text @click="onGetXieyi('yhxy')" style="color: #4083F0;">《用户协议》</text>和<text
					@click="onGetXieyi('yszc')" style="color: #4083F0;">《隐私政策》</text></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreement: false,
				code: '',
				userId: ''
			};
		},
		onLoad(options) {
			this.userId = options.userId || ''
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.code = loginRes.code
				}
			});
		},
		methods: {
			onGetphonenumber(e) {
				uni.switchTab({
					url: '/pages/home'
				})
				if (e.detail.iv && e.detail.encryptedData) {
					const params = {
						url: '/api/user/getnewuserinfo',
						loadingTip: '登录中...',
						data: {
							code: this.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							fid: this.userId // 推荐绑定上下级
						}
					}
					this.$request(params).then(async (res) => {
						// console.log(res)
						if (res.code === 1) {
							uni.setStorageSync('token', res.data.userinfo.token)
							this.$store.dispatch('user/getUserInfo');

							uni.redirectTo({
								url: '/pages/index'
							})
						} else {
							this.$u.toast(res.msg || '登录失败')
						}
					}).catch(err => {
						this.$u.toast(err.msg || '登录失败')
					})
				} else {
					this.$u.toast('手机号授权失败')
				}
			},
			youkeLogin(){
				if(!this.agreement) {
					return this.$u.toast('请同意用户协议与隐私政策')
				}
				uni.switchTab({
					url: '/pages/home'
				})
			},
			onGetXieyi(type) {
				const params = {
					url: '/api/index/xieyi',
					loadingTip: '',
					data: {
						type
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					let title = type === 'yhxy' ? '用户协议' : '隐私政策'
					// #ifdef APP-PLUS
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + res.data)
					// #endif
					
					// #ifdef MP-WEIXIN || MP-ALIPAY
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + encodeURIComponent(res.data))
					// #endif
				}).catch(err => {
					// console.log(err)
					this.$u.toast('发生错误')
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		height: 100%;
		padding: 100px 20rpx 0;
	}

	.login-btn {
		width: 94%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFF;
		position: absolute;
		bottom: 400rpx;
		left: 50%;
		margin-left: -47%;
	}


	.agreement {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 100rpx;
	}


	.agreement>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
</style>