<template>
	<u-popup :value="showLogin" mode="center" border-radius="14" @close="$emit('close')">
		<view class="login-dialog">
			<view class="login-dialog-left" :style="{backgroundImage: `url(${fileUrl+loginBackground})`}">
				<image :src="homeFileUrl+logo" class="ldl-logo"></image>
				<view class="ldl-system-name">智能图像创作平台</view>
				<view class="ldl-team">研发团队</view>
				<view class="ldl-message">与其说做功能强大的PIXEL.AI，其实我们更注重用户的使用体验。灵活、富有趣味性的产品是我们在PIXEL.AI的追求，认真做产品，有耐心，不含糊，我们相信PIXEL.AI一定会做的很好。</view>
				<view class="ldl-bottom">
					<text>PIXEL.AI 移动端</text>正式上线啦！
					<u-icon name="arrow-right" size="24" @click="openCode"></u-icon>
				</view>
			</view>
			<view class="login-dialog-right">
				<u-icon class="ldr-close" name="close" size="32" @click="$emit('close')"></u-icon>
				<view class="ldr-top">
					<el-tabs class="ldr-tabs" v-model="current" @tab-click="change">
					    <el-tab-pane v-for="(item,index) in list" :key="index" :label="item.name" 
						:name="item.name"></el-tab-pane>
					</el-tabs>
				</view>
				<view class="ldr-post">
					<el-form ref="loginForm" size="medium" :model="loginForm" :rules="getCurrent ? registerRules : loginRules">
						<el-form-item prop="username" label="手机号: ">
						    <el-input v-model.trim="loginForm.username" type="tel"
							placeholder="请输入手机号" auto-complete="off" ></el-input>
						</el-form-item>
						<el-form-item prop="password" label="密码: ">
						    <el-input v-model.trim="loginForm.password" type="password"
							placeholder="请输入密码" auto-complete="off" ></el-input>
						</el-form-item>
						<el-form-item v-if="getCurrent" prop="confirmPassword" label="确认密码: ">
						    <el-input v-model.trim="loginForm.confirmPassword" type="password"
							placeholder="请输入确认密码" auto-complete="off" ></el-input>
						</el-form-item>
						<u-button class="ldr-btn" @click="submit" ripple :hairLine="false"
						shape="circle" rippleBgColor="#dcf1fc" :loading='dotLoading'>
							{{ getCurrent ? '注册' : '登录' }}
						</u-button>
					</el-form>
					<view class="ldr-agreement">
						<u-checkbox class="ldr-checkbox" active-color="#8fca80" v-model="isAgreed"></u-checkbox>
						我已阅读并同意<text @click="toAgreement('用户协议')">用户服务协议</text>、<text @click="toAgreement('隐私协议')">隐私权政策</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	props: {
		showLogin: {
			type: Boolean,
			default: false
		}
	},
	data(){
		return{
			// 基础路径
			fileUrl: configService.fileUrl + 'pixel/pc/home/',
			homeFileUrl: configService.fileUrl + 'pixel/home/',
			// logo图标
			logo: 'logo-new.png',
			// tabs标签栏
			list: [
				{name: '用户登录'},
				{name: '手机注册'}
			],
			// 当前tabs下标
			current: '用户登录',
			// 登录表单
			loginForm: {
				username: '',
				password: ''
			},
			// 登录验证规则
			loginRules: {
				username: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if(!this.$u.test.mobile(value)){
								callback(new Error('手机号格式不正确'));
							}else{
								callback();
							}
						},
						trigger: ['blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			},
			// 注册验证规则
			registerRules: {
				username: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if(!this.$u.test.mobile(value)){
								callback(new Error('手机号格式不正确'));
							}else{
								callback();
							}
						},
						trigger: ['blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				confirmPassword: [
					{
						required: true,
						message: '请输入确认密码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if(this.loginForm.password !== '' && this.loginForm.password === value){
								callback();
							}else{
								callback(new Error('两次密码输入不同'));
							}
						},
						trigger: ['blur']
					}
				]
			},
			// 加载
			dotLoading: false,
			// 是否同意协议、政策
			isAgreed: false,
			// 弹窗背景图-左
			loginBackground: 'login-background.png',
		}
	},
	computed: {
		getCurrent(){
			return this.current === '手机注册'
		}
	},
	methods: {
		// 打开移动端下载弹窗
		openCode(){
			this.$emit('close');
			this.$emit('openCode');
		},
		// 切换方式
		change(tab, event) {
			this.$refs.loginForm.resetFields();
		},
		// 提交
		submit(){
			if(!this.isAgreed){
				this.$emit('toast',{type: 'warning', title: "请阅读并勾选同意协议!"});
				return;
			}
			try{
				let that = this;
				let current = this.current === '手机注册';
				this.dotLoading = true;
				this.$refs.loginForm.validate(async(valid) => {
					if (valid) {
						// 判断注册或登录的表单值，进行调整匹配
						if(!current) delete that.loginForm.confirmPassword;
						let res = await that.$api[current?'register':'login'](that.loginForm);
						if(res.success){
							if(!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('user_message', JSON.stringify(res.data.user));
								uni.showToast({icon: 'none', title: '登录成功！'});
								that.$emit('login', res.data.user);
								that.$emit('close');
							}else{
								that.$emit('toast',{type: 'success', title: "注册成功，请登录"});
								that.current = '用户登录';
							}
							that.$refs.loginForm.resetFields();
						}else{
							that.$emit('toast',{type: 'error', title: current?`${res.data}!`:"手机号或密码错误!"});
						}
					}else{
						that.$emit('toast',{type: 'error', title: "请完善信息！"});
					}
				});
			}catch(e){}
			finally{
				this.dotLoading = false;
			}
		},
		// 查看协议
		toAgreement(type = ''){
			if(type) uni.navigateTo({ url: `/pages/index/rich-detail?name=${type}` });
		}
	},
	mounted() {
		this.loading = false;
		// 判断上次登录记录
		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-dialog{
	width: 2000rpx;
	height: 1140rpx;
	display: flex;
	.login-dialog-left{
		width: 50%;
		height: 100%;
		padding: 160rpx 160rpx 100rpx;
		background-size: cover;
		.ldl-logo{
			width: 360rpx;
			height: 76rpx;
			margin-bottom: 40rpx;
		}
		.ldl-system-name{
			font-size: 50rpx;
			font-weight: bold;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			margin-bottom: 90rpx;
		}
		.ldl-team{
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			color: #9eb3a1;
			margin-bottom: 40rpx;
		}
		.ldl-message{
			height: 420rpx;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			line-height: 50rpx;
			border-bottom: 2rpx solid #9eb3a1;
		}
		.ldl-bottom{
			margin-top: 70rpx;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			display: flex;
			align-items: center;
			.u-icon{
				margin-left: 10rpx;
				cursor: pointer;
			}
			text{
				font-weight: bold;
			}
		}
	}
	.login-dialog-right{
		flex: 1;
		height: 100%;
		padding: 120rpx;
		.ldr-close{
			position: absolute;
			right: 50rpx;
			top: 40rpx;
			cursor: pointer;
			&:hover{
				color: #b4f08e;
			}
		}
		.ldr-top{
			width: 100%;
			margin-bottom: 35rpx;
			display: flex;
			// justify-content: center;
			.ldr-tabs{
				::v-deep .el-tabs__nav-wrap::after{
					display: none;
				}
				::v-deep .el-tabs__item{
					font-size: 46rpx;
					&.is-active{
						color: #a6ec96;
					}
					&:hover{
						color: #a6ec96;
						opacity: 0.7;
					}
				}
				::v-deep .el-tabs__active-bar{
					height: 6rpx;
					background-color: #a6ec96;
				}
			}
		}
	}
}
.ldr-btn{
	height: 90rpx;
	margin-top: 80rpx;
	background-image: linear-gradient(to right, #81cd7d 0%, #b0f090  51%, #81cd7d  100%);
	box-shadow: 0 0 20rpx #eee;
	background-size: 200% auto;
	text-transform: uppercase;
	color: white;
	border: none;
}
.ldr-agreement{
	margin-top: 60rpx;
	margin-bottom: 30rpx;
	color: #ded3c9;
	display: flex;
	align-items: center;
	font-size: 30rpx;
	text{
		cursor: pointer;
		color: #8fca80;
	}
	.ldr-checkbox{
		margin-right: -10rpx;
		::v-deep .u-checkbox__icon-wrap--square{
			cursor: pointer;
		}
	}
}
</style>