<template>
	<view class="page">
		<view class="login-bg">
			<image src="../../static/loginbg.png" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="logo" style="padding-top: 90px;font-size: 30px;font-weight: bold;margin-bottom: 40px;">
				<view>
					机具设备系统
					<!-- <image src="../../static/logo1.png" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- 填写区 -->
			<view class="input-info">
				<view class=""
					style="display: flex;flex-direction: column;align-items: flex-start;margin-bottom: 20px;width: 70vw;border: 1px solid #ccc;padding: 10px 0;border-radius: 5px;">
					<input style="width: 70vw;" placeholder="请输入账号" border="surround"
						v-model="form.account"></input>
				</view>
				<view class=""
					style="display: flex;flex-direction: column;align-items: flex-start;margin-bottom: 20px;width: 70vw;border: 1px solid #ccc;padding: 10px 0;border-radius: 5px;">
					<input type="password" style="width: 70vw;" placeholder="请输入密码" border="surround"
						v-model="form.password"></input>
				</view>

				<view :class="['input-info-btn', { 'input-info-btn--disabled': !agreed }]" @click="agreed && getUserInfo()" style="width: 70vw;">
					登录
				</view>
				<view class="remember-password">
					<checkbox-group @change="onRememberPasswordChange">
						<checkbox value="remember" :checked="rememberPassword" style="transform:scale(0.8); margin-right: 10rpx;border-radius: 100rpx;margin-top: 4rpx;">
						</checkbox>
					</checkbox-group>
					<text>记住密码</text>
				</view>
				<view class="info-check">
					<checkbox-group @change="onAgreementChange">
						<checkbox value="ok" :checked="agreed" style="transform:scale(0.8); margin-right: 10rpx;border-radius: 100rpx;margin-top: 4rpx;">
						</checkbox>
					</checkbox-group>我已阅读并知晓
					<text class="blue">《用户协议》</text>
					<text class="blue">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '../../service/service';
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				form: {
					// account: "admin",
					// password: "e10adc3949ba59abbe56e057f20f883e"

					account: "",
					password: ""
				},
				agreed: false,
				rememberPassword: false // 记住密码选项
			};
		},
		onLoad() {
			// 页面加载时检查是否需要自动填充账号密码
			this.checkAutoFill();
		},
		methods: {
			// 检查并自动填充账号密码
			checkAutoFill() {
				if (service.shouldAutoFill()) {
					const loginInfo = service.getLoginInfo();
					this.form.account = loginInfo.account;
					this.form.password = loginInfo.password;
					// 自动勾选协议和记住密码
					this.agreed = true;
					this.rememberPassword = true;
				}
			},
			// 记住密码选项变化
			onRememberPasswordChange(e) {
				this.rememberPassword = Array.isArray(e.detail.value) ? e.detail.value.includes('remember') : !!e.detail.value;
				// 如果取消勾选记住密码，清除已保存的密码
				if (!this.rememberPassword) {
					service.clearLoginInfo();
				}
			},
			supplementset1() {
				uni.navigateTo({
					url: '/pages/supplementset1/supplementset1'
				})
			},
			onAgreementChange(e) {
				this.agreed = Array.isArray(e.detail.value) ? e.detail.value.includes('ok') : !!e.detail.value;
			},
			getCode: async function() {
				return new Promise((resolve, reject) => {
					uni.login({
						success: function(res) {
							if (res.code) {
								resolve(res.code);
							} else {
								//login成功，但是没有取到code
								reject('未取得code');
							}
						},
						fail: function(res) {
							reject('用户授权失败wx.login');
						}
					});
				});
			},
			getUserInfo: function() {
				if (!this.agreed) {
					uni.showToast({
						icon: "error",
						title: "请先勾选协议"
					})
					return
				}
				if (this.form.account == '') {
					uni.showToast({
						icon: "error",
						title: "请输入账号"
					})
					return
				}
				if (this.form.password == '') {
					uni.showToast({
						icon: "error",
						title: "请输入密码"
					})
					return
				}
				// if(this.form.account != 'admin'){
				// 	uni.showToast({
				// 		icon: "error",
				// 		title: "账号错误"
				// 	})
				// 	return
				// }
				// if (this.form.password != 'e10adc3949ba59abbe56e057f20f883e') {
				// 	uni.showToast({
				// 		icon: "error",
				// 		title: "密码错误"
				// 	})
				// 	return
				// }
				// this.form.password = CryptoJS.MD5(this.form.password).toString();
				var info = {
					account:this.form.account,
					password:CryptoJS.MD5(this.form.password).toString()
				}
				this.API.login(info).then(res => {
					console.log("111", res);
					service.addToken(res.data.token)
					// 只有勾选了"记住密码"才保存账号密码和登录时间
					if (this.rememberPassword) {
						service.saveLoginInfo(this.form.account, this.form.password);
					} else {
						// 如果没有勾选记住密码，清除之前保存的密码
						service.clearLoginInfo();
					}
					uni.switchTab({
						url: '/pages/home/home'
					})
				}).catch(err => {
					console.log("登录失败", err);
					// 登录失败时不清除已保存的账号密码，用户可以修改后重试
				})
				return
				uni.request({
					url: 'https://hhjj.antissoft.com/api/oauth/Login', //仅为示例，并非真实接口地址。
					method: "POST",
					data: this.form,
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log("111", res);
						service.addToken(res.data.token)
						uni.switchTab({
							url: '/pages/home/home'
						})
					},
					fail(err) {
						console.log("222", err);
					},
				});
				return
				let that = this;
				uni.getUserProfile({
					lang: 'zh',
					desc: '用户信息绑定',
					success: async function(e) {
						console.log(e);
						try {
							let code = await that.getCode();
							let data = {
								code: code,
								rawData: e.userInfo,
								__token__: that.vuex__token__
							};
							//有推荐码的话，带上
							if (that.vuex_invitecode) {
								data.invitecode = that.vuex_invitecode;
							}
							that.toLogin(data);
						} catch (e) {
							that.$u.toast(e);
						}
					},
					fail: function(e) {
						console.log(e);
						that.$u.toast(JSON.stringify(e));
					}
				});
			},
		},
	}
</script>
<style>
	/deep/ .uni-checkbox-input {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		margin-right: 0;
		border: 1px solid #888888;
	}

	/* 复选框取消默认样式 */
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 0;
		/* 重点使用这一步取消的默认样式 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	/* 重新定义复选框选中后的样式*/
	/deep/ .uni-checkbox-input-checked::before {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background: #477EFF url(../../static/gou.png) no-repeat center !important;
		border: 1px solid #477EFF;
	}
</style>
<style scoped lang="scss">
	@import 'login.scss';
</style>