<template>
	<view class="w-body">
		<view class="content">
			<view class="title">{{$env.title}}</view>
			<navigator v-if="$env.demo!=0" url="/pages/demo/index" class="demo">demo</navigator>
		</view>
		<w-loader title="" opacity="1" height="60vh"></w-loader>
		<image mode="aspectFit" lazy-load class="wave" src="/static/wave.svg" />
		<view class="enter">
			<view>正在进入...</view>
			<view><view :style="{width:width+'%'}"></view></view>
		</view>
		<w-footer custom-style=""></w-footer>
	</view>
</template>

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

const authStore = useAuthStore();

const width = ref(0);

let timer = null;

onShow(()=>{
	timer = setInterval(()=>{
		if(width.value<100) {
			width.value += Math.random()*20+10;
		}else {
			clearInterval(timer);
			uni.reLaunch({
				url:authStore.token?"/pages/index/index":"/pages/index/login"
			});
		}
	},300);
});

onHide(()=>{
	width.value = 0;
});

</script>

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

		.content {
			position: absolute;
			text-align: center;
			line-height: 2;
			width: 100%;
			left: 0;
			top: 45vh;
			z-index: 1;
			color: var(--w-bg-dark);
			font-weight: bold;

			.title {
				font-size: 1.5rem;
				letter-spacing: .5rem;
				text-shadow: .2rem .2rem 0 #0006;
			}

			.demo {
				background-color: #0002;
				width: 6rem;
				margin: 1rem auto 0;
				font-size: 1rem;
				border-radius: 5rem;
				cursor: pointer;
				transition: all .5s;
				
				&:hover,
				&:active {
					opacity: .7;
				}
			}

		}

		.wave {
			background-color: var(--w-main);
			width: 100%;
			height: 15vh;
			padding: 0;
			margin: 0;
		}
		
		.enter {
			height: calc(25vh - 1.35rem);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			view:first-child {
				font-size: .7rem;
				color:var(--w-main);
			}
			view:nth-child(2) {
				margin-top: 5px;
				box-sizing: content-box;
				height: 5px;
				width: 50vw;
				padding: 1px;
				border: solid 1px var(--w-main-light-1);
				border-radius: 10px;
				overflow: hidden;
				
				view {
					background-color: var(--w-main-light-1);
					width: 50px;
					height: 100%;
					border-radius: 5px;
					transition: width .5s;
				}
			}
		}
	}
</style>