<template>
  <!-- 转盘容器 -->
  <Comp @prize="handlePrize" />

  <!-- 🎉 中奖动画层 -->
  <Teleport to="body">
    <Transition name="result">
      <div
        v-if="showResult"
        class="fixed inset-0 z-[9999] bg-black/70 backdrop-blur flex flex-col items-center justify-center"
      >
        <img :src="currentPrize?.img" class="w-32 h-32 animate-pop" />
        <!-- 调整中奖图片尺寸 -->
        <div class="mt-6 text-white text-3xl font-bold">恭喜获得 {{ currentPrize?.name }}</div>
        <!-- 调整中奖文字尺寸 -->
        <el-button class="mt-8" type="primary" @click="showResult = false"> 知道了 </el-button>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Comp from './Comp.vue'
interface Prize {
  name: string
  img: string
}

const prizes: Prize[] = [
  { name: '100元优惠券', img: 'https://cdn-icons-png.flaticon.com/512/1041/1041916.png' },
  { name: '谢谢参与', img: 'https://cdn-icons-png.flaticon.com/512/1828/1828843.png' },
  // 修复了图片链接中的拼写错误 'flaticom' -> 'flaticon'
  { name: '实物奖品', img: 'https://cdn-icons-png.flaticon.com/512/15/15874.png' },
  { name: '红包', img: 'https://cdn-icons-png.flaticon.com/512/2331/2331970.png' },
  { name: '幸运奖', img: 'https://cdn-icons-png.flaticon.com/512/744/744465.png' },
  { name: '平板电脑', img: 'https://cdn-icons-png.flaticon.com/512/1828/1828919.png' },
]

const rotateDeg = ref(0)
const isDrawing = ref(false)
const showResult = ref(false)
const currentPrize = ref<Prize | null>(null)

function startDraw() {
  if (isDrawing.value) return

  isDrawing.value = true
  const prizeIndex = Math.floor(Math.random() * prizes.length)
  currentPrize.value = prizes[prizeIndex]

  const perDeg = 360 / prizes.length

  // 计算奖品中心点相对于转盘0度（3点钟方向）的绝对角度
  const targetPrizeCenterAngle = prizeIndex * perDeg + perDeg / 2

  // 指针位于12点钟方向（转盘的-90度或270度），计算需要旋转的度数，使奖品中心对齐指针
  // 旋转度数 = (指针目标角度 - 奖品中心角度 + 360) % 360
  // 这里指针目标角度我们定为270度 (相对于3点钟的0度)
  const rotationToAlignWithPointer = (270 - targetPrizeCenterAngle + 360) % 360

  // 增加多次完整旋转，使转盘转动效果更明显
  const fullSpins = 5
  const finalTargetDeg = fullSpins * 360 + rotationToAlignWithPointer

  rotateDeg.value += finalTargetDeg

  setTimeout(() => {
    showResult.value = true
    isDrawing.value = false
  }, 4200)
}

/**
 * 每个奖品扇区的容器样式，负责整体旋转。
 * 它的子元素 (prizeSliceStyle 和 prizeContentStyle) 将在此旋转坐标系中定位。
 */
function prizeSectorWrapperStyle(index: number) {
  const angle = 360 / prizes.length
  return {
    transform: `rotate(${angle * index}deg)`, // 旋转整个逻辑扇区区域
    transformOrigin: '50% 50%', // 围绕转盘中心旋转
  }
}

/**
 * 实际的扇形区域样式，负责背景和clipPath。
 * 它的旋转由 prizeSectorWrapperStyle 继承。
 */
function prizeSliceStyle(index: number) {
  return {
    background:
      index % 2
        ? 'linear-gradient(135deg,#f43f5e,#fb7185)' // 调整渐变颜色，使其更协调
        : 'linear-gradient(135deg,#f59e0b,#fbbf24)',
    clipPath: 'polygon(50% 50%, 100% 0%, 100% 100%)', // 保持三角形裁剪，初始指向右侧
  }
}

/**
 * 奖品内容（图标和文字）的定位和旋转样式。
 * 它在 prizeSectorWrapperStyle 已经旋转的坐标系中进行定位。
 */
function prizeContentStyle(index: number) {
  const angle = 360 / prizes.length
  const wheelDiameterRem = 48 // 转盘直径 48rem
  const wheelRadiusRem = wheelDiameterRem / 2 // 转盘半径 24rem
  // 将内容放置在距离中心约 65% 的半径处
  const distanceFromCenterRem = wheelRadiusRem * 0.65

  return {
    // 将内容div的中心放置在转盘的中心
    top: '50%',
    left: '50%',
    // 1. translate(-50%, -50%)：将div自身的中心对齐到 (top:50%, left:50%)
    // 2. rotate(${angle / 2}deg)：将其旋转到扇区的中心角度 (相对于扇区初始的0度，即右侧)
    // 3. translateY(-${distanceFromCenterRem}rem)：沿着旋转后的Y轴（即径向方向）向外平移
    transform: `
        translate(-50%, -50%) 
        rotate(${angle / 2}deg) 
        translateY(-${distanceFromCenterRem}rem) 
      `,
    zIndex: '1', // 确保内容显示在扇区背景之上
  }
}

function handlePrize(prize: Prize) {
  currentPrize.value = prize
  showResult.value = true
}
</script>

<style>
/* 中奖弹层动画 */
.result-enter-active {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 礼物弹跳 */
.animate-pop {
  animation: pop 0.8s ease-out;
}
@keyframes pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
