<!--  -->
<template>
  <Navbar class="mb-3" />
  <v-card class="default-width my-3" style="height: calc(100vh - 356px)">
    <showText :class="showPrizeDraw ? '' : 'mb-15'"></showText>

    <!-- 抽奖 -->
    <prizeDraw v-if="showPrizeDraw" type="2" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>
  </v-card>
</template>

<script setup>
defineOptions({name: 'payOver-index'})
import { ref } from 'vue'
import Navbar from '../components/navbar.vue'
import showText from './components/show.vue'
import prizeDraw from '@/views/mall/components/prizeDraw.vue'
import { useRoute, useRouter } from 'vue-router'
import { getPrizeByGoodsId } from '@/api/mall/prize'

const { spuId } = useRoute().query
const showPrizeDraw = ref(false)
const lotteryId = ref('')
const getLottery = async () => {
  if (!spuId) return
  const data = await getPrizeByGoodsId(spuId)
  showPrizeDraw.value = data && Object.keys(data).length > 0
  console.log(showPrizeDraw.value, '是否显示抽奖活动')

  lotteryId.value = data.id
}
getLottery()

// 前往我的奖品
const router = useRouter()
const handleReceive = () => {
  router.push('/mall/user/prize')
}
</script>

<style lang="scss" scoped>
</style>
