<template>
	<el-container :style="backStyle">
		<el-header height="30px">
			<div class="logo-container" v-if="!showTenant">
				<!--        <i :class="isIeExplorer?'icon-halosee-H icon-halosee-H-ie':'icon-halosee-H icon-halosee-H-c'" />-->
				<span class="pre-word">HALO</span>
				<span class="tail-word">SEE </span>
				<el-divider class="logo-divider" direction="vertical"></el-divider>
				<span class="system-name">{{ name }}</span>
			</div>
			<div class="logo-container" v-if="showTenant">
				<a class="logo-link" v-if="showLogo">
					<img :src="logo" style="margin-top: 0; max-width: 400px; max-height: 48px;" />
				</a>
				<!--            <i :class="isIeExplorer?'icon-halosee-H icon-halosee-H-ie':'icon-halosee-H icon-halosee-H-c'" v-if="!showLogo"/>-->
				<span class="pre-word" v-if="!showLogo">HALO</span>
				<span class="tail-word" v-if="!showLogo">SEE</span>
				<el-tag>{{ version }}</el-tag>
				<el-divider class="logo-divider" direction="vertical"></el-divider>
				<span class="system-name">{{ companyName }}</span>
			</div>
			<div class="site-div">
				<a href="http://www.halosee.com" tabindex="-1">
					<i class="icon-guanwang"></i>国信会视官网
				</a>
			</div>
		</el-header>
		<el-main>
			<div class="login-card__container fullheight">
				<el-card shadow="always" class="login-card">
					<div :style="totemStyle" v-show="isShowTotem" class="totem-div"></div>
					<div class="login-div">
						<el-form
							style="margin: 20px;"
							:model="principal"
							:rules="rules"
							ref="principal"
						>
							<div class="welcome-title">{{ $t('login.welcome2Login') }}</div>
							<el-form-item prop="account">
								<el-input
									size="medium"
									clearable
									prefix-icon="icon-account"
									v-model="principal.account"
								></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input
									v-model="principal.password"
									:type="inputType"
									prefix-icon="icon-password"
									size="medium"
									@focus="inputGetFocus"
									@keyup.enter.native="submitForm('principal')"
								>
									<i
										v-if="principal.password"
										slot="suffix"
										class="el-icon-circle-close close-icon inner-icon"
										@click="clearInput"
									/>
									<i
										v-if="isFocus || principal.password"
										slot="suffix"
										:class="[
											flag ? 'icon-icon-eye-open' : 'icon-icon-eye-close',
										]"
										autocomplete="auto"
										class="password-icon inner-icon"
										@click="flag = !flag"
									/>
								</el-input>
							</el-form-item>
							<el-form-item prop="captcha" v-if="loginCaptcha" class="captcha">
								<el-input
									clearable
									prefix-icon="icon-picture"
									size="medium"
									v-model="principal.captcha"
								>
									<template slot="append">
										<a href="javascript:;">
											<el-tooltip content="点击刷新" placement="top">
												<el-image
													class="captcha-img"
													:src="captchaImg"
													@click="getCaptcha"
													fit="fill"
												>
												</el-image>
											</el-tooltip>
										</a>
									</template>
								</el-input>
							</el-form-item>
							<!--<el-alert v-if="responseError" :title="responseError" type="error" :closable="false"></el-alert>-->
							<div class="btn_wrap">
								<el-button
									class="login_btn"
									size="medium"
									type="primary"
									@focus="inputGetFocus"
									@click="submitForm('principal')"
									:loading="loading"
									>{{ $t('login.login') }}</el-button
								>
								<el-button
									size="medium"
									@click="resetForm('principal')"
									:disabled="loading"
									>{{ $t('login.reset') }}</el-button
								>
							</div>
							<div class="lang_change">
								<div type="text" class="mobile_btn">
									<p class="mobile__text">移动端</p>
									<div class="mobile_img_wrap">
										<vue-qr
											:correctLevel="3"
											:autoColor="false"
											colorDark="#000000"
											:logoSrc="logoSrc"
											backgroundColor="#f5f5f5"
											:text="codeUrl"
											:size="100"
											:margin="10"
											:logoMargin="3"
										>
										</vue-qr>
									</div>
								</div>
								<lang-select class="right-menu-item hover-effect" />
							</div>
						</el-form>
					</div>
				</el-card>
			</div>
		</el-main>
		<el-footer class="copyright"
			>Copyright © 版权所有 北京国信会视科技有限公司 2021</el-footer
		>
	</el-container>
</template>

<script>
import langSelect from '@/components/langSelect';
import VueQr from 'vue-qr';
export default {
	name: 'login',
	props: ['tenant'],
	data() {
		var checkAccount = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入账号'));
			}
			if (/^[a-zA-Z0-9_-]{2,20}$/.test(value)) {
				return callback();
			} else {
				return callback(new Error('账号格式不符合规范'));
			}
		};
		return {
			flag: false,
			isFocus: false,
			logoSrc: require('../assets/logo.png'),
			codeUrl: `${window.location.origin}/mobilevue`,
			logo: '',
			name: '国信会视企业信息开发平台[HS-MDP]',
			showTenant: false,
			showLogo: false,
			companyName: '',
			version: '',
			tenantName: '',
			loginCaptcha: false,
			captchaImg: '',
			principal: {
				tenantId: '',
				account: '',
				password: '',
				captcha: '',
				captchaId: '',
			},
			rules: {
				account: [{ validator: checkAccount, trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
			},
			responseError: '',
			loading: false,
			backStyle: {
				width: '100%',
				background: `url(${require('@/assets/img/back.jpg')}) center / 100% auto no-repeat`,
			},
			totemStyle: {
				width: '300px',
				height: '320px',
				float: 'left',
				background: `#1975FF url(${require('@/assets/img/totem.png')}) center / 100% auto no-repeat`,
				zIndex: -1,
			},
			isIeExplorer: false,
			isShowTotem: true,
		};
	},
	computed: {
		inputType() {
			return this.flag ? 'text' : 'password';
		},
	},
	mounted() {
		//获取租户信息
		let tenant = this.tenant ? this.tenant : 'platform';
		// if(tenant){
		// let url = "${uc}/uc/tenantManage/v1/getTenantByCode?code=" + tenant;
		let _this = this;
		this.$store.dispatch('setting/loadTenantSetting', tenant).then(resp => {
			if (resp.data) {
				let tenantManage = resp.data;
				_this.showTenant = true;
				_this.companyName = tenantManage.nameFront;
				_this.version = tenantManage.version;
				_this.loginCaptcha = tenantManage.loginCaptcha;
				_this.getCaptcha();
				if (tenant != 'platform') {
					_this.principal.tenantId = resp.data.id;
				}
				if (tenantManage.ico) {
					let ico = JSON.parse(tenantManage.ico);
					if (ico && ico.length > 0) {
						_this.showLogo = true;
						_this.logo =
							window.context.portal +
							'/system/file/v1/getLogoFile?logoType=front&tenantId=' +
							tenantManage.id;
					}
				}
				if (tenantManage.frontLogo) {
					let ico = JSON.parse(tenantManage.frontLogo);
					if (ico && ico.length > 0) {
						_this.showLogo = true;
						_this.logo =
							window.context.portal +
							'/system/file/v1/getLogoFile?logoType=front&tenantId=' +
							tenantManage.id;
					}
				}
			}
		});
		// }else{
		//   //不是租户
		//   this.sysSetting();
		// }
	},
	methods: {
		getCaptcha() {
			let _this = this;
			if (_this.loginCaptcha) {
				this.$http.get('/gateway/captcha').then(response => {
					let data = response.data;
					if (data.success) {
						_this.principal.captchaId = data.result.captchaId;
						_this.captchaImg = data.result.captchaImg;
					}
				});
			}
		},
		//获取系统默认配置 系统Logo、名称
		sysSetting() {
			const _this = this;
			let url =
				window.context.portal + '/sys/sysProperties/v1/getDecryptBySysSetting';
			this.$http.get(url).then(response => {
				if (response && response.data && response.data.value) {
					_this.showTenant = true;
					let sysSettingData = JSON.parse(response.data.value);
					if (sysSettingData.frontName == '') {
						_this.companyName = _this.name;
					} else {
						_this.companyName = sysSettingData.frontName;
					}
					if (sysSettingData.ico.length > 0) {
						let ico = sysSettingData.ico;
						_this.showLogo = true;
						_this.logo =
							window.context.portal +
							'/system/file/v1/downloadFile?fileId=' +
							ico[0].id;
					}
				}
			});
		},
		querySearch(queryString, cb) {
			if (!queryString) {
				cb([]);
				return;
			}
			let queryFilter = {};
			queryFilter.pageBean = {
				page: 1,
				pageSize: 20,
				total: 0,
				showTotal: true,
			};
			let query = {
				property: 'name_',
				value: queryString,
				group: 'main',
				operation: 'LIKE',
				relation: 'AND',
			};
			if (!queryFilter.querys) {
				queryFilter.querys = [];
			}
			queryFilter.querys.push(query);

			this.$http
				.post(`${window.context.uc}/uc/tenantManage/v1/listJson`, queryFilter)
				.then(res => {
					// 调用 callback 返回建议列表的数据
					cb(res.data.rows);
				});
		},
		handleSelect(item) {
			this.tenantName = item.name;
			this.principal.tenantId = item.id;
		},
		setRouterPath() {
			this.$store.dispatch('login/actionLoginAccount', this.principal.account);
			localStorage.setItem(
				this.principal.account + 'loginRoutePath',
				this.$route.path
			);
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.inputGetFocus();
					this.setRouterPath();
					this.loading = true;
					this.$store
						.dispatch('login/loginByPrincipal', this.principal)
						.then(user => {
							this.loading = false;
							this.getCaptcha();
							let loginStatus = user.loginStatus,
								loginMessage = user.loginMessage;
							if (loginStatus && loginStatus == true) {
								this.$router.push({
									path: this.$route.query.redirect
										? this.$route.query.redirect
										: '/',
								});
							} else if (loginStatus == false) {
								this.$router.push({
									name: 'resetPwdView',
									params: {
										account: this.principal.account,
										message: loginMessage,
									},
								});
							}
						})
						.catch(msg => {
							this.loading = false;
							this.getCaptcha();
							if (msg.startsWith('timeout of')) {
								msg = '登录超时';
							}
							this.responseError = msg;
						});
				} else {
					return false;
				}
			});
		},
		inputGetFocus() {
			this.responseError = '';
			this.isFocus = true;
		},
		resetForm(formName) {
			this.responseError = '';
			this.$refs[formName].resetFields();
		},
		onResize() {
			this.isShowTotem = document.body.offsetWidth > 500;
		},
		clearInput() {
			this.principal.password = '';
			this.isFocus = false;
		},
	},
	created() {
		let USER_AGENT = navigator.userAgent.toLowerCase();
		let isChrome = /.*(chrome)\/([\w.]+).*/;
		if (!isChrome.test(USER_AGENT)) {
			this.isIeExplorer = true;
		}
		this.isShowTotem = document.body.offsetWidth > 500;
		window.addEventListener('resize', this.onResize);
	},
	components: { langSelect, VueQr },
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.login-card__container {
	display: -moz-flex;
	display: -ms-flex;
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.logo-container {
	margin-top: 10px;
	display: inline-block;
	margin-left: 30px;
}

.logo-container > i.icon-halosee-H-c {
	font-size: 36px;
	background-image: linear-gradient($--color-secondary, $--color-primary);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	margin-right: -5px;
}

.logo-container > i.icon-halosee-H-ie {
	font-size: 36px;
	background-clip: text;
	-webkit-background-clip: text;
	color: $--color-primary;
	margin-right: -5px;
}

.logo-container:hover > i.icon-halosee-H-c {
	background-image: linear-gradient($--color-primary, $--color-secondary);
}

.logo-container span.pre-word {
	font-size: 26px;
	font-weight: bold;
	color: $--color-primary;
}

.logo-container span.tail-word {
	font-size: 24px;
	font-weight: bold;
	color: #bdbfc2;
}

.logo-container > .logo-divider {
	margin: 0 25px 11px 25px;
	height: 18px;
}

.logo-container > .system-name {
	color: #666;
	font-weight: bold;
	font-size: 16px;
}

.site-div {
	float: right;

	margin-top: 25px;
	margin-right: 40px;
}

.site-div > a {
	color: #5b9dff;
	font-size: 12px;
	text-decoration: none;
}

.site-div > a > i {
	font-weight: bold;
	margin-right: 5px;
}

.login-card {
	width: 600px;
	height: 320px;
}

.totem-div {
	-moz-box-shadow: 2px 2px 5px #999;
	-webkit-box-shadow: 2px 2px 5px #999;
	box-shadow: 2px 2px 5px #999;
}

.login-div {
	width: 300px;
	height: 320px;
	float: right;
}

.welcome-title {
	margin-top: 20px;
	font-size: 18px;
	margin-bottom: 20px;
}

.copyright {
	color: #999;
	font-size: 13px;
	text-align: center;
}

.login-card /deep/ div {
	padding: 0;
}

.login-card /deep/ .el-alert__content {
	padding: 5px;
}
.mobile_img_wrap {
	display: none;
	position: absolute;
	top: 0;
	right: 46px;
	.img_item {
		width: 160px;
	}
}
.btn_wrap {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.mobile_btn {
	position: relative;
	margin-top: -10px;
	margin-right: 20px;
	&:hover {
		cursor: pointer;
		color: #409eff;
		.mobile_img_wrap {
			display: block;
		}
	}
}
.login_btn {
	margin: 0 10px 0 20px;
}
.lang_change {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	margin-right: 27px;
}
.mobile__text {
	color: $--color-text-regular;
	margin: 10px;
}
.captcha {
	/deep/ .el-input-group__append {
		border: none;
		background-color: transparent;
	}
	.captcha-img {
		width: 100px;
		height: 34px;
		margin: 0px -20px;
		margin-left: -100px;
		border: 1px solid rgb(220, 223, 230);
	}
}
.inner-icon {
	margin-right: 5px;
}
</style>
