<template>
  <div class="lucky-wheel-wrapper">
    <LuckyWheel
      ref="myLucky"
      width="260px"
      height="260px"
      :blocks="blocks"
      :buttons="buttons"
      :prizes="prizes"
      :default-config="defaultConfig"
      :default-style="defaultStyle"
      @start="startCallback"
      @end="endCallback"
    />
    <!-- 自定义指针 -->
    <div class="wheel-pointer">
      <div class="pointer-pin" />
      <div class="pointer-dot" />
    </div>
    <button
      class="go-btn"
      :class="{ 'is-spinning': isSpinning }"
      :disabled="isSpinning"
      @click="startCallback"
    >
      <span class="go-text">GO</span>
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { LuckyWheel } from '@lucky-canvas/vue'
import ringTexture from '@/assets/img/lucky-wheel-outer-ring.svg'
const emit = defineEmits<{
  (e: 'prize', prize: Record<string, unknown>): void
}>()

const myLucky = ref<InstanceType<typeof LuckyWheel>>()

const defaultConfig = {
  offsetDegree: 0,
  speed: 20,
  accelerationTime: 2500,
  decelerationTime: 2500,
}

const defaultStyle = {
  fontColor: '#333',
  fontSize: '12px',
  fontWeight: 'bold',
  lineHeight: '14px',
}

const blocks = [
  { padding: '2px', background: '#e8e4ff' },
  {
    padding: '16px',
    background: '#6858ec',
    imgs: [
      {
        src: ringTexture,
        width: '100%',
        height: '100%',
        rotate: true,
      },
    ],
  },
  { padding: '3px', background: '#7b6fef' },
]

const prizes = [
  {
    background: '#ffffff',
    fonts: [{ text: '谢谢参与', top: '12%', fontSize: '11px', fontColor: '#6858ec' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60a.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#f3f0ff',
    fonts: [{ text: '10个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f61d.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#ffffff',
    fonts: [{ text: '5个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f929.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#f3f0ff',
    fonts: [{ text: '1个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60e.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#ffffff',
    fonts: [{ text: '谢谢参与', top: '12%', fontSize: '11px', fontColor: '#6858ec' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f385.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#f3f0ff',
    fonts: [{ text: '10个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f917.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#ffffff',
    fonts: [{ text: '5个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f618.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
  {
    background: '#f3f0ff',
    fonts: [{ text: '1个京豆', top: '12%', fontSize: '11px', fontColor: '#e5a012' }],
    imgs: [
      {
        src: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f970.png',
        width: '30%',
        top: '38%',
      },
    ],
  },
]

const buttons = [
  { radius: '30%', background: '#fce4e4' },
  { radius: '25%', background: '#f75a5a' },
  {
    radius: '22%',
    background: '#e63939',
    pointer: false,
    fonts: [{ text: '', top: '-14px' }],
  },
]

const isSpinning = ref(false)

const startCallback = () => {
  if (isSpinning.value) return
  isSpinning.value = true
  myLucky.value?.play()
  setTimeout(() => {
    const index = Math.floor(Math.random() * prizes.length)
    myLucky.value?.stop(index)
  }, 3000)
}

const endCallback = (prize: Record<string, unknown>) => {
  isSpinning.value = false
  emit('prize', prize)
}
</script>

<style scoped>
.lucky-wheel-wrapper {
  position: relative;
  display: inline-block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  box-shadow:
    0 2px 8px rgba(104, 88, 236, 0.6),
    0 0 16px 1px rgba(104, 88, 236, 0.08);
}

.go-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ff8a80;
  background: linear-gradient(145deg, #ff5252, #d32f2f);
  box-shadow:
    0 4px 12px rgba(211, 47, 47, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.go-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 6px 20px rgba(211, 47, 47, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  background: linear-gradient(145deg, #ff6e6e, #e53935);
}

.go-btn:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.92);
  box-shadow:
    0 2px 6px rgba(211, 47, 47, 0.4),
    inset 0 3px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(145deg, #d32f2f, #c62828);
}

.go-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.go-btn.is-spinning {
  animation: pulse-spin 1.2s ease-in-out infinite;
}

.go-text {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  user-select: none;
  pointer-events: none;
}

@keyframes pulse-spin {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
}

.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pointer-pin {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 22px solid #ffd54f;
  position: relative;
}

.pointer-pin::before {
  content: '';
  position: absolute;
  top: -22px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid #ffe082;
}

.pointer-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe082, #ffc107);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  margin-top: -3px;
}
</style>
