<template>
	<view class="loading-container">
		<image class="logo" src="/static/logo.png" mode="widthFix"></image>
		<view class="spinner"></view>
		<text class="tip">{{ tips_text }}</text>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { appInit } from "@/common/system/system";
import { verificationHost } from "@/common/env.js";
import { com } from "@/common/com";
let tips_text = ref("加载中...");
onLoad(async (option) => {
	console.log('请求参数', option);

	// 记录开始时间
	const startTime = Date.now();

	// 检查网络状态
	const network = await uni.getNetworkType();
	if (network.networkType === "none") {
		tips_text.value = "请检查网络连接";
		// 监听网络状态变化
		uni.onNetworkStatusChange(checkNetwork);
		return;
	}
	const host = await verificationHost();
	if (!host) {
		tips_text.value = "暂无网络";
		return;
	}
	let res = await appInit();
	// 计算总耗时
	const endTime = Date.now();
	const duration = endTime - startTime;
	let endTimeF = 800 - duration;
	console.log(`应用初始化成功，耗时: ${duration}ms,距离动画结束还需要${endTimeF}ms`);
	if (endTimeF > 50) {
		await sleep(endTimeF);
	}
	if (option != null && option.id != null && option.id != "0") {
		uni.setStorageSync('share_id', option.id);
	}
	com.navigateTo("/pages/index/index");

});
/**
 * 检查网络状态
 * @param {Object} res 网络状态
 */
function checkNetwork(res) {
	console.log("网络状态变化:", res.isConnected, res.networkType);
	if (res.isConnected) {
		// #ifdef APP
		plus.runtime.restart();
		// #endif
	}
}
</script>

<style>
.loading-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}

.logo {
	width: 360rpx;
	margin-bottom: 40rpx;
	animation: slideDown 0.8s ease-out forwards;
	transform: translateY(-100vh);
}

.spinner {
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid #f0f0f0;
	border-top-color: #18a058;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 24rpx;
}

@keyframes spin {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-100vh);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.tip {
	color: #999999;
	font-size: 28rpx;
}
</style>
