<template>
	<view class="container">
		<view class="title">
			<text class="t">欢迎登录</text>
		</view>
		<view class="form-wrap">
			<view class="row">
				<u--input
					v-model="form.username"
					clearable
					prefixIcon="account-fill"
					prefixIconStyle="font-size: 26px;color:#999;"
					placeholder="请输入账号"
					border="bottom"
					:customStyle="{ height: '100rpx' }"
				></u--input>
			</view>
			<view class="row">
				<u--input
					v-model="form.password"
					type="password"
					clearable
					prefixIcon="lock-fill"
					prefixIconStyle="font-size: 26px;color:#999;"
					placeholder="请输入密码"
					border="bottom"
					:customStyle="{ height: '100rpx' }"
				></u--input>
			</view>
			<view class="row">
				<u-button type="primary" class="btn" size="large" :loading="loading" loading-text="登录中..." @click="submintHandle">登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api';
export default {
	data() {
		return {
			loading: false,
			form: {
				username: '',
				password: ''
			}
		};
	},
	methods: {
		async submintHandle() {
			try {
				if (!this.form.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				this.loading = true;
				const res = await login(this.form);
				this.useStorage.set('token', res.data.token);
				this.useStorage.set('userInfo', res.data.user);
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}, 1000);
			} catch (e) {
				this.loading = false;
				console.log(e);
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.u-button__loading-text {
	color: #fff;
}
</style>
<style scoped lang="scss">
.container {
	background-color: #fff;
	padding: 0 $paddingSize * 3 $paddingSize * 12;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.title {
	.t {
		font-size: 76upx;
		font-weight: bold;
		color: #000;
	}
}
.form-wrap {
	.row {
		padding-top: 100upx;
	}
}
</style>
