<template>
	<view class="content">
		<view class="header">
			<image src="/static/index/index_bg.png" class="bg-image"></image>
			<view class="padding login">
				<view class="text-xl text-black text-bold">账号登录</view>
				<view class="padding-top">欢迎登录三查一曝光平台</view>
			</view>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/index/phone.png"></image>
				<input class="sl-input" v-model="username" type="text" placeholder="请输入用户名" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/index/lock.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="请输入密码" :password="showPassword"/>
				<image class="eye-img" :src="showPassword ? '/static/index/cl.png' : '/static/index/op.png'" @click="changePassword"></image>
			</view>
			<!-- <view class="agreement">
				<navigator url="reg" open-type="navigate" class="link">注册成员账号</navigator>
				<navigator url="forget" open-type="navigate" class="link">忘记密码?</navigator>
			</view> -->
		</view>
		
		<view class="padding-lr">
			<button class="button-login" hover-class="button-hover" @click="handleLogin">
				登录
			</button>
			<!-- <view class="button-login" hover-class="button-hover" @tap="handleLogin('member')">
				<text>登录普通成员</text>
			</view> -->

			<!-- <view class="button-report margin-top" hover-class="button-hover" @tap="goToReport">
				<image src="/static/index/photos.png" class="icon-image"></image>
				<text>随手拍举报</text>
			</view> -->
			
			<!-- <view class="protocol-box">
				<navigator url="agreement" open-type="navigate" class="protocol-link">《用户协议》</navigator>
			</view> -->
		</view>

		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { login } from '@/request/api.js';

// 响应式数据
const username = ref('');
const password = ref('');
const showPassword = ref(true);

// 方法定义
const changePassword = () => {
	showPassword.value = !showPassword.value;
}

const getPhoneNumber = () => {
	// 获取手机号的逻辑，可以接入一键登录SDK
	uni.showToast({
		title: '获取手机号功能待实现',
		icon: 'none'
	});
}

const handleLogin = async () => {
	console.log('点击登录按钮');
	console.log('用户名:', username.value);
	console.log('密码:', password.value);
	
	// 验证用户名
	if (!username.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入用户名'
		});
		return;
	}
	
	// 验证密码
	if (!password.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入密码'
		});
		return;
	}
	
	try {
		console.log('开始调用登录接口...');
		
		const res = await login({
			username: username.value,
			password: password.value
		});
		
		console.log('登录接口返回:', res);
		
		if (res.code === 0) {
			// 登录成功，保存token和用户信息
			if (res.data.token) {
				uni.setStorageSync('token', res.data.token);
			}
			// 保存用户信息
			const userInfo = {
				userId: res.data.userId,
				username: res.data.username,
				nickName: res.data.nickName,
				deptId: res.data.deptId,
				deptName: res.data.deptName,
				role:res.data.role,
				isDept:res.data.isDept
			};
			uni.setStorageSync('userInfo', JSON.stringify(userInfo));
			
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});
			
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}, 1500);
		} else {
			uni.showToast({
				title: res.msg || '登录失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('登录失败:', error);
		uni.showToast({
			title: '网络请求失败',
			icon: 'none'
		});
	}
}

// const handleLogin = () => {
// 	if (phone.value.length != 11) {
// 		uni.showToast({
// 			icon: 'none',
// 			title: '手机号不正确'
// 		});
// 		return;
// 	}
// 	if (password.value.length < 6) {
// 		uni.showToast({
// 			icon: 'none',
// 			title: '密码不正确'
// 		});
// 		return;
// 	}
	
// 	// 登录请求
// 	uni.request({
// 		url: 'http://example.com/api/login',
// 		data: {
// 			phone: phone.value,
// 			password: password.value
// 		},
// 		method: 'POST',
// 		dataType: 'json',
// 		success: (res) => {
// 			if (res.data.code != 200) {
// 				uni.showToast({
// 					title: res.data.msg || '登录失败',
// 					icon: 'none'
// 				});
// 			} else {
// 				// 登录成功，保存token等信息
// 				uni.setStorageSync('token', res.data.data.token);
// 				uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo));
				
// 				// 返回上一页或首页
// 				uni.navigateBack({
// 					delta: 1,
// 					fail: () => {
// 						uni.switchTab({
// 							url: '/pages/index/index'
// 						});
// 					}
// 				});
// 			}
// 		},
// 		fail: () => {
// 			uni.showToast({
// 				title: '网络请求失败',
// 				icon: 'none'
// 			});
// 		}
// 	});
// }

	const goToReport = () => {
	//跳转到主页面  跳到分包 
	uni.navigateTo({
		url: '/subpackages/suishoupai/pages/index/index'
	})
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #FFFFFF;
}

.header {
	width: 100%;
	position: relative;
	margin-bottom: 0;
	
	.bg-image {
		width: 100%;
		vertical-align: bottom;
	}
}

.login {
	position: absolute;
	top: 50%;
	color: #666666;
	font-size: 28rpx;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;
	background-color: #FFFFFF;
	margin-top: -2rpx; /* 消除可能的间隙 */
	
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		background: #F5F7FB;
		border-radius: 16rpx;
		border: 2rpx solid #F5F7FB;
		margin-top: 30rpx;
		padding: 0 30rpx;
		
		.img {
			width: 30rpx;
			height: 36rpx;
		}
		
		.sl-input {
			flex: 1;
			text-align: left;
			font-size: 32rpx;
			margin-left: 16rpx;
		}
		
		.eye-img {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.agreement {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	margin-top: 30rpx;
	color: #3D83F6;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
	
	.link {
		font-size: 30rpx;
		color: #3D83F6;
		
		&:active {
			opacity: 0.8;
		}
	}
}

.padding-lr {
	padding-left: 70rpx;
	padding-right: 70rpx;
}

.button-login {
	color: #FFFFFF;
	font-size: 34rpx;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(90deg, #3E95F1 0%, #4269F5 100%);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 130rpx;
	border: none;
	
	&::after {
		border: none;
	}
}

.button-report {
	color: #FFFFFF;
	font-size: 34rpx;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(90deg, #FF7878 0%, #F2505B 100%);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.margin-top {
	margin-top: 30rpx;
}

.button-hover {
	opacity: 0.8;
}

.text-blue {
	color: #3D83F6;
	font-size: 28rpx;
}

.icon-image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}

.text-xl {
	font-size: 36rpx;
}

.text-black {
	color: #000000;
}

.text-bold {
	font-weight: bold;
}

.padding {
	padding: 30rpx;
}

.padding-top {
	padding-top: 15rpx;
}

.protocol-box {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
	
	.protocol-link {
		font-size: 28rpx;
		color: #3D83F6;
		text-decoration: underline;
	}
}
</style>
