<template>
	<div class="login">
		<h2>Login</h2>
		<form @submit.prevent="handleSubmit">
			<div class="form-item">
				<label for="email">Username or email address</label>
				<input type="email" id="email" name="email" required v-model="fromData.email" />
			</div>
			<div class="form-item">
				<label for="password">Password</label>
				<div class="input-container">
					<input
						id="password"
						name="password"
						required
						:type="passShow ? 'text' : 'password'"
						v-model="fromData.password"
					/>
					<span
						class="iconfont"
						:class="[passShow ? 'icon-hide' : 'icon-show']"
						@click="passShow = !passShow"
					></span>
				</div>
			</div>
			<div class="remember">
				<input type="checkbox" id="remember" name="remember" v-model="remember" />
				<label for="remember">Remember me</label>
				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth > 800"
					>Lost your password?</router-link
				>
			</div>
			<button type="submit" custom>LOG IN</button>
			<div class="form-item center">
				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth <= 800"
					>Lost your password?</router-link
				>
			</div>
		</form>
	</div>
</template>
<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { useGlobalStore } from '@/stores/global'
	const globalStore = useGlobalStore()
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const windowWidth = computed(() => globalStore.state.windowWidth)
	const passShow = ref(false)
	const remember = ref(false)
	const fromData = ref({
		email: '',
		password: ''
	})

	const handleSubmit = () => {
		console.log(fromData.value, remember.value)
		globalStore.setLoading(true)
		setTimeout(() => {
			globalStore.setLoading(false)
			userInfoStore.setToken('123456')
		}, 1000)
	}
</script>

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