<template>
	<view class="page-container">
		<view class="login-header-bg">
			<view class="flex-row ">
				<view class="bgleft">
				</view>
				<view class="bgright">
				</view>
			</view>
			<view class="logo">
				<image src="/static/images/header-logo.png" mode="widthFix" class="logo">
			</view>
		</view>

		<view class="nav-tabs">

			<u-tabs lineColor="#DA2538" line-width="60px" line-hight="3px" :scrollable="false"
				:active-style="{fontSize: '18px', fontWeight: 'bold', color: '#fff'}" :list="navs"
				:current="navIndex"  @click="tabsClick"></u-tabs>
		</view>
		<view class="login-input" v-if="navIndex==0">
			<view class="input-box align-center">
				<view class="code">+86</view>
				<input type="number" v-model="phone" placeholder="请输入手机号码">
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="password" password placeholder="请输入密码">
			</view>
		</view>
		<view class="login-input" v-else>
			<view class="input-box align-center">
				<input type="text" v-model="email" placeholder="请输入邮箱">
			</view>
			<view class="input-box align-center">
				<input type="text" v-model="password" password placeholder="请输入密码">
			</view>
		</view>
		<view class="forgot flex-row justify-between">
			<u-checkbox-group v-model="radiovalue" placement="column" activeColor="#DA2538">
				<u-checkbox :customStyle="{marginBottom: '8px',color: '#a7a8b0'}" label="记住密码" name="remember">
				</u-checkbox>
			</u-checkbox-group>

			<navigator url="/pages/user/find-password" hover-class="none" style="color: rgb(96, 98, 102);">忘记密码</navigator>
		</view>
		<view class="login-button">
			<u-button shape="circle" :loading="loading" :disabled="phone === '' && email==='' || loading"
				color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)" text="登录" @click="login"></u-button>
		</view>
		<view class="login-bottom align-center">
			<text>还没有账号？</text>
			<navigator url="/pages/user/reg" open-type="redirect" hover-class="none" class="link-button">立即注册
			</navigator>
		</view>
		<!-- <view class="reg-agreement flex-row">
			   <u-checkbox-group @change="onChange">
			   	<u-checkbox shape="circle" activeColor="#DA2538" name="agreement"></u-checkbox>
			   </u-checkbox-group>
			   <view>
			     <text>我已阅读并同意</text>
			     <navigator url="/pages/user/agreement">《用户许可协议》</navigator>
			     <text>和</text>
			     <navigator url="/pages/user/privacy">《用户隐私政策》</navigator>
			   </view>
			 </view> -->
	</view>
</template>

<script>
	import {
		user
	} from '@/utils/api'

	export default {
		data() {
			return {
				phone: '',
				email:'',
				password: '',
				ac:'phone',
				loading: false,
				navs: [{
					name: '账号登录'
				},{
					name: '邮箱登录'
				}],
				navIndex: 0,
				radiovalue: [],
				agreement:false
			}
		},
		onLoad() {
			const phoneNumber = uni.getStorageSync('phoneNumber') || {};
 				this.phone = phoneNumber.phone || '';
				this.password = phoneNumber.password;
				this.radiovalue = ['remember'];
		},
		methods: {
			
			tabsClick(data) {
				if (this.navIndex != data.index) {
					this.navIndex = data.index
					this.ac=this.navIndex == 0 ? 'phone' : 'email'
					if(this.navIndex==0){
						const phoneNumber = uni.getStorageSync('phoneNumber') || {};
							this.phone = phoneNumber.phone || '';
							this.password = phoneNumber.password;
							this.radiovalue = ['remember'];
					}else{
						const emailNumber = uni.getStorageSync('emailNumber') || {};
							this.email = emailNumber.phone || '';
							this.password = emailNumber.password;
							this.radiovalue = ['remember'];
					}
				}
			},
			async login() {
				const phone = /^1[345789]\d{9}$/
				const password = /^.{6,16}$/
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				
								switch (this.navIndex) {
								  case 0:
								  if (!phone.test(this.phone)) {
								  	uni.showToast({
								  		icon: 'none',
								  		title: '请输入正确的手机号码~!',
								  		duration: 3000
								  	})
								  	return
								  }
								    break;
								  case 1:
								  if(!emailRegex.test(this.email)){
									  uni.showToast({
									  	icon: 'none',
									  	title: '请输入正确的邮箱地址~!',
									  	duration: 3000
									  })
									  return
								  }
								    break;
								  default:
								}
				
				if (!password.test(this.password)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的密码~!',
						duration: 3000
					})
					return
				}
				this.loading = true
				await user.login(this.phone,this.email, this.password,this.ac).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
						if (this.radiovalue.includes('remember')) {
							if(this.navIndex==0){
								uni.setStorageSync('phoneNumber', {phone:this.phone,password:this.password});
							}else{
								uni.setStorageSync('emailNumber', {phone:this.email,password:this.password});
							}
						} else {
							if(this.navIndex==0){
								uni.removeStorageSync('phoneNumber');
							}else{
								uni.removeStorageSync('emailNumber');
							}
						}
						uni.setStorage({
							key: 'user_token',
							data: res.data.user_token
						})
						getApp().globalData.share.code = res.data.user_invite_code
						getApp().globalData.userToken = res.data.user_token
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}, 1500)
					}
				}).catch(e => {})
				this.loading = false
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 20px;
		background-color: $uni-bg-color;
	}

	.nav {
		display: flex;
		align-items: center;
	}

	.nav-tabs {
		margin-left:15px;
		width: 55%;
		margin-bottom: 40px;
		height: 50px;
		position: relative;
		z-index: 1;
	}

	.forgot {
		padding: 0 30px;
		font-weight: 400;
		color: #a7a8b0;
		text-align: right;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.5);
	}
	.reg-agreement {
	    margin-top: 30px;
	    font-size: 12px;
	    font-weight: 400;
	    color: #a7a8b0;
	    align-items: center;
	    justify-content: center;
	    uni-checkbox .uni-checkbox-input {
	      border-radius: 50%;
	    }
	    uni-navigator {
	      color: #DA2538;
	      display: inline-block;
	    }
	  }
</style>