<template>
	<view class="login">
		<view class="welcome">
			<view style="font-size: 50rpx;font-weight: 700;margin-bottom: 20rpx;">
				Hello!
			</view>
			<view style="font-size: 40rpx;">
				欢迎使用会员管理平台
			</view>
		</view>

		<view class="login_k">
			<view class="title">用户名</view>

			<input class="input" v-model="username" placeholder-style="color:#d7fffd;" placeholder="请输入用户名" />
			<view class="title">密码</view>
			<input class="input" v-model="password" password placeholder-style="color:#d7fffd;" placeholder="请输入密码" />
			<view>
				<checkbox-group  @change="checkboxChange">
					<label >
						<checkbox value="mianmi" />7天免密登录
					</label>
				</checkbox-group>
				
			</view>
		</view>
		<view style="padding-left: 40rpx;padding-right: 40rpx;">
			<view class="button" @click="LoginFuc('click')">登 录</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		 Login
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let mianmi=ref(false);
	const checkboxChange=(e)=>{
		console.log(e.detail.value[0])
		if(e.detail.value[0]=='mianmi'){
			mianmi.value=true
		}
	 
	}
	let username = ref('');
	let password = ref('');
	const LoginFuc = (logintype='') => {
		 Login({
		 	username: username.value,
			password: password.value
		 }).then(res => {
		 	if (res.data.status == 'ok') {
				console.log(66666666)
		 					if(mianmi.value==true && logintype=='click'){
		 						localStorage.setItem("username",username.value)
		 						localStorage.setItem("password",password.value)
		 						localStorage.setItem("mianmi_date",day7())
		 					}
		 					sessionStorage.setItem("access_token", res.data.token)
		 					sessionStorage.setItem("refresh_token", res.data.refresh_token)
		 					uni.navigateTo({
		 						url: '/pages/user/SearchInput/SearchInput'
		 					})
		 	}
		 
		 })
	}
	const day7=()=>{
		 const now = new Date();
		 const currentTimestamp = now.getTime();
		 
		 // 计算7天后的时间戳
		 const sevenDaysLaterTimestamp = currentTimestamp + 7 * 24 * 60 * 60 * 1000;
		 return sevenDaysLaterTimestamp
	}
	onLoad(()=>{
		const now = new Date();
		const currentTimestamp = now.getTime();
		if(localStorage.getItem('mianmi_date')>currentTimestamp){
			username.value=localStorage.getItem('username')
			password.value=localStorage.getItem('password')
			LoginFuc()
		}
	})
</script>

<style scoped>
	.login {
		background-color: aliceblue;
		padding-top: 60rpx;
		height: calc(100vh - 60rpx);
	}

	.welcome {
		margin: 0rpx auto 100rpx 60rpx;
		color: #53cdf9;
	}

	.login_k {
		height: 450rpx;
		background-color: #a5eaf9;
		border-radius: 30rpx;
		margin: 40rpx;
		box-shadow: 2px 2px 5px #7c9fca;
		padding: 40rpx 40rpx 0rpx 40rpx;
	}

	.button {
		width: 100%;
		background-color: #00BBF9;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		border-radius: 50rpx;
		margin-top: 80rpx;

	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #316664;
	}

	.input {
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		border: 0rpx;
		border-bottom: 1rpx solid #fff;
		height: 80rpx;
		color: #666;
	}
</style>