<template>
	<view class="flex-col page">
		<!-- <image src="/static/common/img/loginBg.png" class="image" /> -->
		<view class="img-box">

		</view>
		<view class="login-box">
			<view class="tab-list">
				<view v-for="tab in tabList" :key="tab.id" class="tab-item"
					:class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)">
				  <text class="tab-text">{{tab.label}}</text>	
				</view>
			</view>
			<view class="flex-col group">
				<text class="text"></text>
				
				<view class="flex-col group_7">
					<view class="flex-col">
						<!-- <text class="text_1">手机号</text> -->
						<!-- @input="changeInput($event)" -->
						<!-- <u-input type="number" v-model="userName" placeholder="请输入手机号" class="view text-wrapper" /> -->
						<u-input type="number" v-model="userName"   placeholder="请输入手机号" class="view text-wrapper" maxlength="11"/>
					</view>
					<view class="error-tips" v-if="errorPhone"><image class="error-img" src="/static/common/img/infoCircle.png"></image> 请输入正确手机号</view>
					<view style="height: 0;width: 0;border: 0;padding: 0;margin: 0;overflow: hidden;">
						<u-input placeholder='' />
					</view>
					<view class="flex-col group_6">
						<!-- <text class="text_1">密码</text> -->
						<u-input type="password" v-model="passWord" placeholder="请输入密码" class="view text-wrapper" />
					</view>
					<!-- 密码必须包含字母、数字、特殊字符，且不能包含中文 -->
					<view class="error-tips" v-if="errorPwd"><image class="error-img" src="/static/common/img/infoCircle.png"></image> {{errormsg}}</view>

				</view>
				<navigator class="text_6" style="width: 100%; text-align: right;" url="/pages/login/ForgetPassword/ForgetPassword">忘记密码？</navigator>
				<u-button class="flex-col items-center text-wrapper_1" throttle-time='1000' type="primary" shape="circle"
					@click="login"><text class="text_7">登录</text></u-button>
				<view class="justify-center group_1">
					<text class="text_8">还没有账号？</text>
					<navigator class="text_9" url="/pages/login/register/register">立即注册</navigator>
				</view>
				<!-- <view class="flex-row group_2">
					<u-checkbox-group class="section_1" :size='34'>
						<u-checkbox v-model="agreement"> </u-checkbox>
					</u-checkbox-group>
					<view class="group_3">
						<text class="text_10">已阅读并同意</text>
						<text class="text_11">《用户服务协议》</text>
						<text class="text_12">＆</text>
						<text class="text_13">《用户隐私保护政策》</text>
					</view>
				</view> -->
			</view>
			
		</view>
		
		<u-top-tips ref="uTips" :navbar-height='0'></u-top-tips>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	import {
		toBaiduApi
	} from '@/utils/faceVerify.js'
	import {
		aesEncrypt
	} from '@/utils/encrypt.js'
	export default {
		data() {
			return {
				show: false,
				userName: "",
				passWord: "",
				agreement: true,
				tabList: [{
						id: 1,
						label: '密码登录'
					},
					{
						id: 2,
						label: '验证码登录'
					}
				],
				activeTab: 1,
				errorPhone: false,
				errorPwd: false,
				errormsg: "",
			};
		},
		onLoad(e) {},
		onHide(){
			this.userName= ""
			this.passWord= ""
		},
		onShow() {
			this.userName= ""
			this.passWord= ""
			setTimeout(() => {
				const lifeData = uni.getStorageSync('lifeData');
				if (lifeData.vuex_user && lifeData.vuex_token) {
					this.$u.api.getUser().then(res => {
						// if(!this.vuex_user.isCard){
						// 	uni.navigateTo({
						// 		url: '/pages/Face/index/index'
						// 	});
						// 	return
						// }
						uni.switchTab({
							url: '../../main/index/index'
						});
					})
				}
			}, 200)
		},
		methods: {
			changeInput(e){
				setTimeout(() => {
					this.userName = e.target.value
				}, 0);
			},
			onTab(id) {
				if(id == 1){
					this.activeTab = id
				}else{
					/* uni.showToast({
						title: '暂未开放',
						icon: 'none'
					}) */
					this.$refs.uToast.show({
						title: '暂未开放',
						type: "warning",
					});
				}
				
			},
			login() {
				// this.$u.vuex("vuex_msgList", '');
				// this.$u.vuex('vuex_user', '')
				// this.$u.vuex('vuex_token', '')
				// uni.clearStorage();
				if (!/^1[3-9]\d{9}$/.test(this.userName)) {
				// 校验手机号格式是否正确
				this.errorPhone = true;
				// return this.$tips("请输入正确的手机号", "error");
				return;
				} else {
				this.errorPhone = false;
				}
				// 校验密码格式先注释掉 因为重置密码的时候密码是1q2w3e
				// if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&.])[A-Za-z\d@$!%*?&.]{5,}$/.test(this.passWord)) {
				/* if (this.passWord.length < 6) {
				// 校验密码是否包含字母、数字、特殊字符，且长度至少为6
				this.errorPwd = true;
				// return this.$tips("密码必须包含字母、数字、特殊字符，且不能包含中文", "error");
				return;
				} else {
				this.errorPwd = false;
				} */
				/* if (!this.agreement) {
					return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
				} */
				if (this.passWord.length===0) {
					this.errorPwd = true;
					this.errormsg = "请输入密码";
					console.log("请输入密码");
					return
				}else if (this.passWord.length>0&&this.passWord.length < 6) {
					this.errorPwd = true;
					this.errormsg = "密码长度不能少于6位";
					console.log("密码长度不能少于6位");
					return
				}else{
					this.errorPwd = false;
					this.errormsg = "";
				}
				uni.showLoading({
					title: "登录中",
				});
				// 
				let data = {
					phone: this.userName,
					password: aesEncrypt(this.passWord),
				}
				this.$u.api.LoginApp(data).then((res) => {
					uni.hideLoading();
					if (!res.succeed && !res.token) {
						/* uni.showToast({
							title: res.error,
							duration: 2000,
							icon: 'none'
						}); */
						// this.$tips(res.error, "error");
						this.$refs.uToast.show({
							title: err.error,
							type: "error",
						});
						return
					}
					// this.$tips("登录成功", "success")
					this.$refs.uToast.show({
						title: "登录成功",
						type: "success",
					});
					/* uni.showToast({
						title: "登录成功",
						duration: 2000,
					}); */
					// 保存登录后得到的用户数据
					this.$u.vuex('vuex_user', res.user)
					this.$u.vuex('vuex_token', res.token)
					this.$u.vuex('vuex_glyType', res.glyType)
					// if(!res.user.isCard){
					// 	uni.navigateTo({
					// 		url: '/pages/Face/index/index'
					// 	});
					// 	return
					// }
					if (res.user.isFill) {
						uni.switchTab({
							url: '/pages/home/home/home'
						});
					} else {
						// uni.navigateTo({
						// 	// url: "../perfect/perfect",
						// 	url: "../roleSelection",
						// });

						// 没认证先前往人脸识别
						toBaiduApi(this);

						return
						// 这里先注释
						uni.navigateTo({
							url: "/pages/login/roleSelection?source=login",
						});
					}
				}).catch(err => {
					// this.$tips(err.error, "error");
					this.$refs.uToast.show({
						title: err.error,
						type: "error",
					});
					/* uni.showToast({
						title: err.error,
						icon: 'none'
					}) */
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 30rpx;
		background-color: rgb(255, 255, 255);
		overflow-y: auto;
		width: 100%;
		overflow-x: hidden;
		height: 100%;
		background: url(/static/common/img/loginBg.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top;

		.img-box {
			height: 420rpx;
		}

		.image {
			flex-shrink: 0;
			align-self: flex-start;
			width: 102%;
		}

		.group {
			background: #fff;
			padding: 20rpx 25rpx;
			width: calc(100% - 50rpx);
			margin: 0 auto;
			border-radius: 30rpx;

			.text {
				align-self: center;
				color: rgb(46, 155, 255);
				font-size: 32rpx;
				font-family: PingFang;
				line-height: 32rpx;
			}

			.group_7 {
				margin-top: 40rpx;

				.text-wrapper {
					border: solid 2rpx #dcdfe6;
					border-radius: 100rpx;
					background: #f6f8fa;
					
				}

				.group_6 {
					margin-top: 30rpx;
				}

				.text_1 {
					margin-left: 10rpx;
					align-self: flex-start;
					color: rgb(51, 51, 51);
					font-size: 32rpx;
					font-family: PingFang;
					line-height: 30rpx;
				}

				.view {
					margin-top: 20rpx;
					padding: 20rpx 50rpx !important;
				}
			}

			.text_6 {
				margin-left: 5rpx;
				margin-top: 50rpx;
				align-self: flex-start;
				// color: rgb(25, 140, 255);
				color:#1F2232;
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 28rpx;
			}

			.text-wrapper_1 {
				margin: 50rpx 0rpx 40rpx;
				padding: 50rpx 0 50rpx;
				// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
				background: #3cb4fb;
				box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
				border-radius: 100rpx;

				.text_7 {
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-family: PingFang;
					line-height: 30rpx;
				}
			}

			.group_1 {
				margin-top: 24rpx;

				.text_8 {
					color: #8697AC;
					font-size: 30rpx;
					font-family: PingFang;
					line-height: 26rpx;
				}

				.text_9 {
					margin-left: 0.035rem;
					color: #2E9CFE;
					font-size: 30rpx;
					font-family: PingFang;
					line-height: 26rpx;
				}
			}

			.group_2 {
				margin-top: 40rpx;
				justify-content: center;

				.section_1 {
					flex-shrink: 0;
					width: 34rpx;
				}

				.group_3 {
					margin-left: 24rpx;
					height: 24rpx;
					font-size: 0;

					.text_10 {
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-family: PingFang;
					}

					.text_11 {
						color: rgb(25, 140, 255);
						font-size: 24rpx;
						font-family: PingFang;
					}

					.text_12 {
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						font-family: PingFang;
					}

					.text_13 {
						color: rgb(25, 140, 255);
						font-size: 24rpx;
						font-family: PingFang;
					}
				}
			}
		}
	}
	.login-box{
		background: #fff;
		width: calc(100% - 50rpx);
		margin: 0 auto;
		border-radius: 30rpx;
		// height: calc(100% - 350rpx);
		overflow: hidden;
		padding-bottom:100rpx;
		
	}

	$tab-height: 52px;
	$active-color: #fff;
	$default-color: #90ecf1;
	$primary-color: #666;

	.tab-list {
		display: flex;
		position: relative;
		z-index: 2;
		border-radius: 30rpx 30rpx 0 0;
		background-color: $default-color;
		overflow: hidden; // 重点

		.tab-item {
			flex: 1;
			height: $tab-height;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			// opacity: 0.65;   // 暂时删除，不选中样式需要重新编写
			
			font-weight: 600;
			position: relative;
		}


		.tab-selected {
			color:#3cb5fb;
			opacity: 1;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			box-shadow: 48rpx 80rpx 0 $active-color, -34rpx 90rpx 0 0 $active-color; // 重点
			.tab-text::after{
				content: '';
				position: absolute;
				left: 160rpx;
				bottom: 10rpx;
				width: 32rpx;
				height: 8rpx;
				background: #3CB5FB;
				border-radius: 20rpx;
			}
		}

		.tab-selected::before {
			content: '';
			position: absolute;
			left: -12rpx;
			bottom: 0;
			width: 24rpx;
			height: $tab-height;
			border-top-left-radius: 48rpx;
			background-color: $active-color;
			transform: skewX(-15deg); // 重点
		}

		.tab-selected::after {
			content: '';
			position: absolute;
			right: -12rpx;
			bottom: 0;
			width: 24rpx;
			height: $tab-height;
			border-top-right-radius: 24rpx;
			background-color: $active-color;
			transform: skewX(15deg); // 重点
		}
		.not-selected {
			color: $primary-color;
		}

		.not-selected::before {
			content: '';
			position: absolute;
			left: 12rpx;
			bottom: 0;
			width: 24rpx;
			height: $tab-height;
			background: $default-color;
			border-bottom-left-radius: 24rpx;
			transform: skewX(15deg); // 重点
		}

		.not-selected::after {
			content: '';
			position: absolute;
			right: 12rpx;
			bottom: 0;
			width: 24rpx;
			height: $tab-height;
			background: $default-color;
			border-bottom-right-radius: 24rpx;
			transform: skewX(-15deg); // 重点
			z-index: -1;
		}
	}
	.error-tips{
		font-size: 24rpx;
		color: #EF3920;	
		display: flex;
		text-align: center;
		margin-top: 10rpx;
		// padding-left: 30rpx;
		.error-img{
			width: 32rpx;
			height: 32rpx;
			margin-right: 5rpx;
		}

	}
</style>