<template>
	<div style="margin-top: 30vh">
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field style="font-size: 16px" v-model="username" name="用户名" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field style="font-size: 16px" v-model="password" type="password" name="密码" label="密码"
					placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from "vue";
	import { showFailToast, showSuccessToast } from "vant";
	import { postAction } from "../../common/http";

	onMounted(() => {
	})
	//手机
	const username = ref('');
	const password = ref('');
	const onSubmit = () => {
		let data = {
			'username': username.value,
			'password': password.value,
		}
		postAction('/v1/auth/login', data, { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }).then((res : any) => {
			if (res.code === 200) {
				const token = res.data;
				localStorage.setItem("token", token);
				showSuccessToast('登录成功！')
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 500)
			} else {
				showFailToast(res.msg)
			}
		})
	};
</script>

<style lang="scss" scoped>
	.login-box {
		width: 100vm;
		height: 100vh;
		background: url(../assets/loginBackground.png);
		text-align: center;
		background-size: cover;
		overflow: hidden;

		.login-form {
			width: 500px;
			margin: 200px auto;
			background-color: #ffffff;
			padding: 30px;
			border-radius: 20px;

			.login-button {
				width: 33%;
				margin-left: 26%;
				margin-right: 33%;
			}

			h2 {
				margin-bottom: 5px;
			}
		}
	}
	::v-deep .van-field__control {
		text-align: center;
		font-size: 16px;
	}
</style>