<template>
	<view class="content">
		<view style="height:10vh;width:100%"></view>
		
		<!-- Logo -->
		<view class="a1 re-fcolor" @click="clickLogo">
			<image class="a1" src="/static/re/logo.png" mode="scaleToFill"></image>
		</view>
		
		<!-- 登录表单 -->
		<view class="content">
			<!-- 手机号输入 -->
			<view class="a4 mb22">
				<input 
					type="number" 
					maxlength="11" 
					placeholder="请输入手机号" 
					v-model="phoneNumber" 
					@input="onPhoneInput"
				/>
			</view>
			
			<!-- 验证码输入 -->
			<view class="a4 mb22 b-relative">
				<input 
					type="number" 
					maxlength="6" 
					placeholder="请输入验证码" 
					v-model="verifyCode" 
					@input="onCodeInput"
				/>
				<view v-if="canGetCode" class="a0-bar a0">
					<view class="clicked" style="color:#F40000" @click="getVerifyCode">获取验证码</view>
				</view>
				<view v-if="!canGetCode" class="a0-bar a0">
					<view style="color:#aaaaaa">{{ countdown }}s</view>
				</view>
			</view>
			
			<!-- 登录按钮 -->
			<view class="a5 mt56 clicked" @click="login">
				<button>登陆</button>
			</view>
			
			<!-- 注册链接 -->
			<view class="a9 mt32">
				<text class="clicked" @click="driverRegister">司机注册</text>/ 
				<text class="clicked" @click="enterpriseRegister">企业注册</text>
			</view>
			
			<!-- 提示文字 -->
			<view class="a8 mt20">
				请根据自身角色先注册后再登录使用
			</view>
			
			<!-- 协议同意 -->
			<view class="a6 mt40">
				<view @click="toggleAgreement" :class="['a7', 'clicked', isAgreed && 'active']">✓</view>
				已同意 
				<text class="a6-span clicked" @click="showPrivacyPolicy">《隐私策略》</text>
				<text class="a6-span clicked" @click="showUserAgreement">《用户协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LoginLogin',
		data() {
			return {
				phoneNumber: '',
				verifyCode: '',
				canGetCode: true,
				countdown: 60,
				isAgreed: false,
				countdownTimer: null
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '登录'
			});
		},
		onUnload() {
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		},
		methods: {
			clickLogo() {
				console.log('点击Logo');
			},
			onPhoneInput(e) {
				this.phoneNumber = e.detail.value;
			},
			onCodeInput(e) {
				this.verifyCode = e.detail.value;
			},
			getVerifyCode() {
				if (!this.phoneNumber) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return;
				}
				
				// 开始倒计时
				this.canGetCode = false;
				this.countdown = 60;
				this.countdownTimer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.countdownTimer);
						this.canGetCode = true;
						this.countdown = 60;
					}
				}, 1000);
				
				uni.showToast({ title: '验证码已发送', icon: 'success' });
			},
			login() {
				if (!this.phoneNumber) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!this.verifyCode) {
					uni.showToast({ title: '请输入验证码', icon: 'none' });
					return;
				}
				if (!this.isAgreed) {
					uni.showToast({ title: '请先同意用户协议', icon: 'none' });
					return;
				}
				
				// 模拟登录成功
				uni.showToast({ title: '登录成功', icon: 'success' });
				
				// 存储登录状态
				uni.setStorageSync('isLogin', true);
				uni.setStorageSync('userPhone', this.phoneNumber);
				uni.setStorageSync('role', '0'); // 默认角色
				
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1500);
			},
			driverRegister() {
				uni.navigateTo({
					url: '/pages_order/login/driver'
				});
			},
			enterpriseRegister() {
				uni.navigateTo({
					url: '/pages_order/login/enter'
				});
			},
			toggleAgreement() {
				this.isAgreed = !this.isAgreed;
			},
			showPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages_order/login/agreementa'
				});
			},
			showUserAgreement() {
				uni.navigateTo({
					url: '/pages_order/login/agreementb'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.a1 {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
		display: block;
	}
	
	.re-fcolor {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.a4 {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		
		input {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
		}
	}
	
	.mb22 {
		margin-bottom: 22rpx;
	}
	
	.mt56 {
		margin-top: 56rpx;
	}
	
	.mt32 {
		margin-top: 32rpx;
	}
	
	.mt20 {
		margin-top: 20rpx;
	}
	
	.mt40 {
		margin-top: 40rpx;
	}
	
	.b-relative {
		position: relative;
	}
	
	.a0-bar {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.a0 {
		font-size: 26rpx;
	}
	
	.clicked {
		cursor: pointer;
	}
	
	.a5 {
		width: 100%;
		height: 80rpx;
		
		button {
			width: 100%;
			height: 100%;
			background-color: #007AFF;
			color: #fff;
			border-radius: 8rpx;
			font-size: 32rpx;
			border: none;
		}
	}
	
	.a9 {
		text-align: center;
		font-size: 28rpx;
		color: #007AFF;
	}
	
	.a8 {
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}
	
	.a6 {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
	}
	
	.a7 {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: transparent;
		
		&.active {
			background-color: #007AFF;
			border-color: #007AFF;
			color: #fff;
		}
	}
	
	.a6-span {
		color: #007AFF;
		margin: 0 5rpx;
	}
</style>