<template>
  <div class="right-preview">
    <div class="image-preview-area">
      <!-- 缩放控制工具栏 -->
      <div v-if="selectedImage" class="zoom-controls">
        <a-space>
          <a-button size="small" @click="zoomOut" :disabled="scale <= MIN_SCALE">
            <template #icon>
              <icon-minus />
            </template>
          </a-button>
          <span class="zoom-text">{{ Math.round(scale * 100) }}%</span>
          <a-button size="small" @click="zoomIn" :disabled="scale >= MAX_SCALE">
            <template #icon>
              <icon-plus />
            </template>
          </a-button>
          <a-button size="small" @click="resetZoom">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </div>
      
      <div v-if="!selectedImage" class="preview-header">
        <h3>暂无图像预览</h3>
        <p>请从左侧选择具体查看图像</p>
      </div>
      <div class="preview-content">
        <div 
          v-if="selectedImage" 
          class="image-viewer" 
          :class="{ 'dragging': isDragging }"
          @wheel="handleWheel" 
          @mousedown="handleMouseDown"
          @mousemove="handleMouseMove"
          @mouseup="handleMouseUp"
          @mouseleave="handleMouseLeave"
        >
          <div 
            class="image-container"
            :style="{ 
              transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
              transition: isDragging ? 'none' : 'transform 0.2s ease-out'
            }"
          >
            <img 
              :src="getImageUrl(selectedImage.imagePath)" 
              :alt="selectedImage.imageName"
              draggable="false"
              @load="onImageLoad"
            />
          </div>
        </div>
        <div v-else class="empty-preview">
          <icon-image class="empty-icon" />
          <p>请从下方缩略图中选择图像</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { IconImage, IconMinus, IconPlus, IconRefresh } from '@arco-design/web-vue/es/icon'

const props = defineProps<{
  selectedImage: any | null
}>()

// 缩放相关状态
const scale = ref(1)
const translateX = ref(0)
const translateY = ref(0)
const isDragging = ref(false)
const dragStartX = ref(0)
const dragStartY = ref(0)
const initialTranslateX = ref(0)
const initialTranslateY = ref(0)

// 图片尺寸
const imageWidth = ref(0)
const imageHeight = ref(0)
const containerWidth = ref(0)
const containerHeight = ref(0)

// 缩放限制
const MIN_SCALE = 0.1
const MAX_SCALE = 5
const SCALE_STEP = 0.1

// 监听图片变化，重置缩放状态
watch(() => props.selectedImage, () => {
  resetZoom()
})

// 重置缩放和位置
const resetZoom = () => {
  scale.value = 1
  translateX.value = 0
  translateY.value = 0
}

// 放大
const zoomIn = () => {
  const newScale = Math.min(MAX_SCALE, scale.value + SCALE_STEP)
  scale.value = newScale
}

// 缩小
const zoomOut = () => {
  const newScale = Math.max(MIN_SCALE, scale.value - SCALE_STEP)
  scale.value = newScale
  
  // 如果缩放到1或更小，重置位置
  if (newScale <= 1) {
    translateX.value = 0
    translateY.value = 0
  }
}

// 图片加载完成
const onImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  imageWidth.value = img.naturalWidth
  imageHeight.value = img.naturalHeight
  
  nextTick(() => {
    const container = img.parentElement?.parentElement
    if (container) {
      containerWidth.value = container.clientWidth
      containerHeight.value = container.clientHeight
    }
  })
}

// 计算边界限制
const getBoundaryLimits = () => {
  if (!imageWidth.value || !imageHeight.value || !containerWidth.value || !containerHeight.value) {
    return { maxX: 0, maxY: 0, minX: 0, minY: 0 }
  }
  
  const scaledWidth = imageWidth.value * scale.value
  const scaledHeight = imageHeight.value * scale.value
  
  const maxX = Math.max(0, (scaledWidth - containerWidth.value) / 2)
  const maxY = Math.max(0, (scaledHeight - containerHeight.value) / 2)
  
  return {
    maxX,
    maxY,
    minX: -maxX,
    minY: -maxY
  }
}

// 应用边界限制
const applyBoundaryLimits = () => {
  const { maxX, maxY, minX, minY } = getBoundaryLimits()
  
  translateX.value = Math.max(minX, Math.min(maxX, translateX.value))
  translateY.value = Math.max(minY, Math.min(maxY, translateY.value))
}

// 处理鼠标滚轮事件
const handleWheel = (event: WheelEvent) => {
  event.preventDefault()
  
  const delta = event.deltaY > 0 ? -SCALE_STEP : SCALE_STEP
  const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale.value + delta))
  
  if (newScale !== scale.value) {
    scale.value = newScale
    
    // 如果缩放到1或更小，重置位置
    if (newScale <= 1) {
      translateX.value = 0
      translateY.value = 0
    } else {
      // 应用边界限制
      applyBoundaryLimits()
    }
  }
}

// 处理鼠标按下事件
const handleMouseDown = (event: MouseEvent) => {
  event.preventDefault()
  isDragging.value = true
  dragStartX.value = event.clientX
  dragStartY.value = event.clientY
  initialTranslateX.value = translateX.value
  initialTranslateY.value = translateY.value
}

// 处理鼠标移动事件
const handleMouseMove = (event: MouseEvent) => {
  if (isDragging.value) {
    event.preventDefault()
    const deltaX = event.clientX - dragStartX.value
    const deltaY = event.clientY - dragStartY.value
    
    translateX.value = initialTranslateX.value + deltaX
    translateY.value = initialTranslateY.value + deltaY
    
    // 应用边界限制
    applyBoundaryLimits()
  }
}

// 处理鼠标松开事件
const handleMouseUp = (event: MouseEvent) => {
  event.preventDefault()
  isDragging.value = false
}

// 处理鼠标离开事件
const handleMouseLeave = () => {
  isDragging.value = false
}

// 获取完整的图片URL
const getImageUrl = (imagePath: string): string => {
  if (!imagePath) return ''
  if (imagePath.startsWith('http')) return imagePath
   const baseUrl = 'http://pms.dtyx.net:9158'
  return `${baseUrl}${imagePath}`
}
</script>

<style scoped lang="scss">
.right-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.zoom-controls {
  padding: 8px 16px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  
  .zoom-text {
    min-width: 50px;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
}

.image-preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;

  .preview-header {
    padding: 16px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    flex-shrink: 0;

    h3 {
      margin: 0 0 8px 0;
      font-size: 18px;
      color: #1f2937;
    }

    p {
      margin: 0;
      color: #6b7280;
      font-size: 14px;
    }
  }

  .preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;

    .image-viewer {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &.dragging {
        cursor: grabbing;
      }

      .image-container {
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center;
        width: 100%;
        height: 100%;

        img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border-radius: 8px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          pointer-events: none;
        }
      }
    }

    .empty-preview {
      text-align: center;
      color: #6b7280;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
      }

      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }
}
</style> 