<!-- 纯富文本展示页 -->
<template>
	<!-- #ifdef APP -->
	<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
	<!-- #endif -->
		<view class="lg-top">
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
				<!-- #ifndef MP-WEIXIN -->
				<u-icon name="arrow-left" size="40" class="back" @click="back"
				:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
				<image :src="myFileUrl+logo"></image>
				<view style="width: 75rpx;"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN  -->
				<image :src="myFileUrl+logo"></image>
				<!-- #endif -->
			</view>
			<view class="lg-head">
				<image @click="handleClickDragon" :src="myFileUrl+lgHead[justChange? 2 : current]"></image>
			</view>
		</view>
		<view class="lg-content">
			<view class="lgc-top">
				<u-tabs ref="tabs" :is-scroll="false" :list="list" activeColor="#dcf1fc"
				@change="change" :current="current" bgColor="#ffffff00" inactiveColor="#9cabb2"
				fontSize="35" ></u-tabs>
			</view>
			<u-divider></u-divider>
			<view class="lgc-post">
				<u-form :model="loginForm" ref="loginForm" :rules="current ? registerRules : loginRules" 
				:errorType="['message','toast']" :labelStyle="{color: '#f9f9f9'}" labelWidth="150">
					<u-form-item class="pixel-form" label="手机号: " prop="username" >
						<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.username" 
						placeholder="请输入手机号" trim type="number"/>
					</u-form-item>
					<u-form-item class="pixel-form" label="密码: " prop="password">
						<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.password" 
						type="password" placeholder="请输入密码" trim :autocomplete="false"/>
					</u-form-item>
					<u-form-item v-if="current" class="pixel-form" label="确认密码: " prop="confirmPassword">
						<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.confirmPassword" 
						type="password" placeholder="请输入确认密码" trim :autocomplete="false"/>
					</u-form-item>
					<u-button class="lgc-btn" @click="submit" ripple :hairLine="false" 
					shape="circle" rippleBgColor="#dcf1fc" :loading='dotLoading'>
						{{ current ? '注册' : '登录' }}
					</u-button>
					<!-- <view class="lgc-bottom">
						<view class="lgcb-left">
							<u-checkbox style="margin-right: -10rpx;" active-color="#8cade8" v-model="isChecked"></u-checkbox>
							记住密码
						</view>
						<view class="lgcb-right">
							忘记密码
						</view>
					</view> -->
					<view class="lgc-agreement">
						<u-checkbox style="margin-right: -10rpx;" active-color="#8cade8" v-model="isAgreed"></u-checkbox>
						我已阅读并同意<text>服务协议</text>、<text>隐私权政策</text>
					</view>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<DotLoading :show="dotLoading" />
	</view>
</template>

<script>
	import configService from '@/common/config.service.js';
	export default {
		data(){
			return{
				content: '',
				loading: true,// 加载
				// 基础路径
				myFileUrl: configService.fileUrl + 'pixel/my/',
				// 我的页面背景
				background: 'bluetext-background.png',
				// logo图标
				logo: 'logo.png',
				// 顶部距离等级
				topLevel: 0,
				// tabs标签栏
				list: [
					{name: '用户登录'},
					{name: '手机注册'}
				],
				// 当前tabs下标
				current: 0,
				// 输入框左上角动图
				lgHead: ['fly.gif','sprint.gif','spitfire.gif'],
				// 是否刚刚切换过tabs
				justChange: false,
				// 登录表单
				loginForm: {
					username: '',
					password: ''
				},
				// 登录验证规则
				loginRules: {
					username: [
						{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							trigger: ['blur']
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}
					]
				},
				registerRules: {
					username: [
						{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							trigger: ['blur']
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}
					],
					confirmPassword: [
						{
							required: true,
							message: '请输入确认密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.loginForm.password !== '' && this.loginForm.password === value;
							},
							message: '两次密码输入不同',
							trigger: ['blur']
						}
					]
				},
				// 加载
				dotLoading: false,
				// 是否记住密码
				isChecked: false,
				// 是否同意协议、政策
				isAgreed: false,
				// 返回地址
				nextUrl: ''
			}
		},
		// #ifndef H5
		onPageScroll(e) {
			const level = e.scrollTop/60;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
		},
		// #endif
		
		// #ifdef H5
		mounted(){
			let that = this;
			window.onscroll = function () {
			    //为了保证兼容性，这里取三个值，哪个有值取哪一个
			    //scrollTop就是触发滚轮事件时滚轮的高度
			    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				const level = scrollTop/60;
				if(level<=1) that.topLevel = level;
				else that.topLevel = 1;
			}
		},
		
		onHide() {
			window.onscroll = null;
		},
		// #endif
		onReady() {
			this.$refs.loginForm.setRules(this.loginRules);
		},
		methods:{
			// 返回
			back(){
				console.log(this.nextUrl);
				if(this.nextUrl==='/pages/mobile_web/index/index'&&
				uni.getStorageSync('current')===1){
					uni.setStorageSync('current',0);
					uni.navigateBack();
				} else {
					uni.navigateBack();
				}
			},
			// 切换方式
			change(index) {
				this.current = index;
				this.$refs.loginForm.setRules(index? this.registerRules : this.loginRules);
				// 如果已经触发喷火，不再设置
				if(this.justChange) return;
				this.justChange = true;
				setTimeout(()=>{
					this.justChange = false;
				},2010);
			},
			// 点击龙
			handleClickDragon(){
				// 如果已经触发喷火，不再设置
				if(this.justChange) return;
				this.justChange = true;
				setTimeout(()=>{
					this.justChange = false;
				},2100);
			},
			// 提交
			submit(){
				if(!this.isAgreed){
					this.$refs.uToast.show({type: 'warning',title: "请阅读并勾选同意协议!"});
					return;
				}
				try{
					let that = this;
					this.dotLoading = true;
					this.$refs.loginForm.validate(async(valid) => {
						if (valid) {
							// 判断注册或登录的表单值，进行调整匹配
							if(!that.current) delete that.loginForm.confirmPassword;
							let res = await that.$api[that.current?'register':'login'](that.loginForm);
							if(res.success){
								if(!that.current){
									// 存储登录记录
									uni.setStorageSync('loginMemory',JSON.stringify({
										username: that.loginForm.username,
										password: that.loginForm.password,
										timer: new Date()
									}));
									that.$u.vuex('vuex_token', res.data.token);
									// that.$u.vuex('vuex_token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
									that.$u.vuex('user_message', JSON.stringify(res.data.user));
									if(that.nextUrl===''){
										uni.navigateBack({complete() {
											setTimeout(()=>{
												uni.showToast({icon: 'none', title: '登录成功！'});
											},600)
										}})
									}else{
										uni.redirectTo({
											url: that.nextUrl,
											complete() {
												setTimeout(()=>{
													uni.showToast({icon: 'none', title: '登录成功！'});
												},600)
											}
										});
									}
								}else{
									that.$refs.uToast.show({type: 'success',title: "注册成功，请登录"});
									that.current = 0;
								}
								that.$refs.loginForm.resetFields();
							}else{
								that.$refs.uToast.show({type: 'error',
								title: that.current?`${res.data}!`:"手机号或密码错误!"});
							}
						}
					});
				}catch(e){}
				finally{
					this.dotLoading = false;
				}
			}
		},
		onLoad(options) {
			this.loading = false;
			this.nextUrl = (options.nextUrl != null && options.nextUrl != '/pages/mobile_web/my/child_pages/login') ?
				options.nextUrl : '';
			// 判断上次登录记录
			let loginMemory = uni.getStorageSync('loginMemory');
			if(loginMemory) {
				const {username, password, timer} = JSON.parse(loginMemory);
				// 距离上次存储间隔5天，则删除缓存
				if(Math.floor((Date.parse(new Date()) - Date.parse(new Date(timer)))/(24*3600*1000)) >5){
					uni.removeStorageSync('loginMemory');
				}else{
					this.loginForm = {
						username: username,
						password: password
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
.login{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	// #ifdef APP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.lg-top{
		// #ifdef APP
		.app-top{
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}
		// #endif
		.mobile-logo{
			width: 100%;
			display: flex;
			justify-content: center;
			// #ifndef MP-WEIXIN
			justify-content: space-between;
			align-items: center;
			.back{
				margin-left: 35rpx;
				margin-top: 5rpx
			}
			// #endif
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;
			image{
				width: 200rpx;
				height: 45rpx;
			}
		}
		.lg-head{
			margin: 80rpx 40rpx 32rpx;
			image{
				margin-left: -100rpx;
				width: 50%;
				height: 320rpx;
			}
		}
	}
	.lg-content{
		// flex: 1;
		margin: -100rpx 40rpx 32rpx;
		background: linear-gradient(rgba(254,253,255,0.4), rgba(46,172,238,0.2));
		border-radius: 20rpx;
		color: #f9f9f9;
		padding: 40rpx 25rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.lgc-top{
			width: 100%;
			margin-bottom: 35rpx;
		}
	}
}
.pixel-form{
	margin: 30rpx;
	.pixel-input{
		width: 320rpx;
	}
}
.lgc-btn{
	margin-top: 50rpx;
	background-image: linear-gradient(to right, #6190E8 0%, #A7BFE8  51%, #6190E8  100%);
	box-shadow: 0 0 20rpx #eee;
	background-size: 200% auto;
	text-transform: uppercase;
	color: white;
	border: none;
}
.lgc-bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
	margin-bottom: 140rpx;
	color: #ded3c9;
	.lgcb-left{
		display: flex;
		align-items: center;
		line-height: 50rpx;
	}
	.lgcb-right{
		line-height: 50rpx;
	}
}
.lgc-agreement{
	margin-top: 60rpx;
	margin-bottom: 30rpx;
	color: #ded3c9;
	display: flex;
	align-items: center;
	text{
		color: #6894e8;
	}
}
</style>