<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) => {
            // console.log('进度：', 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 class="bar-icon"></div>
        </div>
      </div>
      <div class="load-num">{{ loadNum }}%</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("load/bg.jpg");
  }

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

    .load-icon {
      @include pos(83px, 101px, 325px, 370px);
      @include bg_pos("load/icon.png");
    }

    .load-box {
      @include pos(576px, 36px, 87px, 500px);
      border-radius: 20px;
      overflow: hidden;
      padding: 4.5px;
      @include bg_pos("load/bar-box.png");

      .bar {
        @include box(0%, 27px);
        position: relative;
        @include bg_pos("load/bar.png");
        background-size: 551px 27px;
        .bar-icon {
          @include box(35px, 36px);
          position: absolute;
          top: -4.5px;
          left: 95%;
          @include bg_pos("load/bar-icon.png");
        }
      }
    }

    .load-num {
      @include pos(750px, 50px, 0px, 570px);
      text-align: center;
      font-size: 38px;
      color: rgb(255, 255, 255);
      line-height: 40px;
      font-weight: 700;
      background: linear-gradient(to right, #dadada, #ffffff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
    }

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