<template>
  <view class="got-prize-modal" v-if="visible">
    <!-- 弹窗内容 -->
    <view class="content">
      <p class="title">
        {{showOptions?.awardImageUrl ? '恭喜您获得了' : '很遗憾未中奖'}}</p>
      <image v-if="showOptions?.awardImageUrl" class="prize-image"
             :src="showOptions?.awardImageUrl" mode="aspectFit"
             @error="console.log('奖品图片加载失败')"/>
      <span class="prize-name">
        {{ showOptions?.awardImageUrl ? showOptions?.awardName : '别灰心，再试试吧～' }}
      </span>
      <button class="confirm-btn" @click="onClickConfirm">
        {{ showOptions?.awardImageUrl ? '开心收下' : '我知道了' }}
      </button>
      <p v-if="showOptions?.awardImageUrl" class="tips">奖品可在首页 我的奖品 中查看</p>

      <span class="close-btn"
            :style="{ backgroundImage: `url(${closeBtnUrl})` }"
            @click="onClickClose"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import closeBtnUrl from '@/assets/images/close-btn.png'

export interface ShowGotPrizeModalOptions {
  prizeName: string
  prizeImageUrl: string
}

const visible = ref(false)
const showOptions = ref<ShowGotPrizeModalOptions>()

// Emits
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'confirm'): void
}>()

function show(options: ShowGotPrizeModalOptions) {
  showOptions.value = options
  visible.value = true
}

function hide() {
  visible.value = false
}

function onClickConfirm() {
  hide()
  emit('confirm')
}

function onClickClose() {
  hide()
  emit('close')
}

defineExpose({
  show,
  hide,
})
</script>

<style scoped lang="less">
.got-prize-modal {
  width: 100vw;
  height: 100vh;
  left: 0rpx;
  top: 0rpx;
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);

  // 弹窗内容
  .content {
    position: relative;
    width: 550rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    gap: 48rpx;
    border-radius: 48rpx;
    padding: 56rpx 48rpx 64rpx;

    .title {
      color: #bc7900;
      font-weight: bold;
      font-size: 44rpx;
    }

    .prize-image {
      width: 187rpx;
      height: 187rpx;
      border-radius: 18px;
      object-fit: contain;
      z-index: 3;
      background-color: #fff9f1;
    }

    .prize-name {
      width: 348rpx;
      height: 30rpx;
      font-size: 34rpx;
      line-height: 30rpx;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .confirm-btn {
      width: 100%;
      height: 97rpx;
      color: white;
      background: #d3a357;
      border-radius: 100rpx;

      &::after {
        border: none;
      }
    }

    .tips{
      text-align: center;
      position: absolute;
      left: 0;
      bottom: 24rpx;
      width: 100%;
      font-size: 24rpx;
      color: #3b3b3b;
    }

    .close-btn {
      width: 60rpx;
      height: 59rpx;
      position: absolute;
      left: 50%;
      bottom: -100rpx;
      transform: translateX(-50%);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: opacity 0.3s ease;
    }
  }
}
</style>

