<template>
  <view v-if="visible" class="rules-overlay" @touchmove.stop.prevent>
    <view class="rules-mask" @tap="close"></view>
    <view class="rules-panel" @tap.stop>
      <view class="rules-header">
        <text class="rules-title">{{ title }}</text>
        <text class="rules-close" @tap="close">×</text>
      </view>
      <scroll-view scroll-y class="rules-content">
        <!-- 使用 rich-text 渲染富文本 HTML -->
        <rich-text v-if="content" class="rules-richtext" :nodes="content"></rich-text>
        <view v-else class="rules-empty">暂无活动规则</view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '活动规则'
  },
  content: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:visible'])

function close() {
  emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.rules-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9000;
}

.rules-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10rpx);
}

.rules-panel {
  position: absolute;
  left: $spacing-lg;
  right: $spacing-lg;
  bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  max-height: 70vh;
  background: rgba($bg-card, 0.95);
  border-radius: $radius-xl;
  box-shadow: $shadow-card;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}

.rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-lg;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
}

.rules-title {
  font-size: $font-lg;
  font-weight: 800;
  color: $text-main;
}

.rules-close {
  font-size: 48rpx;
  line-height: 1;
  color: $text-tertiary;
  padding: 0 10rpx;
}

.rules-content {
  max-height: 55vh;
  padding: $spacing-lg;
}

.rules-richtext {
  font-size: $font-sm;
  color: $text-main;
  line-height: 1.8;
}

.rules-empty {
  text-align: center;
  color: $text-sub;
  padding: $spacing-xl;
  font-size: $font-sm;
}

@keyframes slideUp {
  from {
    transform: translateY(40rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>

