<script setup>
import { ref,nextTick } from 'vue'
import { userLogin , departInterence } from '@/api/api.js'
import md5 from '@/utils/md5.js'
import http from '@/api/http'
import { useLoginSuccess,useLogin } from '@/hooks/login/use-login'
import EmailModel from "./login_manage/EmailModel.vue"
// import ForgetPassModel from "./login_manage/ForgetPassModel.vue"
import MobileModel from "./login_manage/MobileModel.vue"
import OrdinaryModel from "./login_manage/OrdinaryModel.vue"

const { isMobile } = useLogin();

const activeModel = ref('ordinaryModel')

//区号
const areaCode = ref([])
function getPhoneCode(){
	departInterence.getPhoneAreaCode().then(res=>{
		if(res.Ret!==200) return 
		areaCode.value = res.Data||[]
	})
}
getPhoneCode()


//切换登录方式
function handleClick(tab) {
	if(tab.name==='ordinaryModel'){
		nextTick(()=>{
			getRememberedInfo()
		})
	}
}
function changeModel(model){
	activeModel.value = model
	if(model!=='forgetPassModel'){
		nextTick(()=>{
			getRememberedInfo()
		})
	}
}

//获取用户记住的账号密码 如果有
function getRememberedInfo(){
	const timeKey = localStorage.getItem("timeKey")
	if(timeKey&&checkTimeKey(Number(timeKey))){
		let userAccount = localStorage.getItem("account") || null;
		let userCheckPass = localStorage.getItem("checkPass") || null;
		if (userAccount) {
			ordinaryModel.value.form = {
				account:new http.Base64().decode(userAccount),
				checkPass:new http.Base64().decode(userCheckPass),
				checked:true
			}
		}
	}
}
//判断timeKey有没有过期，目前设定的是60天，也就是5184000秒
function checkTimeKey(timeKey){
	const nowKey = Date.now()
	return Math.floor((nowKey-timeKey)/1000)<5184000
}


const logining = ref(false)
const ordinaryModel = ref(null);
const mobileModel = ref(null);
const emailModel = ref(null);
//登录
async function handleLogin() {
		const apiMap = {
			'ordinaryModel': ordinaryModelLogin,
			'mobileModel': mobileModelLogin,
			'emailModel': emailModelLogin
		}
		apiMap[activeModel.value]()
}
//账号登录
async function ordinaryModelLogin() {
	await ordinaryModel.value.validate()

	logining.value = true;
	const { account,checkPass,checked } = ordinaryModel.value.form
	const res = await departInterence.userLogin({
		LoginType:1,
		Username:account,
		Password:md5.hex_md5(checkPass)
	})

	logining.value = false

	//账号异常 将accountCheck置为true
	if(res.Ret===4011){
		ordinaryModel.value.hintMessage="账号异常，请通过验证登录"
		// this.$nextTick(()=>{
		// 	this.$refs[this.checkActiveModel].getCodePic()
		// })
	}

	//账号密码错误 将loginCheck置为true
	if(res.Ret===4012){
		// this.loginCheck = true
		ordinaryModel.value.hintMessage="账号或密码错误"
	}
	if(res.Ret!==200) return

	ordinaryModel.value.hintMessage=""

	//登录成功，若设置了保存密码，在localStorage内存储一个时间戳
	if(checked){
		localStorage.setItem('timeKey',Date.now());
		localStorage.setItem("account", new http.Base64().encode(account));
		localStorage.setItem("checkPass", new http.Base64().encode(checkPass));
	}else {
		localStorage.removeItem('timeKey')
		localStorage.removeItem("account");
		localStorage.removeItem("checkPass");
	}

	useLoginSuccess(res)
}
//手机号登录
async function mobileModelLogin(el='mobileModel') {
	el === 'checkMobileModel' ? await checkMobileModel.value.validate() : await mobileModel.value.validate()
	el === 'checkMobileModel' ? checkLogining.value = true : logining.value = true;

	const {mobile,checkCode} = el === 'checkMobileModel' ? checkMobileModel.value.form : mobileModel.value.form
	const res = await departInterence.userLogin({
		LoginType:2,
		Mobile:mobile,
		VerifyCode:checkCode
	})

	el === 'checkMobileModel' ? checkLogining.value = false : logining.value = false
	if(res.Ret!==200){
		//刷新图形验证码
		if(el === 'checkMobileModel') {
			checkMobileModel.value.getCodePic()
			checkMobileModel.value.form.picCode = ''
		}else {
			mobileModel.value.getCodePic()
			mobileModel.value.form.picCode = ''
		}

		return
	}

	useLoginSuccess(res)
}
//邮箱登录
async function emailModelLogin(el='emailModel') {
	el === 'checkEmailModel' ? await checkEmailModel.value.validate() : await emailModel.value.validate()
	el === 'checkEmailModel' ? checkLogining.value = true : logining.value = true ;

	const {email,checkCode} = el === 'checkEmailModel' ? checkEmailModel.value.form : emailModel.value.form
	const res =	await	departInterence.userLogin({
		LoginType:3,
		Email:email,
		VerifyCode:checkCode
	})

	el === 'checkEmailModel' ? checkLogining.value = false :	logining.value = false
	if(res.Ret!==200){
		//刷新图形验证码
		if(el === 'checkEmailModel') {
			checkEmailModel.value.getCodePic()
			checkEmailModel.value.form.picCode = ''
		}else {
			emailModel.value.getCodePic()
			emailModel.value.form.picCode = ''
		}
		return
	}
	useLoginSuccess(res)
}

/* 验证弹窗 */
const isCheckDialogShow = ref(false)
const checkLogining = ref(false)
const checkActiveModel = ref('checkMobileModel')
const checkMobileModel = ref(null)
const checkEmailModel = ref(null)
function submitCheck() {
	checkActiveModel.value === 'checkMobileModel' 
		? mobileModelLogin('checkMobileModel')
		: emailModelLogin('checkEmailModel')
}


</script>
<template>
  <div id="login">
		<div id="login_wrapper" v-if="!isMobile">
			<img class="login-bg" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_bg.png" alt />
			<img class="login-icon" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" alt />
		
			<div class="login-box" id="login-container" v-if="activeModel!=='forgetPassModel'">
				<div class="fixed-login-wrapper">

				<h1 style="font-size: 38px;text-align: center;color: #333;margin-bottom: 30px;">
					运营管理系统
				</h1>
				<el-tabs v-model="activeModel">

					<OrdinaryModel 
						ref="ordinaryModel"
						@changeModel="changeModel('forgetPassModel')"
						v-if="activeModel=='ordinaryModel'"
					/>

					<MobileModel 
							ref="mobileModel"
							:areaCode="areaCode"
							v-else-if="activeModel=='mobileModel'"
					/>

					<EmailModel 
						ref="emailModel" 
						v-else-if="activeModel=='emailModel'"
					/>
				</el-tabs>
				<el-button
					type="primary"
					@click="handleLogin"
					:loading="logining"
					class="submit_btn"
					>登录</el-button>
					<div class="another-login-type">
						<div class="another-type-hint">
							<div class="type-hint-line"></div>
							<div class="type-hint-text">其他登录方式</div>
							<div class="type-hint-line"></div>
						</div>
						<div class="another-type">
							<div class="login-type-box">
								<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
								v-show="activeModel!=='ordinaryModel'">
									<img src="~@/assets/img/icons/account-login-type.png">
									<span>账号登录</span>
								</div>
								<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
								v-show="activeModel!=='mobileModel'">
									<img src="~@/assets/img/icons/phone-login-type.png">
									<span>手机号登录</span>
								</div>
								<div class="login-type-item" v-show="activeModel!=='emailModel'" 
								@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
									<img src="~@/assets/img/icons/email-login-type.png">
									<span>邮箱登录</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-box" v-else>
				<div class="fixed-login-wrapper">
					<!-- <ForgetPassModel 
						ref="forgetPassModel"
						:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
						@changeModel="changeModel('ordinaryModel')"
					/> -->
				</div>	
			</div>
		</div>

		<!-- 移动端的登录页面跟移动ETA的一模一样 单独整一份 -->
		<div id="login_wrapper_mobile" v-else>
			<template v-if="activeModel!=='forgetPassModel'">
				<div class="login-logo">
					<img src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" >
				</div>
				<div class="login-title">sign in to continue</div>
					<OrdinaryModel 
						ref="ordinaryModelMobile"
						@changeModel="changeModel('forgetPassModel')"
						v-if="activeModel=='ordinaryModel'"
					/>
					<MobileModel 
						ref="mobileModelMobile"
						:areaCode="areaCode"
						v-else-if="activeModel=='mobileModel'"
					/>
					<EmailModel 
						ref="emailModelMobile" 
						v-else-if="activeModel=='emailModel'" 
					/>

				<el-button type="primary" @click="handleLogin" 
				:loading="logining" class="submit_btn_mobile">登录</el-button>
				<div class="login-type-box">
					<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
					v-show="activeModel!=='ordinaryModel'">
						<img src="~@/assets/img/icons/account-login-type.png">
						<span>账号密码登录</span>
					</div>
					<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
					v-show="activeModel!=='mobileModel'">
						<img src="~@/assets/img/icons/phone-login-type.png">
						<span>手机号登录</span>
					</div>
					<div class="login-type-item" v-show="activeModel!=='emailModel'" 
					@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
						<img src="~@/assets/img/icons/email-login-type.png">
						<span>邮箱登录</span>
					</div>
				</div>
			</template>
			<div class="login-box" v-else>
				<!-- 忘记密码就不重新搞了，太麻烦了，就写一起吧 -->
				<!-- <ForgetPassModel 
					ref="forgetPassModelMobile"
					:isMobile="isMobile" 
					:autoAccount="$refs.ordinaryModelMobile?$refs.ordinaryModelMobile.form.account:''"
					@changeModel="changeModel('ordinaryModel')"/> -->
			</div>
		</div>

		<!-- 验证弹窗 -->
		<el-dialog
			class="check-dialog"
			v-model="isCheckDialogShow"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			width="30%"
			@close="isCheckDialogShow = false"
			>
			<el-tabs v-model="checkActiveModel" @tab-click="handleClick">
				<el-tab-pane label="手机号验证" name="checkMobileModel">
						<MobileModel ref="checkMobileModel"
							:areaCode="areaCode"
							v-if="checkActiveModel==='checkMobileModel'"
						/>
					</el-tab-pane>
					<el-tab-pane label="邮箱验证" name="checkEmailModel">
						<EmailModel ref="checkEmailModel" v-if="checkActiveModel==='checkEmailModel'"/>
					</el-tab-pane>
			</el-tabs>
			<span class="dialog-footer">
				<el-button 
					type="primary" 
					:loading="checkLogining"
					@click="submitCheck">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<style lang="scss">
#login{
	.el-tabs__nav {
		width: 100%;
		display: flex;
	}
	.el-tabs__item{
		font-size: 18px;
		flex: 1;
		text-align: center;
	}
	.check-dialog{
		.el-dialog{
			border-radius: 8px;
			.el-dialog__header{
				background-color: transparent;
				.el-dialog__headerbtn>i{
					color: #C0C4CC;
				}
			}
			.el-input{
				width:100%;
			}
			.el-dialog__footer{
				text-align: center;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
#login {
	width: 100%;
	height: 100%;
	background: #fff;
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	#login_wrapper {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		position: relative;
		.login-bg {
			position: absolute;
			top: 50px;
			left: 50px;
			height: calc(100% - 100px);
			max-width: 50%;
		}

		.login-icon {
			position: absolute;
			top: 44px;
			right: 40px;
		}

		.login-r-b {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 8%;
		}

	}
	#login-container,.login-box{
		width: 31%;
		
		box-sizing: border-box;
		border-radius: 10px;
		position: absolute;
		top: 18%;
		right: 14%;
		z-index: 100;
		font-size: 30px;
		.fixed-login-wrapper {
			width: 460px;
			margin: 0 auto;
		}
		input::-webkit-input-placeholder {
			color: #595959 !important;
		}
		.remember {
			margin: 0px 0 20px;
		}
		.submit_btn {
			width: 100%;
			height: 50px;
			background: #007eff;
			font-size: 16px;
			border-radius: 5px;
			// margin-top: 30px;
		}
		.el-input input {
			width: 100%;
			height: 40px;
			color: #333333;
			font-size: 16px;
		}
		.el-input-group__append,
		.el-input-group__prepend {
			background-color: rgba(255, 255, 255, 0.8);
			color: rgb(51, 51, 51);
			border: none;
		}
		.el-input.el-input-group.el-input-group--prepend input {
			background-color: rgba(255, 255, 255, 0.8);
			color: rgb(51, 51, 51);
			border: none;
		}
		.el-checkbox__label {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}
		.el-checkbox__input.is-checked + .el-checkbox__label {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}
		.el-form-item__content .el-input-group,
		.el-form-item__label,
		.el-tag .el-icon-close {
			padding-bottom: 5px;
			vertical-align: middle;
			border-bottom: 1px solid #eaeaea;
		}
		.el-button--primary {
			background: #007eff !important;
			border: none;
		}
		.el-form-item__content {
			padding-bottom: 5px;
		}
		.el-form-item {
			margin-bottom: 30px;
		}

		.another-login-type{
			margin-top: 45px;
			.another-type-hint{
				display: flex;
				align-items: center;
				.type-hint-line{
					flex: 1;
					height: 1px;
					background-color: #C0C4CC;
				}
				.type-hint-text{
					font-size: 18px;
					color: #999999;
					padding: 0 20px;
				}
			}
			.another-type{
				.login-type-box {
					display: flex;
					justify-content: center;
					gap: 10%;
				}
				.login-type-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 20px;
					cursor: pointer;
					img{
						height: 40px;
						width: 40px;
						margin-bottom: 4px;
					}
					span{
						font-size: 16px;
						color: #666666;
					}
				}
			}
		}
	}
	@media screen and (max-width:1201px) {
		.login-bg { display: none; }
		#login-container ,.login-box{
				width: 70%;
				top:15%;
				left: 50%;
				transform: translateX(-50%);
			}
	}
	@media screen and (max-width:650px) {
		#login_wrapper_mobile{
			// display: block;
			padding: 15% 40px 20px;
			.login-logo{
				margin-bottom: 30px;
				img{
					width: 250px;
				}
			}
			.login-title{
				font-size: 14px;
				color: #999999;
			}
			.submit_btn_mobile{
				height: 44px;
				width: 100%;
				border-radius: 44px;
			}
			.login-type-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 54%;
				margin: 0 auto;
				.login-type-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 50px;
					img{
						height: 40px;
						width: 40px;
						margin-bottom: 4px;
					}
					span{
						font-size: 12px;
						color: #666666;
					}
				}
			}
		}
	}
}
</style>
