<template>
	<view class="drawfailmodal" v-if="visible">
		<!-- 蒙层 -->
		<view class="drawfailmodal-mask" @click="handleCloseClick"></view>
		
		<!-- 弹窗内容 -->
		<view class="drawfailmodal-content">
			<span class="drawfailmodalbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
			<span class="drawfailmodalbgiknowbtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.iKnowBtn)})` }"
				@click="handleIKnowClick"></span>
			<span class="drawfailmodalbgclosebtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
				@click="handleCloseClick"></span>
		</view>
	</view>
</template>

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

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

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

// Emits
const emit = defineEmits(['close', 'i-know'])

// 配置对象
const config = drawFailModalConfig

// 我知道了按钮点击处理
const handleIKnowClick = () => {
	console.log('点击我知道了按钮')
	emit('i-know')
}

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

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