<template>
  <div class="media-section" v-if="hasImages">
    <div class="image-grid">
      <div 
        v-for="(image, index) in imageFields" 
        :key="index"
        class="image-card"
        @click="openImageModal(image.url)"
      >
        <img :src="image.url" :alt="image.fieldname" />
      </div>
    </div>
    
    <!-- 图片预览弹窗 -->
    <n-modal v-model:show="showModal" :mask-closable="true">
      <div class="image-modal-container">
        <button class="close-btn" @click="showModal = false">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <img :src="modalImageUrl" class="preview-image" />
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { NModal } from 'naive-ui'

const props = defineProps<{
  metaFields: any[]
  record: Record<string, any>
  pageMeta: any
}>()

// 弹窗状态
const showModal = ref(false)
const modalImageUrl = ref('')

// 图片字段处理 - 基于 pageMeta.image_field 配置
const imageFields = computed(() => {
  // 检查 pageMeta 中是否配置了 image_field
  const imageFieldName = props.pageMeta?.image_field
  
  if (!imageFieldName || !imageFieldName.trim()) {
    return []
  }
  
  // 查找对应的字段定义
  const field = props.metaFields.find(f => f.fieldname === imageFieldName)
  if (!field) {
    return []
  }
  
  // 获取字段值
  const fieldValue = props.record[imageFieldName]
  if (!fieldValue || !fieldValue.trim()) {
    return []
  }
  
  return [{
    fieldname: imageFieldName,
    url: fieldValue,
    label: field.label || imageFieldName
  }]
})

const hasImages = computed(() => imageFields.value.length > 0)

// 打开图片弹窗
const openImageModal = (url: string) => {
  modalImageUrl.value = url
  showModal.value = true
}
</script>

<style scoped>
/* 媒体区域 */
.media-section {
  margin-bottom: 24px;
}

.media-section:last-child {
  margin-bottom: 0;
}

.media-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* 图片网格 */
.image-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-card {
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s ease;
  width: 100%;
}

.image-card:hover {
  transform: scale(1.02);
}

.image-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  overflow: hidden !important;
}

.preview-image {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
}

/* 弹窗容器 */
.image-modal-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: white;
  border-radius: 16px;
  padding: 5px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  z-index: 10;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #333;
  transform: scale(1.1);
}
</style>
