<script setup>
import { debounceTap } from "@/plugins";
import gsap from "gsap";
import { Toast } from "vant";
import useClipboard from 'vue-clipboard3'
import { useMainStore } from "@/store";
import { onMounted } from "vue";

// 页面配置初始化
const emit = defineEmits(["MyPrizePage"]);
const userStore = useMainStore();
const { toClipboard } = useClipboard()

const money = ref(userStore.prizeMoney);
const code = ref(userStore.prizeCode);

const copyFn = (event) => {
  let e = event.target;
  toClipboard(code.value)
  debounceTap(e, () => {
    Toast(`复制成功：${code.value}`);
  });
};


const hide = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to(".MyPrizePage", {
      duration: 0.4,
      autoAlpha: 0,
      onComplete: () => {
        emit("MyPrizePage", { action: "hide" });
      },
    });
  });
};

const entryAni = () => {
  gsap.from(".MyPrizePage", { duration: 0.2, autoAlpha: 0 });
  gsap.from(".myPrize-container", { duration: 1, autoAlpha: 0, scale: 0.7 });
};

onMounted(() => {
  entryAni();
});
</script>

<template>
  <div class="MyPrizePage">
    <div class="myPrize-container">
      <div class="myPrize-money">¥{{ money }}元</div>
      <div class="myPrize-code-box">
        <div class="code">{{ code }}</div>
        <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
      </div>
      <div class="myPrize-cls-btn" @click="hide($event)"></div>
    </div>
  </div>
</template>  

<style lang="scss" scoped>
.MyPrizePage {
  @include fixed();
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: 0.8);

  .myPrize-container {
    position: relative;
    @include box(665px, 731px);
    @include bg_pos("prize/myPrize-box.png");

    .myPrize-money {
      @include pos(370px, 81px, 139px, 239px);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e95b46;
      font-weight: 700;
      font-size: 58px;
      letter-spacing: 4px;
    }

    .myPrize-code-box {
      @include pos(312px, 52px, 197px, 508px);
      display: flex;
      flex-direction: row;
      align-items: center;

      .code {
        font-size: 25px;
        font-weight: 700;
        margin-right: 10px;
        color: #fff6cc;
      }

      .myPrize-copy-btn {
        @include box(77px, 39px);
        @include bg_pos("prize/copy-btn.png");
      }
    }

    .myPrize-cls-btn {
      @include pos(82px, 82px, 517px, 114px);
      @include bg_pos("prize/cls-btn.png");
    }
  }
}
</style>