<template>
	<view class="w-public">
		<view class="loader-layer" :class="{ hide: !commonStore.loading }"><w-loader /></view>
		<!-- #ifdef MP-WEIXIN -->
		<w-wx-login v-model="authStore.loginShow" @submit="doRegLogin"></w-wx-login>
		<!-- #endif -->
		<view v-if="$env.demo != 0" class="w-demo w-flex" @click="$w.to('/pages/demo/index')" hover-class="w-hover">D</view>
	</view>
</template>

<script setup>
import { useAuthStore, useCommonStore } from '@/store'
import { regLogin } from '@/api/wx.js'

const authStore = useAuthStore();
const commonStore = useCommonStore();

const doRegLogin = async (event) => {
	console.debug(event);
	let ret = await regLogin(event);
	console.debug("注册登录的结果", ret);
	authStore.token = ret.token;
	authStore.loadInfo();
}


</script>

<style lang="scss" scoped>
.w-public {

	.w-demo {
		position: fixed;
		right: .5rem;
		opacity: .7;
		background-color: #000c;
		color: var(--w-bg);
		top: calc(50vh - 1rem);
		border-radius: 100vh;
		width: 2rem;
		height: 2rem;
		z-index: var(--w-z-index-top);

		&.w-hover {
			opacity: 1;
		}
	}

	.loader-layer {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: calc(var(--w-z-index-top) + 100);
		transition: opacity 1s;
		opacity: 1;

		&.hide {
			opacity: 0;
			z-index: -1;
			transition: opacity 1s, z-index .1s ease 1s;
		}
	}


}
</style>
