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

    <!-- 弹窗内容 -->
    <view class="rulemodal-content">
      <p class="rulemodal-title">活动规则</p>

      <!-- 规则内容区域 - 支持滚动 -->
      <view class="rulemodal-text-container">
        <!--							<image class="rulemodaltextimg"
                  :src="`${$baseUrl}${getRuleImgUrl()}`"
                  mode="widthFix"
                  @load="console.log('规则图片加载成功')"
                  @error="console.log('规则图片加载失败')"></image>-->
        <view class="rulemodal-text">
          <p v-for="(item, index) in ruleLines" :key="index">{{ item }}</p>
        </view>
      </view>

      <span class="rulemodalclosebtn"
            :style="{ backgroundImage: `url(${getImageUrl(config.images.closeBtn)})` }"
            @click="handleCloseClick"></span>
    </view>
  </view>
</template>

<script setup>
import {act1015RuleModalConfig, getImageUrl} from './config.js'
import {getCurrentInstance, computed} 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 ruleLines = computed(()=>{
  return props.rules.split('\n')
})

// 配置对象
const config = act1015RuleModalConfig

// 获取规则图片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>
