<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import AudioManager from "@/audioManager";

const timer = ref(null);
const progress = ref(0);

onMounted(() => {
  timer.value = setInterval(() => {
    const result = AudioManager.getLoadProgress();
    if (result > progress.value) {
      progress.value = result;
    }
    if (progress.value === 1) {
      clearInterval(timer.value);
      uni.redirectTo({
        url: "/pages/index",
      });
    }
  }, 200);
});

onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container">
    <image
      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91bppqmq1mwf3f.png"
      mode="aspectFill"
    />
    <image
      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a4hjot4ulumg.png"
      mode="widthFix"
    />
    <view>
      <view :style="{ width: `${progress * 100}%` }">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
          mode="widthFix"
        />
      </view>
      <text>资源加载中...</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
}
.container > image:first-child {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.container > image:nth-child(2) {
  width: 300rpx;
  height: 420rpx;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container > view:nth-child(3) {
  width: 380rpx;
  height: 6rpx;
  background: #000000;
  border-radius: 4rpx;
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.container > view:nth-child(3) > view {
  background: #ffe431;
  min-height: 6rpx;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: width 0.5s ease;
}
.container > view:nth-child(3) > view > image {
  width: 46rpx;
  height: 26rpx;
}
.container > view:nth-child(3) > text {
  width: 100%;
  opacity: 0.5;
  font-size: 22rpx;
  color: #ffffff;
  text-align: center;
  margin-top: 20rpx;
}
</style>
