<template>
	<div class="login_bg">
		<div class="login-banner"></div>
		<div class="login-header"></div>
		<div class="flex-1">
			<div class="login-main">
				<div class="flex-1" style="height: 600px;">

				</div>
				<div class="login-form">
					<div class="form-container">
						<div class="login-for">
							<div class="tab-menu">
								<div :class="tabMenu==1?'tab-item active':'tab-item'" @click="menuType(1)">欢迎登录{{ baseData.title?baseData.title:$CONFIG.APP_NAME }}</div>
							</div>
							<phoneForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==2"></phoneForm>
							<passwordForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==1"></passwordForm>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="login-footer">{{ baseData.copyright }} <span v-html="baseData.miitbeian"></span> <span v-html="baseData.beian"></span></div>
	</div>
</template>

<script>
import passwordForm from './components/passwd'
import phoneForm from './components/mobile'
export default {
	components: {
		passwordForm,
		phoneForm
	},
	data() {
		return {
			form: {},
			islogin: false,
			isShow: false,
			code: null,
			baseData: {},
			captcha: {},
			loginType:"zh",
			tabMenu:1
		}
	},
	created: function () {
		this.$TOOL.cookie.remove("TOKEN")
		this.$TOOL.data.remove("USER_INFO")
		this.$TOOL.data.remove("MENU")
		this.$TOOL.data.remove("PERMISSIONS")
		this.$TOOL.data.remove("DASHBOARDGRID")
		this.$TOOL.data.remove("grid")
		this.$store.commit("clearViewTags")
		this.$store.commit("clearKeepLive")
		this.$store.commit("clearIframeList")
		this.getService();
	},
	methods: {
		menuType(type){
			this.tabMenu = type;
		},
		loginChange(){
			if (this.loginType == 'fs')
			{
				this.loginType = 'zh';
			} else {
				this.loginType = 'fs';
			}
		},
		handleSuccess(){
			this.islogin = true;
		},
		async getService() {
			var resp = await this.$API.auth.data.get();
			if (resp.code == 0) {
				return this.$message.warning(resp.msg)
			}
			this.$TOOL.data.set("SERVICE", resp.data.service)
			this.baseData = resp.data.service;
			this.captcha = resp.data.captcha;
		},
	}
}
</script>

<style scoped>
.login_bg{position:relative;background-color: rgb(242, 246, 255);display: flex;flex-direction: column;overflow: hidden;height: 100vh;}
.login-banner{position:absolute;top:50%;left:50%;width:1440px;z-index:1;transform:translate(-50%,-50%);background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/login-broadcast-1.webp);background-position:center center;background-size:cover;background-repeat:no-repeat;opacity:1;height: 900px;}
.flex-1{flex: 1 1;}
.login-main{display: flex;max-width: 1200px;min-height: 700px;height: calc(-150px + 100vh);margin: 0 auto;position: relative;z-index: 99;}

.privacy{color:#333}
.tab-menu{display:flex;align-items:center;font-size:20px;font-weight:400;color:#b6babf;margin-bottom:30px}
.tab-menu .line{width:1px;background-color:#b6babf;margin:0 15px;height:20px}
.tab-menu .tab-item{cursor:pointer}
.tab-menu .tab-item.active{color:#000;font-weight:bold}
.showPrivacy{max-height:500px;overflow:hidden;overflow-y:scroll;line-height:1.5}
.privacy span{color:#f00}
.right-tips{width:143px;height:37px;position:absolute;top:-42px;right:0;background-repeat:no-repeat;font-size:14px;font-weight:400;color:#2475FC;line-height:30px;padding-left:14px}
.right-tips img{vertical-align:middle;margin-right:5px;width:20px}
.login-header-tips{margin-bottom:30px;font-family:var(--font-family)}
.login-header-tips h3{font-size:28px;color:#333}
.login-header-tips p{font-size:14px;color:#959595;line-height:32px}
.loading-box{display:flex;height:230px}
.login-forgot{text-align:right}
.oauth-logo{width:100px;height:100px;text-align:center;border:1px solid var(--el-color-primary-light-2);border-radius:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}
.oauth-text{margin:20px auto;text-align:center;font-size:14px;color:var(--el-color-primary-light-3)}
.el-button--large{--el-button-size:50px;font-size:16px;font-weight:600}
.login-footer{text-align:center;color:#9598a6;font-size:12px;line-height:60px}
.right-qrcode-bg{position:absolute;right:-1px;top:-1px;width:90px;height:90px;border-radius:0 10px 0 0;border-color:#f2f7ff #f2f7ff #fff #fff;border-style:solid;border-width:50px;-webkit-box-sizing:border-box;box-sizing:border-box}
.right-qrcode-user:hover{background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_hover2.png)}
.right-qrcode-user{position:absolute;top:0;right:0;width:101px;height:101px;display:block;background:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_2.png) no-repeat 50%;background-size:90px;cursor:pointer;z-index:9}
.right-qrcode:hover{background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode_hover2.png)}
.right-qrcode{position:absolute;top:0;right:0;width:101px;height:101px;display:block;background:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode2.png) no-repeat 50%;background-size:90px;cursor:pointer;z-index:9}
.el-form-item__label{color:#1e2226!important;font-weight:600!important}

.login-form{display:flex;position:relative;justify-content:center;flex:1;flex-direction:column;align-items:center}
.login-form .logo{align-items:center;display:flex;font-family:var(--font-family);margin-bottom:20px}
.login-form .logo img{height:60px;margin:0 20px}
.login-form .logo label{font-size:26px;color:#333}
.login-form h3{line-height:28px;margin-top:12px;font-size:20px;color:#1e2226;cursor:pointer;font-weight:600}
.login-form .form-container{width:420px;box-shadow:0 20px 30px 0 rgb(63 63 65 / 6%);border-radius:10px;border:1px solid #fff;box-sizing:border-box;padding:40px 40px 30px;background:#fff;position:relative}
.login-header{background:hsla(0,0%,100%,.3);box-shadow:0 2px 20px 0 rgba(140,147,161,.07);height:50px;align-items:center;display:flex}
.login-header img{height:28px;margin:0 20px}
.login-header label{font-size:16px;color:#333}
.login-form:deep(.login-msg-yzm) {display: flex;width: 100%;}
.login-form:deep(.login-msg-yzm) .el-button {margin-left: 10px;--el-button-size:42px;}
@media only screen and (max-width: 800px) {
	.form-container {
		width: 100% !important;
	}
}
</style>
