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

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

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { drawSucModalConfig, getImageUrl } from './config.js'

// 组件名称
defineOptions({
	name: 'DrawSucModal'
})

// Props
defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	awardName: {
		type: String,
		default: ''
	},
	awardImageUrl: {
		type: String,
		default: ''
	}
})

// Emits
const emit = defineEmits(['close', 'happy-get'])

// 配置对象
const config = drawSucModalConfig

// 获取$baseUrl
const instance = getCurrentInstance()
const $baseUrl = instance.proxy.$baseUrl

// 开心领取按钮点击处理
const handleHappyGetClick = () => {
	console.log('点击开心领取按钮')
	emit('happy-get')
}

// 关闭按钮点击处理
const handleCloseClick = () => {
	console.log('关闭抽奖成功弹窗')
	emit('close')
}
</script>

<style lang="less" scoped>
@import './drawsucmodal.less';
</style>
