<script setup>
import { onMounted, watch, onUnmounted, computed } from 'vue';
import { useProgress } from './hook/speed';

// 图片路径
const ASSETS = Object.freeze({
  bg: '/static/shouping/bg.webp',
  logo: '/static/shouping/logo.webp',
  title: '/static/shouping/title.webp',
  water: '/static/shouping/water.webp',
});

const { progress, start } = useProgress();
let navTimer = null;

const progressPercent = computed(() => Math.floor(progress.value));

watch(progress, (newVal) => {
  if (newVal >= 100) {
    if (!navTimer) {
      navTimer = setTimeout(handleNavigation, 1000);
    }
  }
});

const handleNavigation = () => {
  uni.reLaunch({
    url: '/pages/start/index',
    fail: (err) => {
      console.error('Navigation failed:', err);
      uni.showToast({
        title: '页面跳转失败，请重试',
        icon: 'none',
        duration: 2000
      });
      navTimer = null;
    }
  });
};

onMounted(() => {
  start();
});

onUnmounted(() => {
  if (navTimer) {
    clearTimeout(navTimer);
    navTimer = null;
  }
});
</script>

<template>
  <view class="landing-container">
    <!-- 背景图片 -->
    <image class="bg-image" :src="ASSETS.bg" mode="scaleToFill" />

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- Logo -->
      <view class="logo-box">
        <image class="logo-img" :src="ASSETS.logo" mode="widthFix" />
      </view>

      <!-- 标题 -->
      <view class="title-box">
        <image class="title-img" :src="ASSETS.title" mode="widthFix" />
      </view>

      <!-- 进度条区域 -->
      <view class="progress-section">
        <view class="progress-track">
          <view class="progress-bar" :style="{ width: `${progress}%` }">
            <view class="water-drop-wrapper">
              <image class="water-drop" :src="ASSETS.water" mode="widthFix" />
            </view>
          </view>
        </view>
        <view class="loading-info">
          <text class="loading-text">加载资源中 {{ progressPercent }}%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.landing-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15vh;
}

.logo-box {
  margin-bottom: 40rpx;
  
  .logo-img {
    width: 280rpx;
    height: auto;
  }
}

.title-box {
  margin-bottom: 100rpx;
  display: flex;
  justify-content: center;
  
  .title-img {
    width: 600rpx;
    height: auto;
  }
}

.progress-section {
  width: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3vh;
  margin-bottom: 25vh;

  .progress-track {
    width: 100%;
    height: 40rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20rpx;
    position: relative;
    border: 2rpx solid #000;
    box-sizing: border-box;
  }

  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2facff 0%, #6cd9ff 100%);
    border-radius: 18rpx;
    position: relative;
    transition: width 0.1s linear;

    .water-drop-wrapper {
      position: absolute;
      right: -18rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }

    .water-drop {
      width: 48rpx;
      height: 48rpx;
      filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.2));
    }
  }

  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
    letter-spacing: 2rpx;
    text-shadow: 0 2rpx 0 rgba(255,255,255,0.5);
  }
}
</style>
