<template>
	<view class="container">
		<view class="content">
			<view class="top-wrap">
				<view class="bounce-in-top">
					<image src="../../static/logo.png" mode="widthFix" style="width: 458rpx;"></image>
				</view>
				<view class="circle-one"></view>
				<view class="circle-two"></view>
			</view>
			<view class="button-group">
				<view style="height: 90rpx; width: 100%; justify-content: center; align-items: center;">
					<u-button type="primary" shape="circle" :text="$tt('waitLogin.loginOrregister')" @click="gotoLogin"
						size="large"></u-button>
				</view>
				<!-- 			<view
					style="margin-top: 40rpx; height: 90rpx; width: 100%; justify-content: center; align-items: center;">
					<u-button size="large" type="primary" :plain="true" shape="circle"
						:text="$tt('waitLogin.ExperienceAccountLogin')" @click="experience"></u-button>
				</view> -->
			</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>{{$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>
</template>

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

	export default {
		data() {
			return {
				isClause: false,
				loginForm: {
					username: 'fastbee',
					password: '123456',
					rememberMe: false,
					code: '',
					uuid: '',
				},
			};
		},
		created() {
			this.getCode()
		},
		methods: {
			handleClauseCheckbox(e) {
				this.isClause = !this.isClause;
			},
			// 隐私政策
			handleGoToPrivacy() {
				let title = this.$tt('login.privacyPolicy');
				let url = projectConfig.officialWebUrl + 'privacy-policy.html';
				uni.navigateTo({
					url: `/pages/common/webview/index`
				});
			},
			// 服务协议
			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()
				this.login()

			},
			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.codeUrl = 'data:image/gif;base64,' + res.img;
						this.loginForm.uuid = res.uuid;
						this.loginForm.code = res.resultCode;
					})
					.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">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.content {
			flex: 1;

			.top-wrap {
				position: relative;
				height: 510rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.bg {
					position: absolute;
					top: 0;
					left: 40%;
					width: 100%;
					height: 30%;
					overflow: hidden;

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

				.bounce-in-top {
					-webkit-animation: bounce-in-top 0.5s;
					animation: bounce-in-top 0.9s;
				}

				@-webkit-keyframes bounce-in-top {
					0% {
						-webkit-transform: translateY(-500px);
						transform: translateY(-500px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
						opacity: 0;
					}

					38% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
						opacity: 1;
					}

					55% {
						-webkit-transform: translateY(-65px);
						transform: translateY(-65px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					72% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}

					81% {
						-webkit-transform: translateY(-28px);
						transform: translateY(-28px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					90% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}

					95% {
						-webkit-transform: translateY(-8px);
						transform: translateY(-8px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					100% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}
				}

				@keyframes bounce-in-top {
					0% {
						-webkit-transform: translateY(-500px);
						transform: translateY(-500px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
						opacity: 0;
					}

					38% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
						opacity: 1;
					}

					55% {
						-webkit-transform: translateY(-65px);
						transform: translateY(-65px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					72% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}

					81% {
						-webkit-transform: translateY(-28px);
						transform: translateY(-28px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					90% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}

					95% {
						-webkit-transform: translateY(-8px);
						transform: translateY(-8px);
						-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
					}

					100% {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
					}
				}

				.circle-one {
					position: absolute;
					border-radius: 50%;
					width: 200px;
					height: 200px;
					top: -100px;
					left: -100px;
					background-color: rgba(220, 235, 248, 0.43);
				}

				.circle-two {
					position: absolute;
					border-radius: 50%;
					width: 100px;
					height: 100px;
					bottom: 3px;
					right: -50px;
					background-color: rgba(220, 235, 248, 0.43);
				}
			}

			.button-group {
				margin: 0 50rpx 50rpx;
			}

			.clause {
				margin: 40rpx;
				font-size: 28rpx;

				.link {
					color: #00aaff;
				}
			}
		}

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

	.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>