<template>
	
	<div class="login">
		<h1>ByteSailing</h1>
		<div class="content">
			<div class="warp-bg">
				<div class="left-bg">
					<img src="../assets/login-img.png" alt="" />
				</div>
				<div class="right-bg">
					<div class="form" style="margin-top:300px">
						<div class="">欢迎登录~</div>
						<h2>ByteSailing 管理系统</h2>
						<div style="margin-top:30px">
							<el-input
								placeholder="请输入租户号"
								prefix-icon="el-icon-user-solid"
								v-model="loginForm.tenantId"
								@keyup.enter.native="login">
							</el-input>
						</div>
						<div style="margin-top:30px">
							<el-input
								placeholder="请输入账号"
								prefix-icon="el-icon-user-solid"
								v-model="loginForm.username"
								@keyup.enter.native="login">
							</el-input>
						</div>
						<div style="margin-top:30px">
							<el-input
								placeholder="请输入密码"
								prefix-icon="el-icon-s-goods"
								type="password"
								v-model="loginForm.passwordCopy"
								@keyup.enter.native="login">
							</el-input>
						</div>
						<div style="margin-top:30px" class="code">
							<el-input
								placeholder="请输入验证码"
								prefix-icon="el-icon-edit-outline"
								v-model="loginForm.code"
								@keyup.enter.native="login">
							</el-input>
							<img :src="image" @click="getCodeImg" alt="" />
						</div>
						<div  style="margin-top:30px">
							<el-checkbox v-model="checked">记住密码</el-checkbox>
						</div>
						<el-button type="primary"  @click="login" style="width:100%;margin-top:30px">登录</el-button>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 全局登录页面 账号 <input type="text" /> 密码
		<input type="text" />   验证码  <input type="text" v-model="loginForm.code" />
		<button @click="login">登录</button> -->
	</div>
</template>
<script>
import axios from 'axios';
import md5 from 'js-md5';
import { getAll,setToken } from '@/libs/micros'
import { Alert } from 'element-ui';
export default {
	data() {
		return {
			checked:false,
			loginForm: {
				//租户ID
				tenantId: '845206',
				//部门ID
				deptId: '',
				//角色ID
				roleId: '',
				//用户名
				username: '',
				//密码
				passwordCopy: '',
				//账号类型
				type: 'loginWithoutVerificationCode',
				//验证码的值
				code: '',
				//验证码的索引
				key: '',
                grant_type: 'captcha',
                scope: 'all'
				//预加载白色背景
				
			},
            image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
		}
	},
	methods: {
		login() {
			const v = this
			v.loginForm.password = md5(v.loginForm.passwordCopy)
			axios({
				method:"post",
				url:'/api/blade-auth/oauth/token',
				params:this.loginForm,
				headers:{
					'Captcha-Key':this.loginForm.key,
					'Captcha-Code':this.loginForm.code,
					'Tenant-Id': this.loginForm.tenantId
				},
			}).then(res=>{
				console.log(res)
				if(res.status == 200 && res.data){
					window.localStorage.setItem("token",JSON.stringify(res.data))
					setToken(res.data)
					console.log(v.checked)
					if(v.checked){
						window.localStorage.setItem('username',v.loginForm.username)
						window.localStorage.setItem('passwordCopy',v.loginForm.passwordCopy)
						window.localStorage.setItem('checked',v.checked)
					}else{
						window.localStorage.setItem('username','')
						window.localStorage.setItem('passwordCopy','')
						window.localStorage.setItem('checked',false)
					}
					this.$message({
						message: '登录成功，正在跳转。。。',
						type: 'success'
					});
					setTimeout(()=>{
						v.$router.push("/main")
					},1000)

					
				}else{
					
				}
				// 
                // v.$router.push("/emailHome")
			}).catch(res=>{
				console.log(res)
				this.$message({
					message: res.response.data.error_description,
					type: 'error'
				});
			})
			
		},
		getCodeImg() {
			this.$get('/api/blade-auth/oauth/captcha').then((res) => {
                const data = res
                this.loginForm.key = data.key
                this.image = data.image
            })
		},
	},
	created() {
		const v = this
		v.getCodeImg()
		if(window.localStorage.getItem('username')){
			v.loginForm.username = window.localStorage.getItem('username')
			v.loginForm.passwordCopy = window.localStorage.getItem('passwordCopy')
			v.checked = true
		}
	},
}
</script>
<style lang="less">
.login{
	.warp-bg{
		background: #fff;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		.left-bg{
			width: calc(~'50vw + 200px');
			background: #0084FF;
			height: 100vh;
			float: left;
			overflow: hidden;
			img{
				float: right;
				margin-right: 75px;
				margin-top: 120px;
			}
		}
		.right-bg{
			width: calc(~'50vw - 200px');
			background: url(../assets/login-right-bg.png) no-repeat;
			background-size: cover;
			height: 100vh;
			float: right;
			overflow: hidden;
			.form{
				width: 500px;
				padding:0 75px;
				box-sizing: border-box;
				.el-input{
					input{
						border:none;
						border-bottom: 1px solid #DDDDDD;
					}
				}
				.code{
					position: relative;
					img{
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}
	h1{
		position: fixed;
		left: 40px;
		top: 0;
		height: 96px;
		line-height: 96px;
		font-size: 26px;
		color: #fff;
	}
	
}
</style>

