<script setup lang="ts">
import DomImageRenderer from '../components/renderer/DomImageRenderer.vue'
import { MarkingTool } from '../composables/renderer/useMarkingDom'

interface Props {
  imageUrls: string[]
  markingData?: string
  score?: number
  fullScore?: number
  scale?: number
}

const props = withDefaults(defineProps<Props>(), {
  scale: 0.5, // 默认缩小显示
})

// 处理标记数据，确保每个图片都有对应的数据
const processedMarkingData = computed(() => {
  if (!props.markingData || typeof props.markingData !== 'string') {
    // 如果没有标记数据，为每个图片提供空的默认数据
    return props.imageUrls.map(() => ({
      version: '1.0',
      shapes: [],
      specialMarks: [],
      annotations: [],
    }))
  }

  let markingData = []
  try {
    markingData = JSON.parse(props.markingData)
  }
  catch (error) {
    console.error('解析标记数据失败:', error)
    markingData = []
  }

  // 确保标记数据数组长度与图片数组长度一致
  return props.imageUrls.map((_, index) => {
    const data = markingData?.[index]
    if (data && typeof data === 'object') {
      return {
        version: data.version || '1.0',
        shapes: data.shapes || [],
        specialMarks: data.specialMarks || [],
        annotations: data.annotations || [],
      }
    }
    return {
      version: '1.0',
      shapes: [],
      specialMarks: [],
      annotations: [],
    }
  })
})

// 处理layer准备就绪（只读模式不需要处理）
function handleLayerReady() {
  // 只读模式，不需要处理layer事件
}
</script>

<template>
  <view class="review-image-renderer">
    <!-- 图片列表 -->
    <view class="image-list flex flex-col gap-3">
      <view
        v-for="(imageUrl, index) in imageUrls"
        :key="`review_${index}`"
        class="image-item relative"
      >
        <!-- 图片渲染器 -->
        <view class="image-wrapper relative overflow-hidden rounded-2 shadow-sm">
          <DomImageRenderer
            :image-url="imageUrl"
            :scale="scale"
            :marking-data="processedMarkingData[index]"
            :current-tool="MarkingTool.SELECT"
            :read-only="true"
            :adaptive-width="true"
            @layer-ready="handleLayerReady"
          />

          <!-- 点击编辑提示 -->
          <view class="edit-hint absolute bottom-2 right-2 z-1">
            <view class="hint-badge rounded-1 bg-black bg-opacity-60 px-2 py-1 text-white">
              <view class="i-fluent:edit-20-filled mr-1 inline-block size-3" />
              <text class="hint-text text-xs">点击编辑</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="imageUrls.length === 0" class="empty-state flex-center h-32 rounded-2 bg-gray-100">
      <view class="text-center">
        <view class="i-fluent:image-20-filled mb-2 size-8 text-gray-400" />
        <text class="text-sm text-gray-400">暂无图片</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.review-image-renderer {
  width: 100%;
}

.image-item {
  width: 100%;
}

.image-wrapper {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.score-overlay {
  backdrop-filter: blur(2px);
}

.score-badge {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.score-text {
  line-height: 1;
  font-weight: 700;
}

.separator {
  line-height: 1;
  opacity: 0.8;
}

.full-score-text {
  line-height: 1;
  opacity: 0.9;
}

.edit-hint {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.image-wrapper:active .edit-hint {
  opacity: 1;
}

.hint-badge {
  display: flex;
  align-items: center;
  font-size: 10px;
}

.hint-text {
  line-height: 1;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
