<template>
	<view class="rulemodal" v-if="visible">
		<span class="rulemodalbg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
		<span class="rulemodaltextimg"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.textImg)})` }"></span>
		<span class="rulemodalclosebtn"
			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
			@click="handleCloseClick"></span>
	</view>
</template>

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

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

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

// Emits
const emit = defineEmits(['close'])

// 配置对象
const config = act915RuleModalConfig

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

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