<template>
	<view :style="{background:`url(${bg})`}" class="body">
		<view class="one1">
			<image src="../../static/img/left_white.png" mode="" @click="back()"></image>
			<!-- <view class="one_text">{{ title }}</view> -->
		</view>
		<view class="login_top">
			<image src="../../static/img/loginbg.png"></image>
		</view>
	<view class="login_body">
		<view class="status_bar"></view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#010101" class="select"></uni-segmented-control>
		<view class="body">
			<view class="login" v-show="current==0">
				<input type="text" class="login_input" placeholder="eamil address" v-model="loginDate.username" @input="verificationLogin">
				<view class="login_input1">
					<input :password="!tag" class="login_input1_text"placeholder="password"  v-model="loginDate.password" @input="verificationLogin">
				    <image :src="eye" mode ="" class="see login_see" @click="seePwd"></image>
				</view>
				
				<view class="tips" v-show="loginErr"><image src="../../static/img/att.png" mode=""></image>{{errMsg}}</view>
				<view class="forgot" @click="forgotPwd">Forgot your Password?</view>
				<button class="login_submit"  :disabled="isLogin" @click="login()" >SIGN IN</button>
				<!-- <view class="agreement">
					<image src="../../static/img/select2.png" mode="" class="agreement_image" @click="loginSelect=!loginSelect,loginErr=false" v-show="!loginSelect"></image>
					<image src="../../static/img/select1.png" mode="" class="agreement_image" @click="loginSelect=!loginSelect" v-show="loginSelect"></image>
					<view class="agreement_right">
						by continuong, you agree to be <text class="text" @click="gotonewpage(1)"> terms of use </text> and <text class="text"@click="gotonewpage"> privacy policy</text>.
					</view>
				</view> -->
				
			</view>
			<view class="login" v-show="current==1">
				<input type="text" class="login_input" placeholder="name" @input="verificationReg" v-model="regDate.username">
				<input type="text" class="login_input" placeholder="eamil address" @input="verificationReg" v-model="regDate.email">
				<!-- <input type="text" class="login_input" placeholder="password" @input="verificationReg" v-model="regDate.password1"> -->
				<view class="login_input1">
					<input :password="!tag" class="login_input1_text"placeholder="password"  v-model="regDate.password1" @input="verificationReg">
				    <image :src="eye" mode ="" class="see login_see" @click="seePwd"></image>
				</view>
				<view class="tips" v-show="regErr">{{errMsg}}</view>
				<button class="login_submit" :disabled="isReg" @click="Reg()">REGISTER</button>
				<view class="agreement">
					<image src="../../static/img/select2.png" mode="" style="width: 25px;height: 25px;" class="agreement_image" @click="regSelect=!regSelect" v-show="!regSelect"></image>
					<image src="../../static/img/select_red.png" mode="" style="width: 25px;height: 25px;" class="agreement_image" @click="regSelect=!regSelect" v-show="regSelect"></image>
					<view class="agreement_right">
						by continuong, you agree to be <text class="text"@click="gotonewpage(1)" > terms of use </text> and <text class="text" @click="gotonewpage(2)"> privacy policy</text>.
					</view>
				</view>
			</view>
			
			<!-- <view class="mode">
				<view class="mode_title">———  or continue with  ———</view>
				<view class="mode_content">
					<image src="/static/img/facebook2.png" class="mode_content_image"></image>
					<image src="/static/img/gugei.png" class="mode_content_image"></image>
					<image src="/static/img/apple.png" class="mode_content_image" style="border: #fff solid 1rpx;border-radius: 50%;"></image>
				</view>
			</view> -->
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="Close" confirmText="Activation" title="Tips" content="Please activate the mailbox first" 
			@confirm="dialogConfirm" ></uni-popup-dialog>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import {defaultRequest1,defaultRequest} from '../../api/index.js'
	export default {
		data() {
			return {
				items: ['SIGN IN', 'REGISTER'],
				current: 0,
				tag:false,
				eye:'../../static/img/eye_open.png',
				loginDate:{
					username:'',
					password:'',
					_action:'loginbyun'
				},
				regDate:{
					username:'',
					email:'',
					password1:'',
					password2:'',
					_action:'registerun'
				},
				// 是否填写完成信息
				isLogin:true,
				isReg:true,
				// 是否勾选
				regSelect:false,
				loginSelect:false,
				// 是否显示错误信息
				backButtonPress:0,
				loginErr:false,
				regErr:false,
				errMsg:'The email address or password you enterde is incorrect.',
				query:{
					_action:'sendmessagesforvalidation',
					username:'',
				},
				bg:'/static/img/bg.png'
			}
		},
		// onBackPress(options) {
		// 					this.backButtonPress++;
		// 					if (this.backButtonPress > 1) { 
		// 						plus.runtime.quit();
		// 					} else {
		// 						plus.nativeUI.toast('Click again to exit');
		// 					} 
		// 					setTimeout(function() {
		// 						this.backButtonPress = 0;
		// 					}, 1000);
		// 					return true;
		// 			},
		methods:{
			seePwd(){
				
				this.tag = !this.tag;
				if(this.eye.includes('eye_open')){
					this.eye = '../../static/img/eye_w.png'
				}else{
					this.eye ='../../static/img/eye_open.png'
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			forgotPwd(){
				if(this.loginDate.username==''){
					uni.showToast({
						title:'Please fill in the user email first',
						icon:'none',
						duration: 2000
					})
					return
				}
				uni.navigateTo({
					url:'./verifyEmail?email='+this.loginDate.username
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			//获取页面配置
			configuration(){
				let data={_action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'}
				setTimeout(() =>{
					defaultRequest(data).then(res=>{
						console.info(res)
						res.data.zones.map( item =>{
							if(item.zone_code == 'LOGINBG'){
								let src ='https://www.dopeplus.com/images/mapp_customized/202209/1663570362997892419.png'
								
								if(src !==item.blocks[0].block_pic ){
									this.bg = item.blocks[0].block_pic
								}
							     console.log(this.bg)
							}
						})
						
					})
				},200)
			},
			// 登录
			login(){
				// if(!this.loginSelect){
				// 	this.errMsg='Please read and tick the terms of service and privacy policy first.'
				// 	this.loginErr=true
				// 	return
				// }
				uni.showLoading({
					title:'Logining',
					
				})
				console.log(this.loginDate)
				defaultRequest1(this.loginDate).then(res=>{
					console.info(res)
					
					if(res.error==0){
						this.loginErr=false
						res.data.isLogin=true
						
						setTimeout( () =>{
							uni.hideLoading()
							uni.showToast({
								title:'Login successful',
								icon:'none',
								duration: 2000
							})
						},1000)
						let list ={
							email:res.data.email,
							cartlist:[]
						}
						let list2 = []
						list2.push(list)
						uni.setStorageSync('cartlist',list2)
						uni.setStorageSync('isLogin',1)
						uni.setStorageSync('user_info',res.data)
						uni.switchTab({
							delta: 1
							// url:'../index/index'
						})
					}else{
						if(res.data){
							this.$refs.alertDialog.open()
							this.query.username=this.loginDate.username
						}else{
							this.loginErr=true
							this.errMsg=res.message
						}
					}
				})
			},
			// 验证邮件
			dialogConfirm(){
				console.log(this.query,'////')
				defaultRequest(this.query).then(res=>{
					console.info(res)
					if(res.error==0){
						uni.showToast({
							title:res.message,
							icon:'none',
							duration: 2000
						})
					}
				})
			},
			
			// 注册
			Reg(){
				if(!this.regSelect){
					uni.showToast({
						title:'please agree to and tick the User Agreement first',
						icon:'none',
						duration: 2000
					})
					return
				}
				this.regDate.password2=this.regDate.password1
				uni.showLoading({
					title:'Register now~',
					
				})
				defaultRequest1(this.regDate).then(res=>{
					console.info(res)
					if(res.error==0){
						uni.hideLoading()
						this.regErr=false
						this.loginDate.password = this.regDate.password1
						this.loginDate.username = this.regDate.username
						this.login()
						setTimeout( ()=>{
							// Successful registration, please verify your email address!
							uni.showToast({
								title:'logining in~',
								icon:'none',
								duration: 2000
							})
						},1000)
					}else{
						this.regErr=true
						this.errMsg=res.message
					}
				})
			},
			// 验证是否填写登录信息
			verificationLogin(){
				if(this.loginDate.username && this.loginDate.password){
					this.isLogin=false
				}else{
					this.isLogin=true
				}
			},
			// 验证是否填写注册信息
			verificationReg(){
				if(this.regDate.username && this.regDate.password1 && this.regDate.email){
					this.isReg=false
				}else{
					this.isReg=true
				}
			},
			// 跳到页面
			gotonewpage(e){
				
				if(e==1){
					var urlStr = encodeURI("https://dopeplus.com/help/Terms.html")
					 // plus.runtime.openURL(urlStr);
					uni.navigateTo({
						url:'../order/paypalWebview?src='+urlStr
					})
				}
				else{
					var urlStr = encodeURI("https://en.meixx.com/help/privacy.html")
					
					 // plus.runtime.openURL(urlStr);
					uni.navigateTo({
						url:'../order/paypalWebview?src='+urlStr
					})
				}
				
				
			}

		},
		onLoad() {
			this.configuration()
			
		}
	}
</script>
<style>
	page{
		height: 100vh;
		background-color: black;
	}
</style>
<style lang="scss" scoped>
	.one1{
				display: flex;
				height:100rpx;
				padding-top: 50rpx;
				width: 100%;
				top:0;
				line-height: 100rpx;
				z-index: 99;
				
				position: fixed;
				text-align: center;
				padding-left:20rpx;
				color:#fff;
				image{
					float: left;
					padding-top: 30rpx;
					padding-right:20rpx;
					height: 40rpx;
					width: 40rpx;
				}
				.one_text{
					width: 60%;
					text-align: center;
					margin-left: 10%;
				}
				
			}
	.login_top{
		height: 102px;
		width: 144px;
		margin-top: 200rpx;
		margin-left: 30%;
		image{
			height: 100%;
			width: 100%;
			margin: auto 0;
		}
	}
	.body{
		background-size: 100%;
		height: 100vh;
		width: 100%;
		// background-color: red;
		padding:0;
		color:#fff !important;
		position: fixed;
		
		
	}
	.uni-input-placeholder{
		color:#fff !important;
		font-size:13px;
	}
	.tips{
		margin-top: 20rpx;
	}
	/deep/ .uni-text .segmented-control__text{
		color:#fff !important;
	}
	.login_body{
		// margin-top: 300rpx;
		padding-top: 80.33rpx;
		color:#fff;
		
	}
	.see{
		height: 30rpx;
		width: 30rpx;
		margin-top: 36rpx;
		float: right;
		
	}
	.select{
		margin-bottom: 80rpx;
		font-size: 33.33rpx;
		font-weight: bold;
		
	}
	.mode{
		// position: fixed;
		margin-top: 300rpx;
		 bottom: 138.67rpx;
		width: 100%;
		left: 0;
		
		.mode_title{
			font-size: 26.67rpx;
			color: #fff;
			// position: relative;
			text-align: center;
			width: 100%;
			
			&:before{
				content: "";
				height: 1px;
				width: 89.33rpx;
				// background-color: #BCBCBC;
				// position: absolute;
				left: 20%;
				top: 50%;
			}
			&:after{
				content: "";
				height: 1px;
				width: 89.33rpx;
				// background-color: darkred;
				position: absolute;
				right: 20%;
				top: 50%;
			}
		}
		.uni-button{
			background-color: aqua !important;
		}
		.mode_content{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50.67rpx;
			
			.mode_content_image{
				width: 54.67rpx;
				height: 54.67rpx;
				margin-right: 49.33rpx;
				image{
					border: #fff solid 1rpx;
				}
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.agreement_right{
		width: 582rpx;
	}
	/deep/ .uni-input-input{
		font-size: 26rpx !important;
	}
</style>