<!-- 账号密码登录页 -->
<template>
	<view class="uni-content" style="padding: 0px 53px;">
		<view class="nav_area"></view>
		<view class="logo_area">
			<image src="../../../../static/home/logo.png" mode=""></image>
			<!-- <view class="close" @click="backPrev()"></view> -->
			<view class="selece_box">
				<uni-data-select :clear="false"
				      v-model="value"
				      :localdata="range"
				      @change="changeType"
				    ></uni-data-select>
			</view>
		</view>
		<text class="title title-box">欢迎登陆顶呱刮</text>
		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="username" placeholder="请输入手机号/账号" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
		<!-- 带选择框的隐私政策协议组件 -->
		<!-- <uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements> -->
		<button class="uni-btn login-btn" type="primary" @click="pwdLogin">登录</button>
		<!-- 忘记密码 -->
		<view class="link-box" v-if="this.userType=='user'">
			<view v-if="!config.isAdmin">
				<!-- <text class="forget" @click="toRetrievePwd">忘记密码</text> -->
				<!-- <text class="link">找回密码</text> -->
			</view>
			<text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '新注册'}}</text>
			<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
		</view>
		<view v-if="this.userType=='user'" style="width: 100vw;text-align: center;color: #dcdcdc;font-size: 14px;line-height: 28px;position: fixed;bottom: 50px;left:0px">
			温馨提示：<br/>
			忘记密码，请联系平台
		</view>
		<!-- 悬浮登录方式组件 -->
		<!-- <uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login> -->
	</view>
</template>

<script>
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	import API from '@/common/js/api.js'
	import updateTabBar from '@/common/js/updateTabBar.js'
	// const uniIdCo = uniCloud.importObject("uni-id-co", {
	// 	errorOptions: {
	// 		type: 'toast'
	// 	}
	// })
	export default {
		mixins: [mixin],
		data() {
			return {
				"password": "",
				"username": uni.getStorageSync('accounts')[0] || '',
				"captcha": "",
				"needCaptcha": false,
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/logo.png",
				userType: 'user',//user|agent|background
				value: 0,
				range: [
					{ value: 0, text: "用户登录" },
					{ value: 1, text: "代理登录" },
					{ value: 2, text: "后台登录" },
				],
			}
		},
		onLoad(e) {
			if(e.phone){
				this.username = e.phone;
			}
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		methods: {
			// 页面跳转，找回密码
			toRetrievePwd() {
				let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
				//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
				if (/^1\d{10}$/.test(this.username)) {
					url += `?phoneNumber=${this.username}`
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						title: '请输入手机号/账号',
						icon: 'none',
						duration: 3000
					});
				}
				// if (!/^1\d{10}$/.test(this.username)) {
				// 	this.focusUsername = true
				// 	return uni.showToast({
				// 		title: '请输入正确格式的手机号',
				// 		icon: 'none',
				// 		duration: 3000
				// 	});
				// }
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 3000
					});
				}
				// if (this.needCaptcha && this.captcha.length != 4) {
				// 	this.$refs.captcha.getImageCaptcha()
				// 	return uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none',
				// 		duration: 3000
				// 	});
				// }

				// if (this.needAgreements && !this.agree) {
				// 	return this.$refs.agreements.popup(this.pwdLogin)
				// }

				// if (/^1\d{10}$/.test(this.username)) {
				// 	data.mobile = this.username
				// } else if (/@/.test(this.username)) {
				// 	data.email = this.username
				// } else {
				// 	data.username = this.username
				// }
				let url = '', newUrl = '';
				let data = {};
				switch (this.userType){
					case 'user':
						url = '/passport/login';
						data = {phone: this.username, password: this.password};
						newUrl = '/pages/home/home';
					break;
					case 'agent':
						url = '/passport/agentLogin';
						data = {phone: this.username, password: this.password};
						newUrl = '/pages/list/team';
					break;
					case 'background':
						url = '/passport/adminLogin';
						data = {account_number: this.username, password: this.password};
						newUrl = '/pages/home/home';
						
					break;
				}
				
				API.request(url, data, res=>{
					uni.showToast({
						title: res.msg
					})
					
					let accounts = uni.getStorageSync('accounts') || [];
					accounts.push(this.username);
					accounts = Array.from(new Set(accounts));
					uni.setStorageSync('accounts', accounts);
					
					uni.setStorageSync('user_token', res.data.token);
					uni.setStorageSync('userType', this.userType);
					
					setTimeout(()=>{
						uni.switchTab({
							url:newUrl
						})
					}, 1500)
				}, fail=>{}, false)
				
				

				// uniIdCo.login(data).then(e => {
				// 	this.loginSuccess(e)
				// }).catch(e => {
				// 	if (e.errCode == 'uni-id-captcha-required') {
				// 		this.needCaptcha = true
				// 	} else if (this.needCaptcha) {
				// 		//登录失败，自动重新获取验证码
				// 		this.$refs.captcha.getImageCaptcha()
				// 	}
				// })
			},
			/* 前往注册 */
			toRegister() {
				uni.navigateTo({
					url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
						'/uni_modules/uni-id-pages/pages/register/register',
					fail(e) {
						console.error(e);
					}
				})
			},
			backPrev(){
				uni.navigateBack({
					delta: 1
				})
			},
			changeType(e){
				// console.log(e);
				switch (e){
					case 0:
					this.userType = 'user';
					break;
					case 1:
					this.userType = 'agent';
					break;
					case 2:
					this.userType = 'background';
					break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			height: 600px;
		}
	}

	.nav_area{
		background-color: #fff;
		width: 750rpx;
		height: 88rpx;
		padding-top: var(--status-bar-height);
	}
	.logo_area{
		width: 269px;
		height: 50px;
		margin: 4px auto;
		position: relative;
		
		image{
			width: 50px;
			height: 47px;
		}
		
		.close{
			width: 24px;
			height: 24px;
			position: absolute;
			top: 0px;
			right: -24px;
			background-image: url("../../../../static/home/close2.png");
			background-size: contain;
		}
		.selece_box{
			width: 200rpx;
			height: 60rpx;
			position: absolute;
			top: -10px;
			right: -24px;
			
			
			/deep/ .uni-select__input-text{
				color: #999;
			}
		}
	}
	.title-box{
		font-size: 26px;
		color: #444;
		margin-bottom: 20px;
	}
	.uni-content /deep/ .uni-easyinput__content{
		background-color: #fff !important;
		border-bottom: 1px solid #ebebeb;
		font-size: 16px !important;
	}
	.uni-easyinput__placeholder-class{
		font-size: 16px;
		color: #cecece;
	}
	/deep/ .uni-easyinput__content-input{
		padding-left: 0px !important;
		// flex: 0.45;
	}
	/deep/ .content-clear-icon{
		// flex: 1;
	}
	.login-btn{
		border-radius: 10px;
	}
	.forget {
		font-size: 14px;
		color: #999;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 14px;
		color: #444;
	}
</style>
