<template>
	<div class="login-container flex-row" v-if="showImg && isAllow" v-loading="loading">
		<el-switch class="switch" v-model="getThemeConfig.isIsDark" size="large" inline-prompt @change="onAddDarkChange" :active-icon="Sunny" :inactive-icon="Moon" style="--el-switch-on-color: #fff; --el-switch-off-color: #151515"></el-switch>
		<div class="part left">
			<div class="flex logo">
				<el-image class="logoimg" :src="sysinfo.systemLogo" />
				{{ sysinfo.systemName }}
			</div>
			<el-image class="img" fit="contain" :src="sysinfo.systemLoginPIC" />
			<div>
				<span class="text" v-if="sysinfo.buildTime">服务端版本：{{ sysinfo.buildVersion }}
				</span>
				<span class="text" v-if="sysinfo.buildTime">{{
					dayjs(sysinfo.buildTime).format("YYYY-MM-DD HH:mm:ss")
				}}</span>
				<div style="height: 10px"></div>
				<span class="text" v-if="versionInfo.version">前端版本：{{ versionInfo.version }}
				</span>
				<span class="text" v-if="versionInfo.updateTime">{{
					versionInfo.updateTime
				}}</span>
			</div>
		</div>
		<div class="part">
			<div class="title">登录</div>
			<Account :showSSO="showSSO" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, computed, ref } from "vue";
import Account from "/@/views/login/component/account-tenant.vue";
import { useStore } from "/@/store/index";
import { Sunny, Moon } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import api from "/@/api/system";
import tenantApi from "/@/api/modules/tenant";
import axios from "axios";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { setSystemInfo, setTenantInfo } from "/@/utils/auth";
import other from "/@/utils/other";

const store = useStore();
const route = useRoute();
const tenant = route.params?.tenant as string;
const isAllow = ref(true);
const loading = ref(true);

const showImg = ref(false);
const showSSO = ref(false);
const sysinfo = reactive<any>({
	buildVersion: "",
	buildTime: "",
	systemName: "",
	systemLogo: "",
	systemLoginPIC: "",
});

api
	.sysinfo()
	.then((res: any) => {
		setSystemInfo(res);
		// 租户是 (企业版功能) 如果非企业版，跳转到普通登录页面
		if (!sessionStorage.isEnterprise) return window.location.href = "/"
		sysinfo.buildVersion = res.buildVersion;
		sysinfo.buildTime = res.buildTime;
		// const isSSOEnabled = window.atob(res.target).split("|")[4];
		// if (isSSOEnabled == "1") {
		// 	showSSO.value = true;
		// }
		getTenantInfo()
	})
	.finally(() => (showImg.value = true));

function getTenantInfo() {
	tenantApi
		.get(tenant)
		.then((res: any) => {
			if (res?.status) {
				sysinfo.systemName = res.name;
				sysinfo.systemLogo = res.logo;
				sysinfo.systemLoginPIC = res.logoPic;

				// 设置租户的全局名称和图标
				setTenantInfo({
					code: res.code,
					systemName: res.name,
					systemLogo: res.logo,
					systemLogoMini: res.logoMini,
					systemLoginPIC: res.logoPic,
				})
				other.useTitle()
			} else {
				isAllow.value = false;
				ElMessage.error("租户不存在");
			}
		})
		.catch(() => {
			isAllow.value = false;
		})
		.finally(() => {
			loading.value = false;
		});
}

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return store.state.themeConfig.themeConfig;
});

const versionInfo = reactive<any>({
	version: "",
	updateTime: "",
});
// 加载版本信息
axios.get("/versionInfo.json").then((res) => {
	versionInfo.version = res.data.version;
	versionInfo.updateTime = res.data.updateTime;
});

// 4、界面显示 --> 深色模式
const onAddDarkChange = () => {
	const body = document.documentElement as HTMLElement;
	if (getThemeConfig.value.isIsDark) {
		body.setAttribute("data-theme", "dark");
		document.querySelector("html")!.className = "dark";
	} else {
		body.setAttribute("data-theme", "");
		document.querySelector("html")!.className = "";
	}
	store.dispatch("themeConfig/setThemeConfig", getThemeConfig.value);
};
</script>

<style scoped lang="scss">
html[data-theme="dark"] {
	.login-container {
		background: #293146;
	}

	.left {
		background-image: url(/@/assets/login-bg-dark.svg);
	}

	.title {
		color: #aaa;
	}
}

.flex {
	display: flex;
	align-items: center;
}

.text {
	color: #fff;
}

.switch {
	position: fixed;
	right: 20px;
	top: 20px;
}

.login-container {
	width: 100vw;
	height: 100vh;
	position: relative;
	background: #fff;

	.title {
		font-size: 30px;
		color: #333;
		font-weight: bold;
		letter-spacing: 20px;
	}

	.logo {
		font-size: 30px;
		color: #fff;

		.logoimg {
			height: 50px;
			display: block;
			margin-right: 12px;
		}
	}

	.img {
		max-width: 50%;
		display: block;
		max-height: 40vh;
	}

	.part {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.left {
		height: 100vh;
		background-image: url(/@/assets/login-bg.svg);
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: right center;
		align-items: flex-start;
		padding-left: 8%;
		justify-content: space-around;
		padding-top: 10vh;
		padding-bottom: 10vh;
	}

	.login-icon-group {
		width: 100%;
		height: 100%;
		position: relative;

		.login-icon-group-title {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 12px 0;

			img {
				width: auto;
				height: 40px;
			}

			&-text {
				padding-left: 20px;
				color: var(--el-color-primary);
			}
		}

		&-icon {
			width: 60%;
			height: 70%;
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}

	.login-content-out {
		width: 100%;
		height: 100%;
		padding-top: calc(50vh - 227px);
	}

	.login-content {
		width: 500px;
		padding: 20px;
		margin-left: calc(50% - 500px);
		background-color: rgba(255, 255, 255, 0.8);
		border: 5px solid var(--el-color-primary-light-8);
		border-radius: 5px;
		overflow: hidden;
		z-index: 1;
		position: relative;

		.login-content-main {
			margin: 0 auto;
			width: 80%;

			.login-content-title {
				color: var(--el-text-color-primary);
				font-weight: 500;
				font-size: 22px;
				text-align: center;
				letter-spacing: 4px;
				margin: 15px 0 30px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}

		.login-content-main-sacn {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			color: var(--el-text-color-primary);

			&-delta {
				position: absolute;
				width: 35px;
				height: 70px;
				z-index: 2;
				top: 2px;
				right: 21px;
				background: var(--el-color-white);
				transform: rotate(-45deg);
			}

			&:hover {
				opacity: 1;
				transition: all ease 0.3s;
				color: var(--el-color-primary) !important;
			}

			i {
				width: 47px;
				height: 50px;
				display: inline-block;
				font-size: 48px;
				position: absolute;
				right: 2px;
				top: -1px;
			}
		}
	}

	.login-footer {
		position: absolute;
		bottom: 5px;
		width: 100%;

		&-content {
			width: 100%;
			display: flex;

			&-warp {
				margin: auto;
				color: #e0e3e9;
				text-align: center;
				animation: error-num 1s ease-in-out;
			}
		}
	}
}
</style>
