<template>
	<view class="container">
		<view class="input-box">
			<uv-form labelPosition="left" :model="state.userInfo" :rules="state.rules" labelWidth="60" ref="formRef"
				:labelStyle="{ fontSize: '28rpx' }">
				<view style="margin-bottom: 60rpx;">
					欢迎登录XXXXXXXX!
				</view>
				<uv-form-item label="姓名" prop="name" borderBottom>
					<uv-input v-model="state.userInfo.name" placeholder="请输入姓名" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="手机号" prop="phonenumber" borderBottom>
					<uv-input v-model="state.userInfo.phonenumber" placeholder="请输入手机号" border="none"></uv-input>
				</uv-form-item>
				<view @click="loginHandler" class="login-btn">
					登 录
				</view>
			</uv-form>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		loginApi
	} from "@/api/index.js"

	const formRef = ref(null)

	const state = reactive({
		userInfo: {
			name: "",
			phonenumber: ""
		},
		rules: {
			'name': {
				type: 'string',
				required: true,
				message: '请输入姓名',
				trigger: ['blur', 'change']
			},
			'phonenumber': [{
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			}, {
				validator: (rule, value, callback) => {
					const mobileRegexLoose = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
					return mobileRegexLoose.test(value);
				},
				message: '手机号码不正确',
				trigger: ['blur'],
			}],
		}
	})

	const loginHandler = async () => {
		try {
			await formRef.value.validate()
			
			uni.showLoading({
				title: "登录中",
				mask: true
			})

			const {
				token
			} = await loginApi(state.userInfo)
			uni.hideLoading()
			uni.showToast({
				icon: 'success',
				title: '登录成功'
			})
			uni.setStorageSync('token', token)
			uni.navigateBack()
		} finally {
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(135deg, #eaecfb 10%, #f6f7fb 90%);
		background-color: red;
		height: 100vh;
		overflow-y: auto;
		padding: 0 28rpx;
	}

	.input-box {
		position: relative;
		margin-top: 120rpx;
		padding: 48rpx;
		padding-top: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 0 20rpx #eee;
	}

	::v-deep .uv-line {
		border-bottom-style: dashed !important;
	}

	.login-btn {
		margin-top: 80rpx;
		background-color: #8386ef;
		color: #fff;
		text-align: center;
		padding: 16rpx 0;
		border-radius: 20rpx;
	}
</style>