<template>
	<div class="login-container">
		<el-card class="login-card">
			<div class="logo">
				<el-icon :size="60" color="#409EFF">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M22 16s-5.8-4-10-7l-2 2-2-2c-4.2 3-10 7-10 7l10 7 10-7z"/>
						<path d="M12 9v6"/>
						<path d="M15 12h-6"/>
					</svg>
				</el-icon>
				<h1>无人机管理控制平台</h1>
			</div>

			<el-form
				:model="form"
				:rules="rules"
				ref="loginForm"
				@submit.prevent="handleLogin"
				class="login-form"
			>
				<el-form-item prop="username">
					<el-input
						v-model="form.username"
						placeholder="请输入用户名"
						prefix-icon="User"
						size="large"
					/>
				</el-form-item>

				<el-form-item prop="password">
					<el-input
						v-model="form.password"
						type="password"
						placeholder="请输入密码"
						prefix-icon="Lock"
						size="large"
						show-password
					/>
				</el-form-item>

				<el-form-item>
					<el-checkbox v-model="form.remember">记住我</el-checkbox>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						native-type="submit"
						size="large"
						class="login-btn"
						:loading="loading"
					>
						登 录
					</el-button>
				</el-form-item>

				<div class="links">
<!--					<el-link type="info" :underline="false">忘记密码?</el-link>-->

				</div>
			</el-form>
		</el-card>

		<div class="copyright">
			© 2025 无人机管理控制平台 版权所有
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const loginForm = ref<FormInstance>()
const loading = ref(false)

const form = reactive({
	username: '',
	password: '',
	remember: false
})
const rules = reactive<FormRules>({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
	]
})

const handleLogin = async () => {
	try {
		loading.value = true
		await loginForm.value?.validate()

		// 这里添加实际的登录逻辑
		console.log('登录信息:', form)
		// 模拟登录过程
		await new Promise(resolve => setTimeout(resolve, 1000))
		// 登录成功后跳转
		router.push('/')
	} catch (error) {
		console.error('登录失败:', error)
	} finally {
		loading.value = false
	}
}
</script>

<style scoped>
.login-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #0f2c59 0%, #1a4b8c 100%);
	padding: 20px;
}

.login-card {
	width: 100%;
	max-width: 420px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	border: none;
}

.login-card :deep(.el-card__body) {
	padding: 40px;
}

.logo {
	text-align: center;
	margin-bottom: 30px;
}

.logo h1 {
	font-size: 1.5rem;
	color: #303133;
	margin: 15px 0 0;
	font-weight: 500;
}

.login-form {
	margin-top: 20px;
}

.login-btn {
	width: 100%;
	margin-top: 10px;
}

.links {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}

.copyright {
	margin-top: 30px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	text-align: center;
}

/* 调整Element Plus组件在暗背景下的显示 */
:deep(.el-input__wrapper) {
	background-color: #fff;
}

:deep(.el-checkbox__label) {
	color: #606266;
}
</style>

<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
