<template>
	<view class="wait-login">
		<view class="content">
			<view class="top-wrap">
				<view class="user-register" @click="handleRegister()">{{$tt('register.registration')}}</view>
				<view class="bounce-in-top">
					<image src="https://iot-xcwl.cn/app/fastbee1_blue.png" mode="widthFix" style="width: 290rpx;">
					</image>
				</view>
			</view>
			<view class="middle-text">
				<view class="hello">
					Hello,
				</view>
				<view class="welcome-wrap">
					<text class="welcome">{{ $tt('common.Welcome') }}</text>
					<text class="fastbee">{{ $tt('common.fastbee') }}</text>
					<text class="star">
						<image src="../../static/common/star.png" mode="widthFix" style="width: 25px;" />
					</text>
				</view>
			</view>
			<view class="button-group">
				<button class="button1" @click="gotoLogin">
					{{$tt('waitLogin.loginOrregister')}}
				</button>
				<button class="button2" plain="true" @click="experience">
					{{ $tt('waitLogin.ExperienceAccountLogin') }}
				</button>
			</view>
			<view class="clause">
				<u-checkbox-group @change="handleClauseCheckbox">
					<label>
						<u-checkbox :checked="isClause" style="transform:scale(0.8)" />
					</label>
					<text class="check_text">
						<text class="ordinary">{{$tt('waitLogin.agree')}}</text>
						<text class="link" @click="handleGoToPrivacy">《{{$tt('waitLogin.privacy')}}》</text>
						<text class="link" @click="handleGoToService">《{{$tt('waitLogin.agreement')}}》</text>
						<text class="link" @click="handleGoToStatement">《{{$tt('waitLogin.children')}}》</text>
						<text class="link" @click="handleGoToCommonBill">《{{$tt('waitLogin.third')}}》</text>

					</text>
				</u-checkbox-group>
			</view>
		</view>
		<!-- <view class="copyright"><text>Copyright © 2022-2025 FastBee All Rights Reserved.</text></view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import projectConfig from '@/env.config.js';
	import {
		getProfile
	} from '@/apis/modules/common.js'

	export default {
		data() {
			return {
				isClause: false,
				loginForm: {
					username: 'fastbee',
					password: '123456',
					rememberMe: false,
					code: '',
					uuid: '',
				},
				captchaOnOff: true, // 验证码开关
			};
		},
		methods: {
			handleClauseCheckbox(e) {
				this.isClause = !this.isClause;
			},
			// 用户注册
			handleRegister() {
				uni.$u.route('/pagesB/login/register');
			},
			// 隐私政策
			handleGoToPrivacy() {
				let title = this.$tt('login.privacyPolicy');
				let url = projectConfig.officialWebUrl + 'privacy-policy.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 服务协议
			handleGoToService() {
				let title = this.$tt('login.serviceAgreement');
				let url = projectConfig.officialWebUrl + 'service-agreement.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 儿童隐私保护声明
			handleGoToStatement() {
				let title = this.$tt('login.childProtectionStatement');
				let url = projectConfig.officialWebUrl + 'child-protection-statement.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			// 第三方信息共享清单
			handleGoToCommonBill() {
				let title = this.$tt('login.commonBill');
				let url = projectConfig.officialWebUrl + 'common-bill.html';
				uni.navigateTo({
					url: `/pages/common/webview/index?title=${title}&url=${url}`
				});
			},
			//前往登录页面
			gotoLogin() {
				if (!this.isClause) {
					uni.showToast({
						icon: 'none',
						title: this.$tt('login.readAndCheckTheAgreement'),
					});
					return;
				}
				uni.$u.route('/pages/login/index');
			},
			// 体验账号登录
			experience() {
				if (!this.isClause) {
					uni.showToast({
						icon: 'none',
						title: this.$tt('login.readAndCheckTheAgreement'),
					});
					return;
				}
				this.getCode()
			},
			gotoSmsLogin() {
				if (!this.isClause) {
					uni.showToast({
						icon: 'none',
						title: this.$tt('login.readAndCheckTheAgreement'),
					});
					return;
				}
				uni.$u.route('/pagesB/login/smsLogin');
			},
			// 验证码接口
			getCode() {
				this.$api.common.captchaImage(true).then(res => {
						this.captchaOnOff = res.captchaEnabled;
						if (this.captchaOnOff) {
							if (res.code === 200) {
								this.codeUrl = 'data:image/gif;base64,' + res.img;
								this.loginForm.uuid = res.uuid;
								this.loginForm.code = res.resultCode;
								this.login()
							}
						}
						if (!this.captchaOnOff) {
							this.login()
						}

					})
					.catch(err => {
						this.$u.toast(err.msg);
					});
			},
			// 调用登录接口
			login() {
				this.$api.common.login(this.loginForm).then(async res => {
					if (res.code == 200) {
						// 存储token和账号
						this.saveToken(res.token);
						this.saveAccount();
						// 获取用户信息
						let profile = await this.getProfile();
						uni.$u.vuex('profile', profile);
						// 跳转主页
						uni.reLaunch({
							url: '/pages/tabBar/home/index'
						});
					} else {
						if (res.msg) {
							uni.showToast({
								icon: "none",
								title: res.msg,
								complete: (res) => {
									setTimeout(() => {
										this.getCode();
									}, 1500);
								}
							})
						}
					}
				})
			},
			getProfile() {
				return new Promise((resolve, reject) => {
					getProfile().then(res => {
						resolve(res.data);
					}).catch(err => {
						this.$u.toast(err.msg);
					})
				});
			},
			saveToken(token) {
				// 本地缓存存储token
				uni.setStorageSync('token', token);
				// vuex存储token
				uni.$u.vuex('vuex_token', token);
			},
			saveAccount() {
				// 本地缓存存储
				uni.setStorageSync('username', this.loginForm.username);
				uni.setStorageSync('password', this.loginForm.password);
			},

		}
	}
</script>

<style lang="scss">
	.wait-login {
		padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--status-bar-height));

		.content {
			flex: 1;

			.top-wrap {
				position: relative;
				display: flex;

				.user-register {
					position: absolute;
					// #ifdef MP-WEIXIN
					top: 140rpx;
					// #endif
					// #ifndef MP-WEIXIN
					top: 70rpx;
					// #endif
					right: 46rpx;
					line-height: 36rpx;
					font-size: 28rpx;
					font-weight: 400;
				}

				.bounce-in-top {
					margin: 206rpx 380px 0 80rpx;
				}
			}

			.middle-text {
				margin: 144rpx 0 0 80rpx;
				height: 168rpx;
				line-height: 84rpx;
				text-align: left;

				.hello {
					font-weight: 700;
					font-size: 72rpx;
				}

				.welcome-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;

					.welcome {
						font-weight: 900;
						font-size: 52rpx;
						letter-spacing: 7.4rpx;
					}

					.fastbee {
						font-family: Source Han Sans CN-Heavy;
						font-weight: 900;
						font-size: 52rpx;
						letter-spacing: 7.4rpx;
						color: #486FF2;
					}

					.star {
						color: #FFF200;
						font-size: 50rpx;
						margin-left: 12rpx;
					}
				}
			}

			.button-group {
				margin: 318rpx 80rpx 0 80rpx;

				.button1 {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 98rpx;
					border-radius: 18rpx;
					color: #fff;
					background-color: #486FF2;
					font-weight: 400;
					font-size: 32rpx;
					letter-spacing: 0.6rpx;
				}

				.button2 {
					margin-top: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 98rpx;
					border-radius: 18rpx;
					color: #045FFA;
					background-color: #fff;
					font-weight: 400;
					font-size: 32rpx;
					letter-spacing: 0.6rpx;
					border-width: 2rpx;
					border-color: #045FFA;
				}
			}

			.clause {
				margin: 128rpx 80rpx 80rpx 80rpx;
				font-size: 20rpx;
				letter-spacing: 0.6rpx;
				line-height: 36rpx;

				.ordinary {
					color: #999999;
				}

				.link {
					color: #486FF2;
				}
			}
		}

		.copyright {
			text-align: center;
			font-size: 20rpx;
			margin-bottom: 46rpx;
		}
	}

	.bgbottom {
		position: absolute;
		top: 67%;
		left: -30%;
		width: 100%;
		height: 30%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			filter: blur(1px);
			transform: scale(0.7);
			opacity: 0.1;
		}
	}
</style>