<template>
	<div>
		<el-container class="common-layout">

			<el-row style="width: 100%; display: flex; justify-content: center;">
				<el-col :span="9" class="left">

				</el-col>
				<el-col :span="15" class="right" v-loading="loading">
					<div class="right_top">
						<div>
							<el-switch v-model="isDark" inline-prompt active-color="var(--el-fill-color-dark)"
								inactive-color="var(--el-color-primary)" active-action-icon="Moon"
								inactive-action-icon="Sunny" @change="toggleDark" />
						</div>
					</div>
					<div style="margin-top: -100px;">
											<div style="font-size: 36px; margin-left: -100px;margin-bottom: 50px;color:#009ea7">海南现代妇女儿童医院体检预约平台</div>
											<el-form style="width: 400px;" ref="ruleFormRef" status-icon class="demo-ruleForm">
												<el-form-item>
													<span style="font-size: 22px;">登录您的账户</span>
												</el-form-item>
												<el-form-item>
													<el-input v-model.number="username" ref="usernameRef" @keyup.enter="focusNextTo()"
														:prefix-icon="User" placeholder="用户名" size="large" />
												</el-form-item>
												<el-form-item>
													<el-input v-model="pwd" type="password" ref="passwordRef" @keyup.enter="login()"
														autocomplete="off" placeholder="密码" size="large" :prefix-icon="Lock" />
												</el-form-item>
												<el-form-item>
													<el-button style="width: 100%;background-color: #009ea7;border:#009ea7" type="primary" @click="login(ruleFormRef)"
														size="large">登录</el-button>
												</el-form-item>
												<div style="height: 160px;"></div>
											</el-form>
										</div>
					<div class="right_bottom"></div>
				</el-col>
			</el-row>

		</el-container>
	</div>
</template>

<script setup>
	import {
		Login
	} from "@/api/api.js";
	import {
		ElMessage
	} from 'element-plus'
	import {
		ref,nextTick,onMounted
	} from 'vue'
	import {
		Lock,
		User,
		Iphone,RefreshRight,Key
	} from '@element-plus/icons-vue'
	import {
		useToggle
	} from '@vueuse/shared'
	import {
		useDark
	} from "@vueuse/core";


	const isDark = useDark()
	const toggleDark = () => useToggle(isDark)

	let loading=ref(false);
	let username = ref('')
	let pwd = ref('')

	let login = () => { //登录
		if (username.value == '' || pwd.value == '') return ElMessage.error('用户名和密码不能为空')
		let data = { //传参
			username: username.value,
			password: pwd.value,
		}
		loading.value=true
		//调用登录接口
		Login(data).then(res => {
			loading.value=false
			if (res.data.status == 'ok') {
				sessionStorage.setItem('token', res.data.token);
				sessionStorage.setItem('refreshToken', res.data.refresh_token);
				// sessionStorage.setItem('tk', JSON.stringify(res.data.tk));
				var token = sessionStorage.getItem('token');
				if (token == res.data.token) {
					window.location.href = "./#/dashboard"
				}
			} else {
				ElMessage.error(res.data.msg)

			}
		})

	}

	let usernameRef=ref(null);
	let passwordRef=ref(null);
	const focusNextTo=()=>{
		passwordRef.value.focus()
	}
	onMounted(()=>{
		nextTick(()=>{
			usernameRef.value.focus()
		})
	})
	

</script>

<style scoped>
	.common-layout {
		/* border: 10px solid red; */
		width: 100%;
		height: 100vh;

	}

	.common-layout .el-main {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: var(--color-table-th-background);
		background-image: url('../assets/loginBackg.png');
		background-size: 100%;
		background-repeat: no-repeat;

		background-position: center center;


	}

	.right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}

	.right_top {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
</style>