<template>
	<view class="container">
		<!-- <u-navbar :border-bottom="false" title="登录"></u-navbar> -->
		<view>
			<view class="bold mim-font-24">您好</view>
			<view class="p mim-font-16">欢迎登录爱罗山程序管理后台</view>
			<view style="margin-top:144rpx;">
				<view class="storm mim-flex-wrap-left">
					<label class="mim-font-16 bold">用户名：</label>
					<u-input v-model="form.username" type="text" placeholder-style='color: #BDBDBD;' height="80"
						:custom-style="customStyle" style="width: 75%;" />
				</view>
				<view class="storm mim-flex-wrap-left">
					<label class="mim-font-16 bold">密码：</label>
					<u-input v-model="form.password" type="password" :password-icon="true"
						placeholder-style='color: #BDBDBD;' height="80" :custom-style="customStyle"
						style="width: 75%;" />
				</view>
			</view>
			<view class="mim-flex-wrap-left" style="margin-top: 40rpx;">
				<u-checkbox v-model="checked" active-color="#DE2E27" size='24' label-size='28'>记住密码</u-checkbox>
			</view>
			<view class="mim-button btn bold mim-font-16" :class="{ disabled: isButtonDisabled }" @click="login">
				登录
			</view>
			<view class="agreement">
				<u-image :src="radio ? '../../../static/icon/radio_true.png' : '../../../static/icon/radio.png'"
					width="24rpx" height="24rpx" mode="widthFix" @click="radio = !radio"></u-image>
				<view style="margin-left: 12rpx;">
					<text>我已阅读并同意</text>
					<text style="color: #DE2E27;" @click="goPage('1')">《用户服务协议》</text>
					<text>与</text>
					<text style="color: #DE2E27;" @click="goPage('2')">《隐私协议》</text>
				</view>
			</view>
		</view>
		<u-modal v-model="show" content="请先阅读并勾选用户协议及隐私协议" :show-cancel-button="true" @cancel="show = false"
			@confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		Base64
	} from 'js-base64';
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				checked: false,
				radio: false,
				isButtonDisabled: false, // 按钮是否禁用
				show: false,
				customStyle: {
					with: '100%',
					backgroundColor: '#ffffff',
					fontSize: '32rpx'
				}
			};
		},
		onLoad() {
			// 检查本地存储，如果存在记住的用户名和密码，则填充到表单中
			const username = uni.getStorageSync('username');
			const password = uni.getStorageSync('password');
			if (username && password) {
				this.form.username = username;
				this.form.password = password;
				this.checked = true;
			} else if (username) {
				this.form.username = username;
			}
		},
		methods: {
			//登录
			login() {
				if (!this.radio) {
					this.show = true
				} else {
					if (this.isButtonDisabled) {
						return false; // 如果按钮已禁用，直接返回
					}

					if (!this.form.username) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return false
					}
					if (!this.form.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return false
					}

					// 登录成功后，根据记住密码的状态来决定是否保存用户名和密码到本地存储
					if (this.checked) {
						uni.setStorageSync('password', this.form.password);
						uni.setStorageSync('username', this.form.username);
					} else {
						uni.removeStorageSync('username');
						uni.removeStorageSync('password');
					}

					this.isButtonDisabled = true; // 禁用按钮	
					this.userLoginFn()
				}
			},
			//勾选协议
			confirm() {
				this.show = false
				this.radio = true
			},
			//登录接口
			async userLoginFn() {
				setTimeout(() => {
					this.isButtonDisabled = false; // 启用按钮
				}, 500)
				const res = await this.$u.api.userLogin({
					username: this.form.username,
					password: Base64.encode(this.form.password.toString())
				})
				console.log(res)
				uni.setStorageSync('token', res.data.token);
				const userInfo = await this.$u.api.getUserInfo()
				this.$u.vuex('userRoles', userInfo.data.roles);
				this.$u.route({
					type: 'reLaunch',
					url: '/pages/tabbar/index/index'
				})
			},
			goPage(e) {
				switch (e) {
					case '1': //用户协议
						this.$u.route('/pages/agreement/agreement', {
							type: '1'
						});
						break;
					case '2': //隐私协议
						this.$u.route('/pages/agreement/agreement', {
							type: '2'
						});
						break;
					default:
						console.log('Unknown fruit');
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 80rpx 56rpx;

		.p {
			margin-top: 32rpx;
		}

		.storm {
			border-bottom: 2rpx solid #F2F2F2;
			margin-top: 24rpx;

			label {
				width: 150rpx;
				text-align: justify;
				text-justify: distribute-all-lines;
				text-align-last: justify;
			}
		}

		/deep/ .u-checkbox__label {
			line-height: 28px;
			letter-spacing: 0em;
			color: #999999 !important;
		}

		.btn {
			margin-top: 140rpx;
			height: 96rpx;
			border-radius: 52rpx;
			background: #DE2E27;
		}

		.agreement {
			position: fixed;
			bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			left: 0;
			right: 0;
			width: fit-content;
			margin-left: auto;
			margin-right: auto;
			text-align: center;

			text {
				color: #999999;
				font-size: 24rpx;
				line-height: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
			}
		}
	}
</style>