<template>
	<view class="login-container">
		<view class="login-box">
			<view class="title">欢迎登录</view>
			
			<view class="form-item">
				<view class="label">手机号</view>
				<input 
					class="input" 
					type="number" 
					v-model="phone" 
					placeholder="请输入手机号"
					maxlength="11"
				/>
			</view>
			
			<view class="form-item">
				<view class="label">验证码</view>
				<input 
					class="input" 
					type="number" 
					v-model="code" 
					placeholder="请输入验证码"
					maxlength="6"
				/>
			</view>
			
			<button 
				class="login-btn" 
				:class="{ 'disabled': isLoading }" 
				:disabled="isLoading" 
				@click="handleLogin"
			>
				{{ isLoading ? '登录中...' : '登录' }}
			</button>
		</view>
	</view>
</template>

<script>
import api from '../../utils/api.js'
import storage from '../../utils/storage.js'

export default {
	data() {
		return {
			phone: '',
			code: '',
			isLoading: false
		}
	},
	
	methods: {
		async handleLogin() {
			if (!this.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				})
				return
			}
			
			if (!this.code) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				return
			}
			
			this.isLoading = true
			
			try {
				const res = await api.login(this.phone, this.code)
				
				if (res.data && res.data.accessToken) {
					storage.setToken(res.data.accessToken)
					
					const userInfo = {
						...res.data,
						phone: this.phone
					}
					storage.setUserInfo(userInfo)
					
					try {
						const questionRes = await api.getQuestion()
						if (questionRes.data) {
							storage.setQuestion(questionRes.data)
						}
					} catch (questionError) {
						console.error('获取题目失败:', questionError)
					}
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.message || '登录失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('登录失败:', error)
			} finally {
				this.isLoading = false
			}
		}
	}
}
</script>

<style scoped>
.login-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx;
}

.login-box {
	width: 100%;
	max-width: 600rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 60rpx;
}

.form-item {
	margin-bottom: 40rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.input {
	width: 100%;
	height: 88rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 32rpx;
	box-sizing: border-box;
	transition: all 0.3s;
}

.input:focus {
	border-color: #667eea;
}

.login-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	font-size: 32rpx;
	border-radius: 12rpx;
	border: none;
	margin-top: 20rpx;
}

.login-btn.disabled {
	opacity: 0.6;
}
</style>
