<template>
    <div class="login">
        <div class="header" id="top">
			<div class="clearfix">
				<div class="fl">
					<a href="http://www.demogic.com/" class="logo"></a>
				</div>
				<a class="home-link fr border-1px" href="http://www.demogic.com/" translate="login.home">返回首页</a>
			</div>
		</div>
        <div class="login_contetnt">
			<h3 class="login-top">让信息连接一切</h3>
			<h4 class="login-bottom">GIC商户后台</h4>
			<div class="form">
				<form class="login-form" id="optForm" method="post" action="../../uLogin.htm?operate=login">
					<div class="form-control">
						<label for="phone">账号</label>
						<input id="userName" name="userName" type="text" v-model="account" autocomplete="off">
					</div>
					<div class="form-control">
						<label for="password">密码</label>
						<input id="password" name="password" type="password" v-model="password" autocomplete="new-password">
						<p class="error" id="passwordError" v-show="error.flag">{{error.msg}}</p>
					</div>
					<button type="button" class="submit" @click="submit">立即登录</button>
				</form>
			</div>
		</div>
        <footer id="footer">
			<p class="copyright">Copyright 2017 Demogic.com All Rights Reserved 浙ICP备15033117号-1 </p>
		</footer>
    </div>
</template>
<script>
import {login,loginEid} from '@/service/api/systemApi.js';
export default {
	name: 'login',
	data () {
		return {
			error: {
				flag: false,
				msg: ''
			},
			account: 'damogic',
			password: 'damo2018'
		}
	},
	created () {
		// this.$http.get('api-marketing/list-clerk-department',{},(res) => {
		// 	console.log(res)
		// })
	},
	methods: {
		async submit () {
			if (!this.account || !this.password) {
				this.$message.error('账号或者密码不能为空');
				return
			}
			let eidParams = {
				loginName:this.account
			}

			let resEid = await loginEid(eidParams);
			let params = {
				loginName:this.account,
				password:this.password,
        eid:resEid.result[0].enterpriseId
        // eid:'ff808081593917d90159398eca1a0014'
			}
			let resLogin = await login(params);
			console.log(resLogin)
			//先作跳转
			this.$router.replace('/wechat')
		},
	}
}
</script>
<style scoped>
.login{
    height: 100%;
    background-image: url(../../assets/img/login_bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgba(255, 255, 255, .15);
    text-align: center;
}
#top {
    background: transparent;
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #111111;
    position: relative;
    z-index: 2;
}
#top .logo {
    display: block;
    float: left;
    margin-left: 100px;
    width: 150px;
    height: 80px;
    background: url(../../assets/img/login_logo.png) left center no-repeat;
    text-indent: -999px;
}
.home-link {
    width: 80px;
    height: 32px;
    margin-top: 23px;
    margin-right: 135px;
    border-radius: 0;
    text-align: center;
    font-size: 14px;
    line-height: 32px;
    color: rgba(255, 255, 255, .6);
    border: 1px solid #fede29;
    background: 0 0;
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    background: 0 0;
    /* box-shadow: inset 0 -1px 0 0 rgba(81, 130, 228, .15); */
    z-index: 1000;
}


/*
 * login-ç™»å½•
 */

.home-link {
	width: 80px;
	height: 32px;
	margin-top: 23px;
	margin-right: 135px;
	border-radius: 0;
	text-align: center;
	font-size: 14px;
	line-height: 32px;
	color: rgba(255, 255, 255, .6);
	border: 1px solid #fede29;
	background: 0 0;
}

.login_contetnt {
	width: 350px;
	margin: 0 auto;
}

.login-top {
	position: relative;
	z-index: 1;
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
	margin: 70px 0 20px;
}

.login-bottom {
	position: relative;
	z-index: 1;
	font-size: 16px;
	font-weight: normal;
	color: #fede29;
	margin-bottom: 40px;
}

.form {
	position: relative;
	z-index: 3;
	width: 350px;
	margin: 0 auto;
}

#top {
	background: transparent;
	position: relative;
}

#top:hover {
	background: transparent;
}

.form-control {
	position: relative;
}

.form-control> label {
	position: absolute;
	/*top: 13px;*/
	line-height: 46px;
	left: 15px;
	font-size: 14px;
	color: #fff;
	cursor: text;
}

.form-control> input {
	font-size: 14px;
	padding-left: 50px;
	color: #fff;
	font-weight: 100;
	width: 298px;
	height: 46px;
	line-height: 14px;
	text-indent: 15px;
	background: rgba(0, 0, 0, .5);
	outline: 0;
	margin-bottom: 10px;
}

.form-control> input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, .5) inset;
}

.submit {
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	margin-top: 30px;
	margin-bottom: 36px;
}

.submit:active {
	color: rgba(0, 0, 0, 0.6);
	background-color: #e0bb26;
}

.submit,
.login-btn {
	color: #000;
	outline: 0;
	border: 0;
	background-color: #fede29;
	cursor: pointer;
}

.header {
	position: fixed;
	left: 0;
	top: 0;
	height: 80px;
	width: 100%;
	background: 0 0;
	/*box-shadow: inset 0 -1px 0 0 rgba(81, 130, 228, .15);*/
	z-index: 1000;
}


.error {
	color: #f64e4e;
	font-size: 12px;
	line-height: 12px;
	text-align: left;
	display: none;
}

.bottom-error {
	margin-bottom: 10px;
}

#footer {
	width: 100%;
	position: absolute;
	bottom: 20px;
	background: transparent;
	color: #fff;
	text-align: center;
}


@media screen and (max-width:767px) {
	#top {
		background: transparent;
		position: relative;
	}

	.home-link {
		width: 60px;
		height: 20px;
		margin-top: 9px;
		margin-right: 15px;
		border-radius: 0;
		text-align: center;
		font-size: 12px;
		line-height: 20px;
		color: rgba(255, 255, 255, .6);
		border: 1px solid #fede29;
		background: 0 0;
	}
	.login_contetnt {
		width: 250px;
	}
	.form-control> label {
		font-size: 13px;
	}
	.form-control> input {
		width: 198px;
	}
	.form {
		width: 250px;
	}
	.login-top {
		font-size: 16px;
	}
	.login-bottom {
		font-size: 12px;
	}
	#footer {
		display: block;
	}
}

</style>
