<template>
	<div >
		<form action="">
			<div class="login">
				<div class="loginBg">
					<img src="@/assets/img/loginBg.png" />
				</div>
				<div class="loginBox">
					<div class="row center" style="height:48px;">
						<img :src="img_http + logo" alt="" style="width: 30px; height: 30px;">
					</div>
					<div class="row center"><span style="font-size:16px;color:#666;">客服系统客服登录</span></div>
					<div class="box row center">
						<div class="boxData" :class="0?'errBd':''">
							<input type="text" v-model="account" placeholder="账号">
							<img src="@/assets/img/account.png">
							<p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">账号不存在</p>
						</div>
					</div>
					<div class="box row center">
						<div class="boxData" :class="0?'errBd':''">
							<input @keyup.enter="loginBtn()" type="password" v-model="password" placeholder="密码">
							<img src="@/assets/img/password.png">
							<p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">密码错误，请重新输入</p>
						</div>
					</div>
					<div class="box row center">
						<div class="btn row center" @click="loginBtn()">登录</div>
					</div>
				</div>
			</div>
		</form>

	</div>
</template>

<script>
	import "@/css/index.css";
	import Vue from 'vue';
	export default {
		name: "login",
		data() {
			return {
				account:'',//账号
				password:'',//密码
				time:'',
				loading:false,
				logo: '',
				img_http:'http://kfadmin.bocai186.com',//图片路径域
				// img_http: 'http://192.168.2.187:8090',//图片路径域
			}
		},
		methods:{
			loginBtn(){
				this.time = sessionStorage.getItem('time');
				if(this.$socket_open){
					let apiToken = this.$md5('customer-service'+this.time[0]+window.location.origin)
					if(this.account && this.password){

						//进程加载条
						const loading = this.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						console.log(this.$ports.login)
						this.$http.post(this.$ports.login,{
							username:this.account,
							password:this.password
						}).then((res)=>{
							if(res.data.code == 1){
								this.$store.dispatch("SET_USER",res.data.data.user);
								this.$store.dispatch("SET_IS_INIT",true);
								Vue.prototype.$token = res.data.data.user.token;
								this.$router.push('/')
							}else{
								this.$notify({
									title: "错误",
									message: res.data.msg,
									type: "error",
									duration: 2000
								});
							}
							loading.close();
						})
					}else{
						this.$notify({
							title: "错误提示!",
							message: '请输入您的账号和密码',
							type: "error",
							duration: 2000
						});
					}
				}else{
					this.$notify({
						title: "错误提示!",
						message: '网路链接错误',
						type: "error",
						duration: 2000
					});
				}
			},
			/**************************************/
			//连接建立
			websocketonopen() {
				this.$websocket.onopen();
				//console.log('已经链接')
			},
		},
		mounted(){
			this.logo = sessionStorage.getItem('logo');
			//console.log(this.logo, '========logo')
		}
	};
</script>

<style scoped>
	p {
		display: inline;
		margin-block-start: 0;
		margin-block-end:0;
		margin-inline-start: 0;
		margin-inline-end:0;
	}

	.login {
		width: 100%;
		height: 100%;
	}
	.loginBg {
		height: 50%;
	}
	.loginBg img {
		width: 100%;
		height: 100%;
	}
	.loginBox {
		position: fixed;
		top: 27%;
		left: 0px;
		right: 0px;
		margin: auto;
		width:300px;
		height: 280px;
		background: #fff;
		border-radius: 2%;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	}
	.box{
		/* margin-top: 40px; */
		height: 60px;
	}
	.boxData{
		width: 200px;
		/* height: 70px; */
		border: 1px solid #C6DCFF;
		background: #F6F8FF;
		position: relative;
	}
	.boxData img{
		position: absolute;
		left: 6px;
		top:0;
		bottom: 0;
		margin:auto 0;
	}
	.boxData input{
		width: 100%;
		height: 30px;
		outline: none;
		padding-left: 30px;
		font-size: 14px;
		color: #999;
	}
	.boxData input:focus{
		color: #666;
	}
	.errBd{
		border: 1px solid #F60
	}
	.btn{
		width: 240px;
		height: 40px;
		background:#5399F5;
		font-size: 18px;
		color: #fff;
		border: none;
	}
	.btn:hover{

	}
	
	
	.btn:active{
		background: #1d57dd;
	}
</style>