<template>
	<view class="wrap login">
		<!-- 顶部：背景图 -->
		<view class="login-header">
			<image class="login-header__bg" src="/static/images/bg.jpg" mode="widthFix" />
		</view>

		<!-- 登录表单卡片 -->
		<view class="login-card">
			<view class="login-card__brand">
				<image class="login-logo" src="/static/images/logo.png" mode="aspectFit" />
				<view class="sys-name">管道安装管理系统</view>
			</view>
			<view class="login-form">
				<u-form :model="form" ref="uFormRef">
					<u-form-item prop="account">
						<template #leftIcon>
							<u-icon name="account" size="32" color="#2979ff" />
						</template>
						<u-input v-model="loginForm.account" placeholder="请输入账号" />
					</u-form-item>
					<u-form-item prop="password">
						<template #leftIcon>
							<u-icon name="lock" size="32" color="#2979ff" />
						</template>
						<u-input v-model="loginForm.password" type="password" :password-icon="true" placeholder="请输入密码" />
					</u-form-item>
					<view class="u-margin-top-60">
						<u-button type="primary" :loading="loading" @click="fetchLogin">登录</u-button>
					</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useUserStore } from '@/store';
const userStore = useUserStore();
const {loginForm, fetchLogin} = userStore;
</script>
