<template>
  <view class="background">
	<!-- 欢迎 -->
	<image class="welcome" src="../../../static/login/account_login/welcome.png"></image>
	<!-- 登录部分 -->
	<view class="login_part">
		<!-- 导航栏 -->
		<view class="login_ways">
<!--      -->
			<view class="account_words" @click="toPassageEvent" 
				:style="{borderBottomColor:passageWordsBottomColor, borderBottom:passageWordsBottomBorder}">
				密码登录
			</view>
			<view class="captcha_words" @click="toCaptchaEvent" 
				:style="{borderBottomColor:captchaWordsBottomColor, borderBottom:captchaWordsBottomBorder}">
				验证码登录
			</view>
		</view>
		<!-- 表单部分 -->
		<form class="login_form">
			<view class="form_input">
				<view class="account_box login_form_item">
					<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
				</view>
				<!-- 密码登录 -->
				<view class="passage_box login_form_item" v-if="isPassagePage">
					<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
					<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
				</view>
				<view class="captcha_box login_form_item" v-else>
					<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
					<button class="captcha_button" @click="sendCaptchaEvent" 
						:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
						{{captchaButtonText}}
					</button>
				</view>
				<view class="forget_passage">忘了密码？</view>
				<view class="button_box login_form_item">
					<button name="submit_button" class="login_button">登录</button>
				</view>
			</view>
		</form>
	</view>
	<!-- 前往注册 -->
	<navigator url="/pages/login/register/register">
		<image class="goto_register" src="../../../static/login/account_login/register.png"></image>
	</navigator>
	<!-- 其他登录部分 -->
	<view class="otherways_part">
		<image class="otherways_tips" src="../../../static/login/account_login/other_ways.png"></image>
		<view class="two_ways">
			<image class="qq_icon" src="../../../static/login/account_login/qq_icon.png"></image>
			<image class="weixin_icon" src="../../../static/login/account_login/weixin_icon.png"></image>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const isSendCaptcha = ref(false);	//是否发送了验证码的标志
var codeTime = ref(0);	//验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")

const isPassagePage = ref(true);	//是否是密码登录页的标志；
const passageWordsBottomBorder = computed(() => isPassagePage.value? "solid":"none");	//密码登录导航的下边框
const passageWordsBottomColor = computed(() => isPassagePage.value? "#094ABC":"#ffffff");//密码登录导航的下边框颜色
const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"solid");	//验证码登录导航的下边框
const captchaWordsBottomColor = computed(() => isPassagePage.value? "#ffffff":"#094ABC");//验证码登录导航的下边框颜色
const isOpened = ref(true);	//密码是否明文显示的标志
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");


//进入验证码登录页面
function toCaptchaEvent(){
	isPassagePage.value = false;
}
//发送验证码事件
function sendCaptchaEvent(){
	console.log("send captcha");
	if (codeTime.value>0){	//说明在倒计时
		uni.showToast({	//弹出提示框
			title: '不能重复获取',
			icon:"none"
		});
	} else{	//说明没有发送，也没倒计时
		codeTime.value = 60;
		isSendCaptcha.value = true;
		var timer = setInterval(()=>{
			codeTime.value--;
			if(codeTime.value<1){
				clearInterval(timer);
				isSendCaptcha.value = false;
				codeTime.value = 0;
			}
		},1000)
	};
}

//进入密码登录页面
function toPassageEvent(){
	isPassagePage.value = true;
}
// 判断密码是否要明文显示
function openEyesEvent()
{
	if (isOpened.value)
	 {
		 isOpened.value = false;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/openedeyes.png"
	 }
	else
	 {
		 isOpened.value =true;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/closedeyes.png";
	 }
}

</script>

<style lang="scss">
.background{
	background-image: url("../../../static/login/account_login/background.png");
	background-size: cover;
	background-position: center;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	object-fit: contain;
	.welcome{
		position: absolute;
		width: 62%;
		height: 19%;
		top: 20%;
		object-fit: contain;
	}
	.login_part{
		/* 登录 */
		position: absolute;
		width: 76%;
		height: 30%;
		top: 41%;
		// left: calc(50% - 314px/2 + 3px);
		.login_ways{
			position: absolute;
			width: 49%;
			height: 8.1%;
			display: flex;
			.account_words{
				// width:36.1%;
				// height: 90%;
				margin-right: 10%;
				border-bottom: solid medium #094ABC;
				/* 密码登录 */
				width: 56px;
				height: 24px;
				/* Body */
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 24px;
				/* identical to box height, or 171% */
				display: flex;
				align-items: center;
				color: #000364;
				/* Inside auto layout */
				flex: none;
				order: 0;
				flex-grow: 0;
			}
			.captcha_words{
				// width:45.2%;
				// height: 90%;
				margin-left: 5%;
				/* 验证码登录 */
				width: 70px;
				height: 24px;
				/* Body */
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 24px;
				/* identical to box height, or 171% */
				display: flex;
				align-items: center;
				color: #000364;
				/* Inside auto layout */
				flex: none;
				order: 1;
				flex-grow: 0;
			}
		}
		.login_form{
			position: absolute;
			width: 97.8%;
			height: 73.1%;
			top: 20%;
			.form_input{
				position: absolute;
				width: 100%;
				height: 100%;
				.login_form_item{
					height: 25%;
					margin-bottom: 10px;
				}
				.account_box{
					padding-left: 10px;
					background-color: #D5E9FF;
					border-radius: 12px;
					.account{
						height: 100%;
						padding-left: 30px;
						background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
						background-repeat: no-repeat;
						background-size: 4%;
						background-position: 8px 50%;
					}
				}
				.passage_box{
					display: flex;
					justify-content: space-around;
					align-items: center;
					background-color: #D5E9FF;
					border-radius: 12px;
					.passage{
						height: 100%;
						padding-left: 22px;
						background-image: url("../../../static/login/account_login/login_part/lock_icon.png");
						background-repeat: no-repeat;
						background-size: 6%;
						background-position: 0px 50%;
					}
					.eyes{
						/* User Interface / No Preview */
						width: 20px;
						height: 20px;
						/* Inside auto layout */
						flex: none;
						order: 3;
						flex-grow: 0;
					}
				}
				.captcha_box{
					display: flex;
					justify-content: space-around;
					align-items: center;
					background-color: #D5E9FF;
					border-radius: 12px;
					.captcha{
						height: 100%;
						padding-left: 40px;
						background-image: url("../../../static/login/account_login/login_part/captcha_icon.png");
						background-repeat: no-repeat;
						background-size: 7%;
						background-position: 16px 50%;
					}
					.captcha_button{
						/* 发送验证码 */
						width: 108px;
						height: 34px;
						/* Inside auto layout */
						flex: none;
						order: 3;
						flex-grow: 0;
						
						border-radius: 15px;
						font-size: 14px;
						color: #000364;
					}
				}
				.forget_passage{
					margin-bottom: 5px;
					margin-top: 10px;
					text-align: right;
					color: #000364;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 24px;
				}
				.login_button{
					height: 100%;
					border-radius: 12px;
					background-color: #4A69F7;
					color: #FFFCFC;
					text-align: center;
				}
			}
		}
	}
	.goto_register{
		position: absolute;
		width: 14%;
		height: 2%;
		top: 78%;
		left: 43%;
		object-fit: contain;
		// left: calc(50% - 56.5px/2 + 0.25px);
	}
	.otherways_part{
		position: absolute;
		width: 59%;
		height: 10.9%;
		// left: calc(50% - 243.25px/2 - 0.38px);
		top: 82%;
		.otherways_tips{
			position: absolute;
			width: 98.6%;
			height: 24%;
		// 	left: calc(50% - 243.25px/2 - 0.38px);
			top: 0%;
		}
		.two_ways{
			/* 图标 */
			position: absolute;
			width: 46.9%;
			height: 50%;
			left: 26.6%;
			top: 35%;
			display: flex;
			justify-content: center;
			align-items: center;
			.qq_icon{
				/* qq图标 */
				position: absolute;
				width: 43.9%;
				height: 88%;
				left: 0%;
				// background: url(image.png);
			}
			.weixin_icon{
				/* 微信图标 */
				position: absolute;
				width: 40%;
				height: 89%;
				left: 50%;
				// background: url(image.png);
			}
		}
	}
}
</style>
