<!-- 账号密码登录页 -->
<template>
	<view class="" style="position: relative;">
		<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" v-if="0">
				<uni-data-select :clear="false"
				      v-model="value"
				      :localdata="range"
				      @change="changeType"
				    ></uni-data-select>
			</view>
		</view>
		<text class="title-box">欢迎登陆顶呱刮</text>
		<view class="content-A">
			<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>
		<!-- <view v-if="this.userType=='user'"
		 style="width: 100vw;text-align: center;color: #dcdcdc;font-size: 14px;
		 line-height: 28px;position: fixed;top: calc(100vh - 100px);left:0px;">
			温馨提示：<br/>
			忘记密码，请联系平台
		</view> -->
		<view v-if="this.userType=='user'" 
		style="width: 100vw;text-align: center;color: #dcdcdc;font-size: 14px; line-height: 28px;position: absolute;bottom: -34vh;">
			温馨提示：<br/>
			忘记密码，请联系平台
		</view>
	</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'
	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;
			}
			// 打开应用时查一下是否登录过，登录过就跳转，
			// 跳转到相应的页面请求时，会查询token是否过期，过期会清除并且跳转登录页
			if(uni.getStorageSync('user_token')){
				let newUrl = '';
				switch (uni.getStorageSync('userType')){
					case 'user':
						newUrl = '/pages/home/home';
					break;
					case 'agent':
						newUrl = '/pages/list/team';
					break;
					case 'background':
						newUrl = '/pages/home/home';
					break;
				}
				uni.switchTab({
					url:newUrl
				})
			}
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		methods: {
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.username.length) {
					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
					});
				}
				
				let url = '/passport/mixedLogin', newUrl = '';
				let data = {account_number: this.username, password: this.password, captcha: ''};
				
				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);
					switch (res.data.type){
						case 3:
							newUrl = '/pages/home/home';
							this.userType = 'user';
						break;
						case 2:
							newUrl = '/pages/home/home';
							// newUrl = '/pages/list/team';
							this.userType = 'agent';
						break;
						case 1:
							newUrl = '/pages/home/home';
							this.userType = 'background';
						break;
					}
					uni.setStorageSync('userType', this.userType);
					
					setTimeout(()=>{
						uni.switchTab({
							url:newUrl
						})
					}, 1500)
				}, fail=>{}, false)
				
			},
			/* 前往注册 */
			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);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area{
		background-color: #fff;
		width: 750rpx;
		/*  #ifdef H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef APP-PLUS  */
		height: 108rpx;
		/*  #endif  */
		padding-top: var(--status-bar-height);
	}
	.logo_area{
		width: 270px;
		height: 50px;
		margin: 4px auto;
		position: relative;
		
		image{
			width: 50px;
			height: 47px;
		}
	}
	.title-box{
		font-size: 26px;
		color: #444;
		margin: 0px auto 20px;
		display: flex;
		width: 270px;
		padding: 18px 0;
		font-weight: 800;
		flex-direction: column;
	}

	.content-A{
		width: 270px;
		margin: 0px auto;
	}
	/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>
