<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>
      </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(101px, 55px, 325px, 370px);
      @include bg_pos("load/icon.png");
    }

    .load-box {
      @include pos(512px, 35px, 119px, 450px);
      border-style: solid;
      border-width: 2px;
      border-color: #e17c4d;
      border-radius: 20px;
      padding: 2px;

      .bar {
        @include box(0%, 26px);
        border-radius: 20px;
        background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
        background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);

      }
    }

    .load-num {
      @include pos(750px, 50px, 0px, 511px);
      text-align: center;
      font-size: 38px;
      color: #ffaf5e;
      line-height: 40px;
      font-weight: 700;
      background: linear-gradient(to right, #f2733a, #ffd667);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      // letter-spacing: 2px;
    }

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