<template>
	<view class="w-body" :class="{ inClass }">
		<w-public />
		<w-navbar fixed title=""></w-navbar>
		<view class="content w-main-bg">
			<view class="logo"><image class="img" src="/static/logo.png" loading="lazy" /></view>
			<view class="title" style="margin-top: 2em; text-align: center;">欢迎登录{{ $env.title }}!</view>

		</view>
		<view class="login">
			<view style="margin-top: .5rem;">账号ID</view>
			<view style="margin-top: .5rem;">
				<u-input v-model="persistentStore.username" type="text" placeholder="请输入您的账号ID" color="var(--w-text)"
					font-size=".9rem" border="bottom" clearable prefixIcon="account-fill"
					prefixIconStyle="font-size: .9rem;color: var(--w-text);"></u-input>
			</view>
			<view style="margin-top: 1.5rem;">密码</view>
			<view style="margin-top: .5rem;">
				<u-input v-model="password" type="password" placeholder="请输入您的密码" :password="true" color="var(--w-text)"
					font-size=".9rem" border="bottom" clearable prefixIcon="lock-fill"
					prefixIconStyle="font-size: .9rem;color: var(--w-text);"></u-input>
			</view>
			<view style="margin-top: 2rem;">
				<u-button loadingText="登录中..." @click="doLogin" :loading="loading" color="var(--w-main)" throttleTime="5000"
					text="登 录"></u-button>
				<view @click="$w.to('bind')"
					style="color:var(--w-text-light-1); font-size: .8rem; text-align: center; margin-top: 1rem;">
					没有账号吗？点击绑定</view>
			</view>
			<view v-if="$env.demoUsers=='1'" class="w-flex dev-users">
				<view>测试账号：</view>
				<view hover-class="w-hover" @click="persistentStore.username = 'admin'; password = '123456'">管理员</view>
				<view hover-class="w-hover" @click="persistentStore.username = '1251'; password = '123456'">角色一</view>
				<view hover-class="w-hover" @click="persistentStore.username = '1251'; password = '123456'">角色二</view>
			</view>
		</view>
		<w-footer>
			<view class="footer w-radio" :class="{ selected: accept }" @click="accept = !accept;">
				登录即同意<view @click.stop="$w.to('notice?title=《用户服务协议》&type=8')">《用户服务协议》</view>以及<view @click.stop="$w.to('notice?title=《隐私策略》&type=9')">《隐私策略》</view>
			</view>

		</w-footer>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onHide, onLoad } from '@dcloudio/uni-app'
import { useAuthStore, usePersistentStore, useImageStore } from '@/store'
import { login } from '@/api'


const authStore = useAuthStore();
const persistentStore = usePersistentStore();
const imageStore = useImageStore();


const inClass = ref(false);

// onLoad(() => {
// 	uni.$on("loadInfo", () => {
// 		uni.reLaunch({
// 			url: "/pages/index/index"
// 		});
// 	});
// });

onShow(() => {
	setTimeout(() => { inClass.value = true; }, 100);
});

onHide(() => {
	inClass.value = false;
});


const loading = ref(false);
const password = ref("");

const accept = ref(true);

const doLogin = async () => {
	if (!accept.value) {
		uni.$w.err("请先同意协议");
		return;
	}
	loading.value = true;
	try {
		let r = await login(persistentStore.username, password.value);
		console.debug(r);
		await authStore.setToken(r.token);
		uni.navigateTo({
			url: "/pages/index/index"
		})
	} finally {
		loading.value = false;
	}
}
</script>

<style lang="scss" scoped>
.w-body {
	position: relative;

	.dev-users {
		margin-top: 2rem;
		font-size: .8rem;

		&>view {
			margin: 0 .3rem;
			
		}
	}

	.footer {
		padding-bottom: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .75rem;
		--btn-size: 1rem;
		color: var(--w-text-light-2);

		&>view {
			color: var(--w-text);
		}

	}

	.login {
		width: 100%;
		padding: 2rem 2rem 0;
	}

	.content {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;

		.logo {
			padding: 10vmin 0;

			.img {
				width: 25vmin;
				height: 25vmin;
			}
		}

		.title {
			width: 100%;
			padding: .2rem 2rem;
			text-align: left;
			font-size: 1rem;
			letter-spacing: .1rem;
			color: var(--w-text);
		}


	}
}
</style>