<route lang="json5">
{
  style: {
    navigationBarTitleText: '转盘抽奖',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import GridLottery from '@/components/GridLottery.vue'

import lotteryIcon from '@/static/images/home/nav-2.png'

const list = [
  {
    id: 1,
    sort: 0,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 2,
    sort: 1,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 3,
    sort: 2,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 4,
    sort: 3,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 5,
    sort: 4,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 6,
    sort: 5,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 7,
    sort: 6,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
  {
    id: 8,
    sort: 7,
    title: '\u6BDB\u5DFE',
    icon: lotteryIcon,
  },
]

const gridLotteryRef = ref(null)
const onStart = () => {
  // 中奖id,抽奖轮转时间毫秒
  gridLotteryRef.value.start(3, 10000)
}
const onEnd = () => {
  console.log('onEnd')
}
</script>

<template>
  <view class="min-h-screen lottery-page">
    <NavBar />
    <view class="mt-240 w-315 h-315 flex items-center justify-center mx-auto lottery-container">
      <grid-lottery
        :itemHeight="186"
        ref="gridLotteryRef"
        class="w-280 ml-8 mt-8"
        :list="list"
        @onStart="onStart"
        @onEnd="onEnd"
      >
        <!-- <view slot="lottery-item" slot-scope="slotProps">{{ slotProps }}</view> -->
        <template #lottery-item="{ data, index, currIndex }">
          <view
            class="overflow-hidden relative lottery-item flex flex-col items-center justify-center rounded-10 bg-[linear-gradient(180deg,#fffdf7,#fff1ca)] w-86 h-86"
            :class="{
              mask: currIndex !== index,
            }"
          >
            <image :src="data.icon" class="w-30 h-30" />
            <view class="text-14 text-#333 mt-8">{{ data.title }}</view>
          </view>
        </template>
        <template #start-button>
          <view
            class="w-86 flex flex-col items-center justify-center h-86 bg-[linear-gradient(180deg,#FF8282,#D73434)] text-#FBEDC6 text-25 rounded-10"
          >
            <view>点击</view>
            <view>抽奖</view>
          </view>
        </template>
        <template #activity-box>
          <view class="w-86 h-86 bg-red-500"></view>
        </template>
      </grid-lottery>
    </view>
    <view class="text-16 mx-auto w-315 mb-15 font-bold text-#fff mt-30">抽奖规则</view>
    <view class="text-12 mx-auto w-315 mb-15 text-#fff mt-15">
      1. 每轮抽奖消耗10000认购点，每轮抽奖次数为3次，每轮抽奖结束后，消耗的认购点将恢复为0。
    </view>
  </view>
</template>
<style scoped>
.lottery-item {
  &.mask {
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      background: rgba(0, 0, 0, 0.1);
    }
  }
}
.lottery-container {
  background-image: url('@/static/images/lottery-bar.png');
  background-size: 100% 100%;
}
.lottery-page {
  background-color: #517aae;
  background-image: url('@/static/images/lottery-bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
}
</style>
