<template>
	<view class="container">
		<view class="form">
			<input class="input" type="text" v-model="username" placeholder="请输入用户名" />
			<input class="input" type="password" v-model="password" placeholder="请输入密码" />
			<button class="submit-btn" @click="handleLogin">登录</button>
		</view>
	</view>
	<my-toast ref="toast" />
</template>

<script setup>
import { ref } from 'vue'
import { useConfigStore } from '../../stores/config'
import { userApi } from '../../api/user'

const useConfig =useConfigStore()

const username = ref('')
const password = ref('')

const toast = ref(null)

const handleLogin = () => {
	if (!username.value || !password.value) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		})
		return
	}
	// TODO: 调用登录接口
	console.log('登录信息:', username.value, password.value,useConfig.getApiBaseUrl())
	//userApi.login(username.value,password.value,true)
	uni.request({
		url: useConfig.getApiBaseUrl()+"/users/login",
		method: 'POST',
		timeout:1000,
		header: {
		  'Content-Type': 'application/json'
		},
		data:{
			"username": username.value,
			"password": password.value,
			"remember": true
		},
		  success: (res) => {
			  console.log('成功', res)
			  switch(res.statusCode){
				  case 200:
					  toast.value.success('成功')
				  break;
				  default:
					toast.value.error('服务异常')
				  break
			  }
		    
		  },
		  fail: (err) => {
		    console.log('失败', err)
			toast.value.error('网异常')
		  },
	})
	
}
</script>

<style scoped>
.container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f5f5f5;
	padding: 40rpx;
}

.form {
	width: 100%;
}

.input {
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	font-size: 28rpx;
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #007AFF;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
</style>
