<template>
    <view class="container">
        <view class="title">
            <image src="./image/title.png" class="angelTitle" />
            <image src="./image/title2.png" class="gameTitle" />
            <view class="items">
                <!-- 进度条背景，包含Vector图片 -->
                <view class="jindutiaoImg">
                    <!-- 进度条填充部分 -->
                    <view 
                        class="progress-fill" 
                        :style="{ width: progressWidth + 'rpx' }"
                    ></view>
                    <!-- Vector 图片在进度条内部，根据进度位置移动 -->
                    <image 
                        src="./image/Vector.png" 
                        class="Vector" 
                        :style="{ left: vectorLeft + 'rpx' }" 
                    />
                </view>
                <view class="progress">加载资源中<text style="margin-left: 10rpx;">{{ displayProgress }}%</text></view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 进度值（0-100）
const progress = ref(0)
// Vector图片的left位置（rpx单位）
const vectorLeft = ref(0)
// 进度条填充宽度（rpx单位）
const progressWidth = ref(0)

// 计算属性：显示用的整数进度值
const displayProgress = computed(() => {
    return Math.floor(progress.value) // 取整，去掉小数部分
})

// 进度条总长度
const PROGRESS_TOTAL_WIDTH = 654 // rpx
// 进度条边框宽度
const PROGRESS_BORDER_WIDTH = 4 // rpx
// Vector图片宽度
const VECTOR_WIDTH = 36 // rpx
// Vector图片在进度条内的垂直位置调整
const VECTOR_TOP_OFFSET = -24 // rpx，使其在进度条内部居中显示

// 模拟加载进度
let timer = null

const startLoading = () => {
    // 清除之前的定时器
    if (timer) clearInterval(timer)
    
    // 重置进度
    progress.value = 0
    vectorLeft.value = 0
    progressWidth.value = 0
    
    // 模拟加载进度
    timer = setInterval(() => {
        if (progress.value < 100) {
            const increment = Math.random() * 5 + 1
            progress.value = Math.min(progress.value + increment, 100)
            
            // 计算Vector图片位置（使其在进度条内部移动）
            // 有效进度条宽度 = 总宽度 - 2 * 边框宽度
            const effectiveWidth = PROGRESS_TOTAL_WIDTH - 2 * PROGRESS_BORDER_WIDTH
            // Vector图片位置 = 进度百分比 * 有效宽度 - Vector图片宽度/2
            // 减去VECTOR_WIDTH/2是为了让图片中心对齐进度条末端
            vectorLeft.value = (progress.value / 100) * effectiveWidth - VECTOR_WIDTH / 2
            // 确保Vector图片不超过进度条范围
            vectorLeft.value = Math.max(0, Math.min(vectorLeft.value, effectiveWidth - VECTOR_WIDTH))
            
            // 计算进度条填充宽度
            progressWidth.value = (progress.value / 100) * effectiveWidth
        } else {
            // 加载完成
            clearInterval(timer)
            progress.value = 100
            // Vector图片移动到最右边
            const effectiveWidth = PROGRESS_TOTAL_WIDTH - 2 * PROGRESS_BORDER_WIDTH
            vectorLeft.value = effectiveWidth - VECTOR_WIDTH
            progressWidth.value = effectiveWidth
            
            // 加载完成后的处理
            setTimeout(() => {
                console.log('资源加载完成！')
                // 这里可以跳转到下一个页面
                // uni.navigateTo({ url: '' })
            }, 500)
        }
    }, 100)
}

// 页面加载时开始加载进度
onMounted(() => {
    startLoading()
})

// 页面卸载时清除定时器
onUnmounted(() => {
    if (timer) clearInterval(timer)
})

defineExpose({
    startLoading,
    getProgress: () => Math.floor(progress.value) // 返回整数进度
})
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(79.78% 40.09% at 50% 50%, #5FA5EC 0%, var(--, #06C) 100%);
    position: relative;

    .title {
        position: absolute;
        top: 350rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .angelTitle {
            width: 275rpx;
            height: 34.9rpx;
        }

        .gameTitle {
            width: 560rpx;
            height: 336rpx;
            margin-top: 33rpx;
        }
        
        .items {
            text-align: center;
            position: relative;
            width: 654rpx;
            margin-top: 154rpx;
            
            .jindutiaoImg {
                position: relative;
                width: 654rpx;
                height: 46rpx;
                border-radius: 44rpx;
                border: 4rpx solid #000;
                background: #495165;
                box-sizing: border-box;
                
                .progress-fill {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    background: linear-gradient(90deg, #3D8FE0 0%, #214E7A 100%);
                    border-radius: 44rpx;
                    transition: width 0.3s ease;
                    z-index: 1;
                }
                
                .Vector {
                    width: 60rpx;
                    height: 70rpx;
                    position: absolute;
                    top: -17rpx;
                    z-index: 10;
                    transition: left 0.3s ease;
                }
            }
            
            .progress {
                margin-top: 40rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: #FFFFFF;
                 letter-spacing: 2.86rpx;
                
                text {
                    margin-left: 10rpx;
                }
            }
        }
    }
}
</style>