<template>
	<div class="login-container flx-center">
		<div class="login-box">
			<div class="login-left">
				<img src="../../assets/images/login_left.png" alt="login" />
			</div>
			<div class="login-form">
				<div style="display:flex;flex-direction: column;align-items: center;height: auto;margin-bottom: 15px;">
					<img src="@/assets/images/logo.png" alt="" style="width: 50%;" />
				</div>

				<div class="login-logo">
					<!-- <h2 class="logo-text">水务感知装备研发运营管理平台</h2> -->
					<h2 class="logo-text">{{ state.loginTitle }}</h2>
				</div>
				<LoginForm />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="login">
import { onMounted, reactive } from "vue";
import LoginForm from "./components/LoginForm.vue";

const state = reactive({
	loginTitle: ''
});

onMounted(() => {
	/**
	 * 客户从未登陆显示中性名称，内部用户显示水务感知装备研发运营管理平台
	 * 太原煤气登陆过显示太原煤气公司边缘AI抄表器查询系统,其它客户仍显示水务感知装备研发运营管理平台
	 */
	const unitCode = localStorage.getItem('UnitCode');
	const userType = localStorage.getItem('UserType');
	state.loginTitle = unitCode === '39ec081ceb9740afad8fe14c4ea1349f'
		? '太原天然气有限公司边缘AI抄表器查询系统'
		: userType === '0'
			? '水务感知装备研发运营管理平台'
			: '边缘AI抄表器';
	document.title=state.loginTitle;
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
