<template>
	<view class="login-container">
		<view class="header">
			<view class="title">医德医风系统</view>
			<view class="subtitle">欢迎登录</view>
		</view>
		
		<view class="form-container">
			<!-- 账号输入 -->
			<view class="input-group">
				<view class="input-label">帐号</view>
				<view class="input-wrapper">
					<uni-easyinput class="input" trim="all" v-model="username" placeholder="请输入账号"></uni-easyinput>
				</view>
			</view>
			
			<!-- 密码输入 -->
			<view class="input-group">
				<view class="input-label">密码</view>
				<view class="input-wrapper">
					<uni-easyinput class="input" type="password" trim="all" v-model="password" placeholder="请输入密码"></uni-easyinput>
				</view>
			</view>
			
			<!-- 登录按钮 -->
			<view class="btn-container">
				<button @click="loginSubmit" class="login-btn">登 录</button>
			</view>
		</view>
		
		<view class="footer">
			<text class="footer-text">© 2023 医德医风系统</text>
		</view>
	</view>
</template>

<script>
	import {
		userLogin,
	} from '@/util/api.js';
	export default {
		data() {
			return {
				username: "",
				password: "",
			}
		},
		onLoad(){
			const userInfo = uni.getStorageSync('userInfo');
			if(userInfo){
				uni.redirectTo({
					url: '/pages/index/complaint'
				})
			}
		},
		methods: {
			loginSubmit() {
				userLogin({
					username: this.username,
						password: this.password
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: '登陆失败！',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.setStorageSync('userInfo', res.data);
							uni.showToast({
								title: '登陆成功！',
								icon: 'none',
								duration: 2000
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/complaint'
								})
							}, 1000)
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
		}
	}
</script>

<style>
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f7fa;
}

.header {
	padding: 80rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(to bottom, #4d5eff, #6c7bff);
}

.logo {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
}

.title {
	font-size: 44rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
}

.subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.form-container {
	margin: -60rpx 40rpx 0;
	padding: 60rpx 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 40rpx;
}

.input-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.input-wrapper {
	border-bottom: 1px solid #e0e0e0;
}

.input {
	height: 90rpx;
}

.btn-container {
	margin-top: 60rpx;
}

.login-btn {
	background: linear-gradient(to right, #4d5eff, #6c7bff);
	color: #ffffff;
	border-radius: 50rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 8rpx 16rpx rgba(77, 94, 255, 0.3);
	border: none;
}

.login-btn:active {
	background: linear-gradient(to right, #3a4ad9, #5967e6);
	transform: translateY(2rpx);
}

.footer {
	margin-top: auto;
	padding: 40rpx 0;
	text-align: center;
}

.footer-text {
	font-size: 24rpx;
	color: #999;
}
</style>