<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="false" :border="true" title="授权登录" @left="onBackHome"></el-navbar>
		
		<view class="avabar-box">
			<view>
				<el-avatar :src="avatar" :size="80"></el-avatar>
			</view>
			<view class="text">授权登录</view>
		</view>
		
		<view class="the-form">
			
			<form>
				<view class="form-item">
					<view class="form-item-body">
						<button @click="login" class="form-item-button" :class="{ 'active': isFormActive }" form-type="button">
							通 过 微 信 登 录
						</button>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body" style="padding: 0; padding-bottom: 30rpx;">
						<view class="not-login-btn" @click="onBackHome">暂不登录</view>
					</view>
				</view>
				
				<view class="form-item" v-if="appStore.users_agree == 1">
					<view class="form-item-body" style="padding: 0;">
						<view class="form-item-text">
							<el-checkbox v-model="agreement" shape="circle"></el-checkbox>
							<view class="agreement-box">
								已阅读并同意 <text @click="navigateTo('pages/user/agreement?type=service')">《服务协议》</text> 和 <text @click="navigateTo('pages/user/agreement?type=privacy')">《隐私协议》</text> 
							</view>
						</view>
					</view>
				</view>
			</form>
			
		</view>
		
	</el-layout>
</template>
 
<script setup>
	import { ref,getCurrentInstance } from "vue";
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { useAppStore } from "@/store/app";
	import { useUserStore } from "@/store/user";
	import { inArray,isMobile,browser,isEmpty } from "@/el-ui/libs/check";
	
	const userStore   	= useUserStore();
	const appStore    	= useAppStore().getApp();
	const avatar      	= ref(appStore.avatar);
	const agreement     = ref(false);
	const isFormActive  = ref(false);
	
	onLoad((option)=>{
		if(userStore.isLogin){
			navigateTo("pages/index/ucenter");
		}
	});
	
	onShow(()=>{
		
	});
	
	// #ifdef MP-WEIXIN
	const login = ()=>{
		if(isFormActive.value) return false;
		if(!agreement.value){
			uni.$layer.showToast("请勾选已阅读并同意《服务协议》和《隐私协议》");
			return false;
		}
		
		isFormActive.value = true;
		wx.login({
			success: function (res){
				let params = { scene: "miniprogram", code: res.code };
				let uid = uni.$storage.get("uid",0);
				if(uid > 0){
					params.uid = uid;
				}
				
				uni.$http.post("wechat.auth/login",params).then(value=>{
					if(value.code){
						userStore.login(value.data.token);
						userStore.getUser();
						if(value.data.is_bind){
							navigateTo("pages/user/bind");
						}else{
							navigateTo("pages/index/ucenter");
						}
					}else{
						uni.$layer.showToast(value.msg);
					}
					
					isFormActive.value = false;
				});
			},
			fail:function (error){
				isFormActive.value = false;
				uni.$layer.showToast("微信登录失败");
			}
		});
	}
	// #endif
	
	const onBackHome = ()=>{
		navigateTo(uni.$config.get("tabBar.defaultHome","pages/index/index"));
	}
	
</script>

<style lang="scss" scoped>
	page { background-color: #fff; }
	.avabar-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		flex-direction: column;
		view {
			&:nth-child(2){
				font-weight: bold;
				font-size: 32rpx;
				margin-top: 30rpx;
			}
		}
	}
	
	.the-form {
		width: 100%;
		margin-top: 60rpx;
		.oauth-box {
			width: 100%;
			margin-top: 50rpx;
			.oauth-list{
				display: flex;
				justify-content: center;
				margin-top: 40rpx;
				.oauth {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					.oauth-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						&.weixin {
							background-color: #41b035;
						}
					}
				}
			}
		}
		
		.form-item {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			.form-item-body{
				display: flex;
				flex-direction: row;
				padding: 35rpx 0;
				color: #555;
				box-sizing: border-box;
				position: relative;
				&.form-item-border::after {
					content: " ";
					position: absolute;
					left: 0;
					top: 0;
					pointer-events: none;
					box-sizing: border-box;
					transform-origin: 0 0;
					width: 199.8%;
					height: 199.7%;
					transform: scale(0.5, 0.5);
					border-bottom: 1px solid #e5e5e5;
					z-index: 2;
				}
				
				.form-item-icon {
					margin-right: 15rpx;
					display: inline-flex;
					flex-direction: row;
					align-items: center;
				}
				
				.form-item-placeholder {
					color: #9fa3ab;
					font-size: 30rpx;
				}
				
				.form-item-input {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: row;
					padding: 0px;
					border-color: rgb(220, 223, 230);
					width: 90%;
					input {
						color: #333;
						font-size: 30rpx;
						width: 100%;
					}
				}
				
				.form-item-right {
					color: #888;
					font-size: 26rpx;
					padding-left: 30rpx;
					padding-right: 10rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					&::before {
						position: absolute;
						content: " ";
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 16px;
						background-color: #dcd5d5;
					}
				}
				
				.form-item-button {
					width: 100%;
					color: #ffffff;
					border-color: #71ca5c;
					background-color: #71ca5c;
					height: 40px;
					line-height: 40px;
					border-radius: 35rpx;
					font-size: 32rpx;
					&.active {
						background-color: #ccc;
						color: #fff;
						border-color: #ccc;
					}
				}
				
				.not-login-btn {
					width: 100%;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #555
				}
				
				.form-item-text {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					.agreement-box {
						padding-left: 10rpx;
					}
					text {
						color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					}
				}
				
				.form-item-login-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
</style>