<template>
	<div class="login" :style="'background-image:url('+ Background +');'">
		<div class="headder">
			<h2>尾矿库数据在线监测系统</h2>
			<h4>ONLINE MONITORING SYSTEM FOR TAILINGS POND DATA</h4>
		</div>
		<div class="logo-place">
			<div class="logo-title">登录窗口</div>
			<h3 class="subtitle">欢迎登录后台系统</h3>
			<div class="ctn-place">
				<div class="inbox-range">
					<div class="ctn-fix">
						<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
							<el-form-item prop="username">
								<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
								  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
								  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
								</el-input>
							</el-form-item>
							<!-- 
								<el-form-item prop="code">
								<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
								  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
								</el-input>
								<div class="login-code">
								  <img :src="codeUrl" @click="getCode">
								</div>
								</el-form-item>
							-->
							<el-form-item style="width:100%;">
								<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
									<span v-if="!loading">登 录</span>
									<span v-else>登 录 中...</span>
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div v-if="$store.state.settings.showFooter" id="el-login-footer">
		  <span v-html="$store.state.settings.footerTxt" />
		  <span> ⋅ </span>
		  <!-- <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a> -->
		  <span class="">技术支持：威海晶合数字矿山技术有限公司</span>
		</div>
	</div>
</template>

<script>
import Config from '@/settings'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import qs from 'qs'
import Background from '@/assets/images/login_bg.png';
import { encrypt } from '@/utils/rsaEncrypt'
import '@/assets/icons' // icon

export default {
	name: 'Login',
	data() {
		return {
			Background: Background,
			//Background:'',
			codeUrl: '',
			cookiePass: '',
			loginForm: {
				username: '',
				password: '',
				rememberMe: false,
				code: '',
				uuid: '',
			},
			loginRules: {
				username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
				password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
				code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
			},
			loading: false,
			redirect: undefined
		}
	},
	watch: {
		$route: {
		  handler: function(route) {
			const data = route.query
			if (data && data.redirect) {
			  this.redirect = data.redirect
			  delete data.redirect
			  if (JSON.stringify(data) !== '{}') {
				this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
			  }
			}
		  },
		  immediate: true
		}
	},
	created() {
		// 获取验证码
		this.getCode()
		// 获取用户名密码等Cookie
		this.getCookie()
		// token 过期提示
		this.point()
	},
	methods: {
		getCode() {
		  getCodeImg().then(res => {
			this.codeUrl = res.img
			this.loginForm.uuid = res.uuid
		  })
		},
		getCookie() {
		  const username = Cookies.get('username')
		  let password = Cookies.get('password')
		  const rememberMe = Cookies.get('rememberMe')
		  // 保存cookie里面的加密后的密码
		  this.cookiePass = password === undefined ? '' : password
		  password = password === undefined ? this.loginForm.password : password
		  this.loginForm = {
			username: username === undefined ? this.loginForm.username : username,
			password: password,
			rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
			code: '',
		  }
		},
		handleLogin() {
		  this.$refs.loginForm.validate(valid => {
			const user = {
			  username: this.loginForm.username,
			  password: this.loginForm.password,
			  rememberMe: this.loginForm.rememberMe,
			  code: this.loginForm.code,
			  uuid: this.loginForm.uuid,
			}
			if (user.password !== this.cookiePass) {
				user.password = encrypt(user.password);
			};

			if (valid) {
			  this.loading = true
			  if (user.rememberMe) {
				Cookies.set('username', user.username, { expires: Config.passCookieExpires })
				Cookies.set('password', user.password, { expires: Config.passCookieExpires })
				Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
			  } else {
				Cookies.remove('username')
				Cookies.remove('password')
				Cookies.remove('rememberMe')
			  }
			  this.$store.dispatch('Login', user).then((res) => {
				this.loading = false
				if(/* res.head.code !== '0000' */ res.code){
					return this.$notify({
						title: '提示',
						message: res.msg,
						type: 'warning',
						duration: 5000
					})
				};
				//this.$router.push({ path: this.redirect || '/' })
				window.location.href = this.redirect || '/';
			  }).catch((err) => {
				this.loading = false
				this.getCode()
			  })
			} else {
			  console.log('error submit!!')
			  return false
			}
		  })
		},
		point() {
		  const point = Cookies.get('point') !== undefined
		  if (point) {
			this.$notify({
			  title: '提示',
			  message: '当前登录状态已过期，请重新登录！',
			  type: 'warning',
			  duration: 5000
			})
			Cookies.remove('point')
		  }
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.login {
		display:flex;justify-content:center;align-items:center;flex-direction:column;
		height:100%;background-size:cover;position:relative;
		
		.headder{
			margin-bottom:.48rem;text-align:center;
			h2, h4{
				margin:0;padding:0;line-height:1;background-image:-webkit-linear-gradient(top, #fff, #a2deff, #23a5f9);
				-webkit-background-clip:text;-webkit-text-fill-color:transparent;
			}
			h2{font-size:.66rem;letter-spacing:.06rem;}
			h4{margin-top:.20rem;font-size:.285rem;}
		}

		.logo-place{
			position:relative;width:9.68rem;height:5.56rem;/* margin:2.01rem auto 0; */
			background:no-repeat top center url('~@/assets/images/login_adorn1.png');background-size:100% 100%;
		}

		.ctn-place{
			position:absolute;top:1.61rem;right:.06rem;height:auto;width:4.79rem;
			flex:1;display:flex;
			
			.inbox-range{
				flex:1;
				.ctn-fix{width:3.8rem;margin:0 auto;}
			}

			.login-form {
				.el-input {
					height:.58rem;min-height:38px;
					input {
						height:.58rem;padding-left:.40rem;
						background-color:#1042a1 !important;color:#fff;border-color:#085fa2;
					}
				}
				.input-icon{
					height:.58rem;width:.24rem;margin-left:.02rem;
				}

				.el-form-item__content{
					line-height:.58rem;
				}
				
				.el-form-item{
					margin-bottom:.25rem;
					&:last-child{margin-bottom:0}
					.el-select{width:100%;}
				}
			}
		}
		
		.logo-title{
			position:absolute;top:.15rem;left:0;height:auto;width:100%;text-align:center;cursor:default;font-size:.26rem;line-height:1;letter-spacing:10px;color: rgb(56, 230, 255);text-shadow:0px 0px 2px rgb(56 230 255);
		}
		.subtitle{
			position:absolute;top:.91rem;left:0;height:auto;width:100%;text-align:center;cursor:default;font-size:.34rem;line-height:1;letter-spacing:10px;color:#b1edf8;
		}
	}
	
	.login-code {
		width: 33%;
		display: inline-block;
		height: 38px;
		float: right;
		img{
		  cursor: pointer;
		  vertical-align:middle
		}
	}
</style>
