<template>
	<view class="drawsucmodal" v-if="visible">
		<span class="drawsucmodalbg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
		<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>
</template>

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

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

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

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

// 配置对象
const config = drawSucModalConfig

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

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

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