<template>
  <view class="got-prize-modal" v-if="visible">
    <!-- 蒙层 -->
    <view class="got-prize-modal-mask" @click="handleCloseClick"></view>

    <!-- 弹窗内容 -->
    <view class="got-prize-modal-content">
			<span class="got-prize-modal-bg"
            :style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
      <image class="got-prize-modal-awardimg" :src="`${$baseUrl}${awardImageUrl}`" mode="aspectFit"
             v-if="awardImageUrl" @error="console.log('奖品图片加载失败')"></image>
      <span class="got-prize-modal-awardname">{{ awardName }}</span>
      <span class="got-prize-modal-happygetbtn"
            :style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.happyGetBtn)})` }"
            @click="handleHappyGetClick"></span>
      <span class="got-prize-modal-closebtn"
            :style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
            @click="handleCloseClick"></span>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {config, getImageUrl} from './GotPrizeModal/config.js'
import './GotPrizeModal/index.less'

export interface ShowGotPrizeModalOptions {
  awardName: string
  awardImageUrl: string
}

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

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

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

function hide() {
  visible.value = false
}

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

<style scoped>
.got-prize-modal {
  width: 100vw;
  height: 100vh;
  left: 0rpx;
  top: 0rpx;
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  // 蒙层

  &-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  // 弹窗内容

  &-content {
    width: 550rpx;
    height: 616rpx;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &-bg {
    width: 550rpx;
    height: 616rpx;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  &-awardimg {
    width: 180rpx;
    height: 180rpx;
    position: absolute;
    top: 150rpx;
    left: 185rpx;
    object-fit: contain;
    z-index: 3;
  }

  &-awardname {
    width: 348rpx;
    height: 30rpx;
    position: absolute;
    top: 365rpx;
    left: 101rpx;
    font-size: 29rpx;
    line-height: 30rpx;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-happygetbtn {
    width: 465rpx;
    height: 97rpx;
    position: absolute;
    top: 434rpx;
    left: 42rpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.8;
    }
  }

  &-closebtn {
    width: 60rpx;
    height: 59rpx;
    position: absolute;
    top: 660rpx;
    left: 245rpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.8;
    }
  }
}
</style>

