<template>
	<view class="rulemodal" v-if="visible">
		<!-- 蒙层 -->
		<view class="rulemodal-mask" @click="handleCloseClick"></view>
		
		<!-- 弹窗内容 -->
		<view class="rulemodal-content">
			<span class="rulemodalbg"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
			
			<!-- 规则内容区域 - 支持滚动 -->
			<view class="rulemodal-text-container">
				<image class="rulemodaltextimg"
					:src="`${$baseUrl}${getRuleImgUrl()}`"
					mode="widthFix"
					@load="console.log('规则图片加载成功')"
					@error="console.log('规则图片加载失败')"></image>
			</view>
			
			<span class="rulemodalclosebtn"
				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
				@click="handleCloseClick"></span>
		</view>
	</view>
</template>

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

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

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// Props
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	rules: {
		type: String,
		default: ''
	},
	config: {
		type: Object,
		default: () => ({})
	}
})

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

// 配置对象
const config = act915RuleModalConfig

// 获取规则图片URL
const getRuleImgUrl = () => {
	// 优先使用接口返回的 ruleImg
	if (props.config && props.config.ruleImg) {
		console.log('使用接口返回的 ruleImg:', props.config.ruleImg)
		return props.config.ruleImg
	}
	// 回退到默认配置
	console.log('使用默认配置的 textImg:', config.images.textImg)
	const defaultUrl = getImageUrl(config.images.textImg)
	console.log('默认图片URL:', defaultUrl)
	return defaultUrl
}

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

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