<script setup>
import { Toast } from "vant";
import gsap from "gsap";
import Preloader from "@/plugins/Preloader";
import { loadImg, pageImg } from "@/data/imgList";
import { getMyPrize } from "@/api";
import { useMainStore } from "@/store";

// 页面配置初始化
const emit = defineEmits(["LoadPage"]);
const userStore = useMainStore();

const loadNum = ref(0);

onMounted(() => {

  Preloader({
    name: "加载页资源",
    imgs: loadImg,
    callback: (progress) => {
      // console.log('进度：', progress);
    },
  }).then((res) => {
    gsap.to(".LoadPage", {
      duration: 0.2,
      autoAlpha: 1,
      onComplete: () => {
        if (import.meta.env.VITE_MODE != "dev") {
          getMyPrize({}, userStore.token).then((res) => {
            if (res.code == 0) {
              console.log("我的奖品", res);
              if (res.data) {
                console.log("有奖品");
                userStore.updatePrize(res.data);
              }
            }
          });
        }

        Preloader({
          name: "内页资源",
          imgs: pageImg,
          callback: (progress) => {     
            gsap.set(".bar", { width: progress + "%" });
            loadNum.value = progress;
          },
        }).then((res) => {
          console.log("加载完成");

          gsap.to(".LoadPage", {
            duration: 1,
            autoAlpha: 0,
            onComplete: () => {
              emit("LoadPage", { action: "hide" });
            },
          });
        });
      },
    });
  });
});
</script>

<template>
  <div class="LoadPage" @touchmove.prevent>
    <div class="load-bg"></div>
    <div class="load-container">
      <div class="load-icon"></div>
      <div class="load-box">
        <div class="bar"></div>
      </div>
      <div class="load-num">
        <span class="num">{{ loadNum }}%</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.LoadPage {
  @include pos(100%, 100%, 0px, 0px);

  overflow: hidden;
  @include flexCen();

  .load-bg {
    @include pos(750px, 100%, 0px, 50%);
    transform: translateY(-50%);
    @include bg_pos("index/bg.jpg");
  }

  .load-container {
    position: relative;
    @include box(750px, 1180px);
    // transform: translateY(-50%);

    .load-icon {
      @include pos(363px, 136px, 335px, 320px);
      @include bg_pos("load/icon.png");
    }

    .load-box {
      @include pos(582px, 45px, 83px, 450px);
      border-radius: 25px;
      padding: 1px;
      border: 1px solid rgb(243, 87, 4);


      .bar {
        @include box(0%, 38px);
        border-radius: 20px;
        border: 1px solid rgb(255, 255, 255);

        background-image: -webkit-linear-gradient(0deg, #f7c86f 0%, #f25501 100%);

      }
    }

    .load-num {
      @include pos(235px, 80px, 256px, 511px);
      @include bg_pos("load/icon-2.png");

      @include flexCen();


      .num {
        font-size: 40px;
        color: #f25501;
        font-weight: 700;

        /* 文字填充色 */
        text-shadow:
          -1px -1px 0 #ffffff,
          1px -1px 0 #ffffff,
          -1px 1px 0 #ffffff,
          1px 1px 0 #ffffff;
        /* 四个方向阴影叠加 */
      }
    }

    .btn {
      @include box(200px, 40px);
      line-height: 40px;
      text-align: center;
      background-color: aliceblue;
    }
  }
}
</style>
