<template>
  <ModalTransition class="lottery" :show="show" name="opacity" position="center">
    <div class="lottery-wrapper">
      <div class="guang" ref="guangRef"></div>
      <div class="guangyun" ref="guangyunRef"></div>
      <div class="lottery-scene" ref="sceneRef">
        <div class="lottery-card" ref="cardRef">
          <div class="lottery-face">
            <img :src="lotteryFaceUrl" alt="">
          </div>
          <div class="lottery-prize">
            <div class="lottery-title" ref="titleRef"></div>
            <div class="lottery-image" :class="activePrizeData.prize_code"></div>
            <div class="lottery-name">{{ activePrizeData.name }}</div>
            <div class="lottery-btngroup" v-show="btngroupShow">
              <div class="btn-more" @click="handleBtnMore"></div>
              <div class="btn-kaixin" @click="handleLotteryAction"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </ModalTransition>
</template>

<script setup>
import { gsap } from "gsap";
import { ref, watch, onMounted, onUnmounted } from "vue"
import globalToastEvent, { ToastType } from "../globalToastEvent";
import ModalTransition from "./ModalTransition.vue"
import confetti from "canvas-confetti";
import { Request, Sleep } from "../libs/utils"
import { globalStore } from "@/globalstore";
//TODO: globalStore.result_url 这里这张图要用用户分享那张图
// import lotteryFace from "../assets/images/haibao-cover.webp"

const lotteryFace = globalStore.result_url;
const lotteryFaceUrl = ref(lotteryFace)
const cardRef = ref(null)
const sceneRef = ref(null)
const guangRef = ref(null)
const guangyunRef = ref(null)
const titleRef = ref(null)
const activePrizeData = ref({})
const btngroupShow = ref(false)

gsap.registerPlugin()
const props = defineProps({
  show: false,
})
const emit = defineEmits(['close'])

let interval = null
const PRIZE_LIST = ['TJGJ', 'XINCHUN_WEIZUN', 'TEQU_JL_52_60Y_100ML_2', 'LZLJ_TEQU_LZH_52_100ML_2', 'HEIGAI_42_GPJ_500ML', 'DZCZ', 'DZSCZ', '66_POINTS', 'NO']

let gsapCtx = null
let shakeTimeline = null
let PRIZEDATA = null

const closeThis = () => {
  initAnimateStyle()
  emit("close")
}

const handleBtnMore = () => {
  closeThis()
  globalToastEvent.emit(ToastType.SHOW_AD)
}
const handleLotteryAction = () => {
  //实物
  closeThis()
  if (activePrizeData.value.coupon_type === 'scene') {
    globalToastEvent.emit(ToastType.SHOW_ADDRESS, activePrizeData.value.id)
  }
}

onMounted(() => {
  gsap.registerPlugin()
  initAnimateStyle()
})

const initAnimateStyle = () => {
  interval && clearInterval(interval)
  interval = null

  let keyframes = [];
  const frames = 20; // 关键帧数量
  const strength = 5; // 抖动强度

  // 生成关键帧
  for (let i = 0; i < frames; i++) {
    keyframes.push({
      x: gsap.utils.random(-strength, strength),
      y: gsap.utils.random(-strength, strength),
      duration: 0.05 // 每帧的持续时间
    });
  }

  // 创建一个时间线，添加关键帧，并循环
  shakeTimeline = gsap.timeline({ repeat: -1, paused: true });
  shakeTimeline.to(cardRef.value, { duration: 0, x: 0, y: 0 }); // 初始位置
  keyframes.forEach(keyframe => {
    shakeTimeline.to(cardRef.value, keyframe);
  });
  shakeTimeline.to(cardRef.value, { duration: 0.1, x: 0, y: 0 })

  gsap.set(guangyunRef.value, { scale: 0, opacity: 1 })
  gsap.set(titleRef.value, { scaleY: 0 })
  gsap.set(sceneRef.value, { scale: .5 })
  gsap.set(cardRef.value, { rotateY: 0 })
  btngroupShow.value = false
}

watch(() => props.show, async (newVal) => {
  if (!newVal) {
    return
  }

  shakeTimeline.play()

  //TODO: 延时测试，上限删掉
  // await Sleep(2000)

  shakeTimeline.pause()
  const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
  // TODO: 测试数据
  // const lottteryResult = {
  //   res: { status: 200 },
  //   json: {
  //     id: 0,
  //     code: "HEIGAI_42_GPJ_500ML",
  //     prize_code: 'HEIGAI_42_GPJ_500ML',
  //     coupon_type: "scene",
  //     name: "泸州老窖的一瓶酒"
  //   }
  // }

  if (lottteryResult.res.status !== 200) {
    emit('close')
    return
  } else {
    globalStore.lotteryCut()
    activePrizeData.value = lottteryResult.json

    // 未中奖的情况
    if (lottteryResult.json.code === 204) {
      activePrizeData.value = { prize_code: 'NO', coupon_type: 'NO' }
    }

    // kapianCover.value = PRIZEDATA.prize_code === '66_POINTS' ? 'POINTS' : PRIZEDATA.prize_code
  }

  gsapCtx = gsap.context(() => {
    initAnimateStyle()

    const prizeshowTime = gsap.timeline({
      onComplete: () => {
        btngroupShow.value = true
      }
    });

    prizeshowTime.to(sceneRef.value, {
      duration: .4,
      scale: .2,
    })
    prizeshowTime.to(sceneRef.value, {
      duration: 1,
      scale: 1,
      opacity: 1,
      ease: "power4.out"
    })
    prizeshowTime.to(guangyunRef.value, {
      duration: 1.5,
      scale: 2,
    }, "-=1")

    prizeshowTime.to(cardRef.value, {
      rotateY: 180 * 3,
      duration: 1,
    }, "-=1.4")

    prizeshowTime.to(titleRef.value, {
      scaleY: 1,
      ease: "elastic.out(1,0.3)"
    })

    var duration = 4 * 1000;
    var animationEnd = Date.now() + duration;
    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

    function randomInRange (min, max) {
      return Math.random() * (max - min) + min;
    }

    interval = setInterval(function () {
      var timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      var particleCount = 50 * (timeLeft / duration);
      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
    }, 250);

  })
})

onUnmounted(() => {
  shakeTimeline = null
  gsapCtx && gsapCtx.revert()
})
</script>

<style scoped>
.guang,
.guangyun {
  position: absolute;
  left: 50%;
  margin-left: -66.2vw;
  top: 50%;
  margin-top: -64.5vw;
  width: 129.62963vw;
  height: 129.62963vw;
  background-repeat: no-repeat;
  background-size: 100%;
}

.guang {
  background-image: url("../assets/images/guang.webp");
  animation: rotateGuang 20s linear infinite;
}


.guangyun {
  background-image: url("../assets/images/guangyun.webp");
  /* animation: rotateGuangyun 3s linear infinite; */
}

.lottery-title {
  position: absolute;
  top: 24vw;
  left: 50%;
  transform: translateX(-50%);
  width: 65.462963vw;
  height: 19.907407vw;
  background-image: url("../assets/images/lottery-title.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.lottery-name {
  position: absolute;
  bottom: 18vw;
  text-align: center;
  width: 100%;
  font-size: 6vw;
  font-weight: 700;
  color: rgb(255, 255, 255);
  text-shadow:
    0 0 0.37037vw #ff0000,
    0 0 0.740741vw #ff0000,
    0 0 1.111111vw #ff0000,
    0.092593vw 0.092593vw 0 #ff0000,
    -0.092593vw -0.092593vw 0 #ff0000;
}

.lottery-btngroup {
  position: absolute;
  bottom: -24vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.btn-more {
  width: 48.703704vw;
  height: 18.240741vw;
  background-image: url("../assets/images/btn-more.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-kaixin {
  width: 48.703704vw;
  height: 18.240741vw;
  background-image: url("../assets/images/btn-kaixin.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.lottery-image {
  position: absolute;
  top: 45vw;
  width: 100%;
  height: 60vw;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.lottery-image.HEIGAI_42_GPJ_500ML {
  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.webp");
}

@keyframes rotateGuangyun {
  0% {
    transform: scale(.3);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes rotateGuang {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.lottery-scene {
  position: relative;
  width: 88.055556vw;
  height: 148.796296vw;
}

.lottery-card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.lottery-card.flip {
  transform: rotateY(180deg);
}

.lottery-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.lottery-card img {
  width: 100%;
  display: block;
}

.lottery-prize {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/prize-bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.close {
  position: absolute;
  width: 8.148148vw;
  height: 8.055556vw;
  right: 5vw;
  top: 0;
  background-image: url("../assets/images/icon-close.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>