<template>
    <div class="LoadPage">
        <div class="load-bg"></div>
        <div class="load-container">
            <div class="load-bar">
                <div class="load-icon"></div>
            </div>
            <div class="load-num">{{ loadNumber }}%</div>
        </div>
    </div>
</template>

<script setup>
import gsap from 'gsap'
import { Loading, Icon } from 'vant'
import { loadImg,pageImg } from '@/data/imgList'
import Preloader from '@/plugins/Preloader'

// 初始化
const emit = defineEmits(["LoadPage"]); // 声明触发事件，对应父组件上面的方法

const loadNumber = ref(0)

onMounted(() => {
    Preloader(
        {
            name: '加载页资源',
            imgs: loadImg,
            callback: (progress) => { }
        }
    ).then(
        res => {
            gsap.set('.LoadPage', { autoAlpha: 1 })
            // 开始加载内页
            Preloader(
                {
                    name: '内页资源',
                    imgs: pageImg,
                    callback: (progress) => {
                        // console.log(progress)
                        loadNumber.value =  progress
                        gsap.set('.load-icon', { left: (-15) + progress + '%' })
                    }
                }
            ).then(
                res => {
                    gsap.to('.LoadPage', { duration: .5, autoAlpha: 0, onComplete: () => { emit("LoadPage", { action: 'hide' }) } })
                }
            )

        }
    )
})
</script>

<style lang="scss" scoped>
.LoadPage {
    @include fixed();
    @include flexCen();
    visibility: hidden;

    .load-bg {
        @include pos(750px, 1624px, 0, 50%);
        @include bgSrc('load/bg.jpg');
        transform: translateY(-50%);
    }

    .load-container {
        position: relative;
        @include box(750px, 1180px);

        .load-bar {
            @include pos(597px, 38px, 77px, 437px);
            @include bgSrc('load/bar.png');

            .load-icon {
                @include pos(126px, 114px, -15%, -85px);
                @include bgSrc('load/icon.png');
            }
        }

        .load-num {
            @include pos(640px, 38px, 77px, 520px);
            @include bgSrc('load/num.png');
            font-size: 38px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            line-height: 38px;
            text-shadow: 3.886px 3.147px 4.3px rgba(18, 93, 87, 0.47);

        }
    }
}
</style>