<template>
	<view class="page" :style="{backgroundImage:`url(https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/homePhoto.png)`}">
		<view style="height: 100vh;width: 100%;position: fixed;bottom: 0;left: 0;">
				<!-- 修改切换-->
			<view style="width: 25%;margin: 0 auto;margin-top: 15vh;">
				<image src="../../static/login/logo.jpg" style="width: 100%;border-radius: 18%;" mode="widthFix"></image>
			</view>
		<!-- 	<view style="width: 80%;margin: 0 auto;margin-top: 15vh;">
				<image src="/static/login/logo2.png" style="width: 100%;border-radius: 18%;" mode="widthFix"></image>
			</view> -->
			<!-- 填写区 -->
			<view class="input-info" style="margin-top: 8vh;">
				<view class="info">
					<view class="info-icon">
						<image src="../../static/login/icon1.png" mode="heightFix"></image>
					</view>
					<input type="text" v-model="formData.username" placeholder="请输入用户名">
					<view class="more"></view>
				</view>
				<view class="info">
					<view class="info-icon">
						<image src="../../static/login/icon2.png" mode="heightFix"></image>
					</view>
					<input v-if="!showPassword" type="password" v-model="formData.password" placeholder="请输入密码">
					<input v-else type="text" v-model="formData.password" placeholder="请输入密码">
					<view class="more">
						<u-icon 
							:name="showPassword ? 'eye-off' : 'eye'" 
							size="20" 
							color="#0FBB59"
							@click="togglePassword"
						></u-icon>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn-info">
				<view class="btn" @click="handleLogin" :class="{ 'btn-disabled': loading }">
					<text>{{ loading ? '登录中...' : '登录' }}</text>
				</view>
			</view>

		</view>
		<view
			style="position: fixed;left: 0;bottom: 49rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;width: 100%;">
			<view style="display: flex;align-items: center;font-size: 24rpx;color: #333;">
				<u-checkbox-group @change="checkboxGroupChange" shape="circle">
					<u-checkbox active-color="#3f9b6a" v-model="checked" name="tongyi" :label-disabled="true"></u-checkbox>
				</u-checkbox-group>
				<text style="margin-left: 8rpx;">我已阅读并同意</text>
				<text style="color:#3f9b6a;margin-left: 4rpx;" @click="goyinsi">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
import md5 from '@/service/md5.js'
export default {
	data() {
		return {
			checked: null,
			showTong: false,
			loading: false,
			showPassword: false,
			formData: {
				username: '',
				password: ''
			}
		}
	},
	onLoad() {
		// 页面加载时的初始化
	},
	methods: {
		goyinsi() {
			uni.navigateTo({
				url: '/pages/privacy/privacy'
			});
		},
		checkboxGroupChange(val) {
			this.showTong = val[0]
		},
		// 切换密码显示
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		// 表单验证
		validateForm() {
			if (this.showTong != 'tongyi') {
				uni.showToast({
					title: '请阅读并同意隐私政策',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.password.trim()) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return false
			}
			return true
		},
		async getuser() {
			await this.API.getCurrentUser().then(res => {
				console.error(res)
				if (res.code === 200) {
					let date = new Date();
					uni.setStorageSync('userInfo', res.data.userInfo)
				}
			})
		},
		// 处理登录
		async handleLogin() {
			if (!this.validateForm()) {
				return
			}
			
			this.loading = true
			
			try {
				// 对密码进行MD5加密
				const password = md5.hex_md5(this.formData.password)
				const res = await this.API.AppLogin({
					account: this.formData.username,
					password: password
				})
				
				if (res.code === 200 || res.success) {
					// 登录成功
					const { token } = res.data
					
					// 保存token和用户信息
					uni.setStorageSync('token', token)
					await this.getuser()
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})

					// 延迟跳转
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						})
					}, 1500)
					
				} else {
					// 登录失败
					uni.showToast({
						title: res.message || '登录失败，请重试',
						icon: 'none'
					})
				}
				
			} catch (error) {
				console.error('登录失败:', error)
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import './login.scss';

.btn-disabled {
	background-color: #ccc !important;
	opacity: 0.6;
}
</style>
