<template>
	<div class="login">
		<div class="header">
			<div class="inner">
				<div class="header-left">
					<div class="header-left-logo">
						<img src="~@/assets/images/login/icon.png" alt="" />
					</div>
					<div class="header-left-line"></div>
					<div class="header-left-text">
						<div style="font-size: 24px">CZO智能分析管理系统</div>
						<div style="font-size: 12px"> Enterprise management integration platform </div>
					</div>
				</div>
				<div class="header-right">
					<span>合同样本</span>
					<span>税收政策</span>
					<span>政府惠企政策</span>
					<span>四险一金</span>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="inner">
				<div class="main-info">
					<div class="main-info-text">企业智能信息化 高效管理 节能降耗</div>
					<div class="main-info-text" style="margin-top: 20px"> 实现 标准化、机制化、流程化、责任化、市场化、人性化 </div>
					<div class="main-info-link">
						<a href="javascript:void(0);">产品视频</a>
						<a href="javascript:void(0);">企业诊断</a>
					</div>
				</div>
				<div class="main-login">
					<div class="main-login-title">黑龙江省华滋佐味酿造有限公司</div>
					<div class="main-login-form">
						<div class="main-login-from-user">
							<label>
								<span>账号</span>
								<input type="text" auto-complete="off" v-model="formData.username" @keyup.enter="handleLogin" />
							</label>
						</div>
						<div class="main-login-from-pass">
							<label>
								<span>密码</span>
								<input type="password" auto-complete="off" v-model="formData.password" @keyup.enter="handleLogin" />
							</label>
						</div>
						<div class="main-login-from-pass">
							<label>
								<span>验证码</span>
								<input type="text" auto-complete="off" v-model="formData.code" style="width: 110px" @keyup.enter="handleLogin" />
								<img :src="codeUrl" @click="getCode" class="login-code-img" />
							</label>
						</div>
						<div class="main-login-from-btn">
							<button @click="handleLogin">
								<span v-if="!loading">立即登录</span>
								<span v-else>登 录 中...</span>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="inner">
				<a href="javascript:void(0);">代理商</a>
				<a href="javascript:void(0);">加盟商</a>
				<a href="javascript:void(0);">合作商</a>
			</div>
		</div>
	</div>
</template>

<script>
	import { getCodeImg } from '@/api/login'
	import Cookies from 'js-cookie'
	import { encrypt, decrypt } from '@/utils/jsencrypt'
	export default {
		data() {
			return {
				codeUrl: '',
				loading: false,
				formData: {
					username: 'admin',
					password: 'admin123',
					code: '',
					uuid: ''
				},
				redirect: undefined
			}
		},
		watch: {
			$route: {
				handler: function (route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		created() {
			this.getCode()
			//this.getCookie();
		},
		methods: {
			getCode() {
				getCodeImg().then((res) => {
					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
					if (this.captchaOnOff) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.formData.uuid = res.uuid
					}
				})
			},
			handleLogin() {
				if (this.formData.username.trim() == '') {
					this.$msg({ type: 'error', message: '账号不能为空' })
					return
				}
				if (this.formData.password.trim() == '') {
					this.$msg({ type: 'error', message: '密码不能为空' })
					return
				}
				if (this.formData.code.trim() == '') {
					this.$msg({ type: 'error', message: '未输入验证码' })
					return
				}
				this.loading = true
				this.$store
					.dispatch('Login', this.formData)
					.then(() => {
						this.$router.push({ path: this.redirect || '/' }).catch(() => {})
					})
					.catch(() => {
						this.loading = false
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		.login-code-img {
			width: 120px;
			height: 50px;
		}
		.header,
		.footer {
			width: 100%;
			height: 80px;
			background: url('~@/assets/images/login/line.jpg') 0 0 no-repeat;
		}
		.main {
			width: 100%;
			height: calc(100vh - 160px);
			background: url('~@/assets/images/login/main.jpg') 0 0 no-repeat;
		}
		.inner {
			width: 80%;
			margin: 0 auto;
			display: flex;
		}
		.header {
			.inner {
				height: 80px;
				justify-content: space-between;
				align-items: center;
				.header-left {
					display: flex;
					color: #fff;
					.header-left-logo,
					.header-left-line,
					.header-left-text {
						height: 60px;
						display: flex;
						align-items: center;
					}
					.header-left-line {
						width: 2px;
						background: url('~@/assets/images/login/1.png') 0 0 no-repeat;
						margin: 0 5px;
					}
					.header-left-text {
						height: 50px;
						align-items: flex-start;
						flex-direction: column;
						justify-content: space-around;
					}
				}
				.header-right {
					height: 60px;
					display: flex;
					align-items: flex-end;
					span {
						background-color: #3cc3cc;
						display: inline-block;
						border-radius: 5px;
						padding: 3px 5px;
						margin-left: 8px;
					}
				}
			}
		}
		.footer {
			.inner {
				height: 80px;
				align-items: center;
				a {
					display: inline-block;
					background-color: #3cc3cc;
					border-radius: 5px;
					-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
					box-shadow: inset 0 0 11px 3px #4fcaca;
					width: 175px;
					height: 50px;
					border: 1px solid #000;
					font-size: 18px;
					margin-right: 8px;
					color: #fff;
					text-align: center;
					line-height: 50px;
				}
			}
		}
		.main {
			.inner {
				height: 100%;
				align-items: center;
				justify-content: space-between;
				.main-info {
					.main-info-text {
						color: #fff;
						font-size: 28px;
						font-weight: bolder;
					}
					.main-info-link {
						margin-top: 100px;
						a {
							display: inline-block;
							width: 175px;
							height: 50px;
							color: #fff;
							border-radius: 5px;
							text-align: center;
							line-height: 50px;
							font-size: 18px;
							border: 1px solid #000;
							&:first-child {
								background: rgba(7, 34, 83, 0.89);
								-webkit-box-shadow: 0 0 11px 3px rgba(8, 49, 157, 0.8) inset;
								box-shadow: inset 0 0 11px 3px rgba(8, 49, 157, 0.8);
							}
							&:last-child {
								background: rgba(51, 204, 204, 0.7);
								-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
								box-shadow: inset 0 0 11px 3px #4fcaca;
								margin-left: 8px;
							}
						}
					}
				}
				.main-login {
					width: 360px;
					.main-login-title {
						width: 100%;
						height: 45px;
						line-height: 45px;
						font-size: 18px;
						background: #07276a;
						border-radius: 5px 5px 0 0;
						color: #fff;
						text-align: center;
					}
					.main-login-form {
						width: 100%;
						background: #a4a4af;
						border-radius: 0 0 5px 5px;
						padding: 40px 30px;
						box-sizing: border-box;
						.main-login-from-user,
						.main-login-from-pass {
							width: 300px;
							border: 1px solid #000;
							height: 50px;
							border-radius: 5px;
							margin-bottom: 20px;
							overflow: hidden;
							label {
								display: flex;
								span {
									display: inline-block;
									width: 70px;
									height: 50px;
									background-color: #a6a6a6;
									text-align: center;
									line-height: 50px;
								}
								input {
									display: block;
									width: 230px;
									height: 50px;
									padding: 0;
									margin: 0;
									border: none;
									background-color: #fff;
									outline: none;
									line-height: 30px;
									padding-left: 5px;
								}
							}
						}
						.main-login-from-btn {
							button {
								width: 100%;
								color: #fff;
								background-color: #07276a;
								height: 50px;
								border-radius: 5px;
								outline: none;
							}
						}
					}
				}
			}
		}
	}
</style>
