<script setup lang="ts">
import { ref } from "vue";

interface Props {
  src: string;
  alt?: string;
  width?: string | number;
  height?: string | number;
  fit?: "fill" | "contain" | "cover" | "none" | "scale-down";
  preview?: boolean;
  lazy?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  alt: "",
  width: "100%",
  height: "100%",
  fit: "cover",
  preview: true,
  lazy: false
});

const isPreviewVisible = ref(false);
const currentImageUrl = ref("");

const handleClick = () => {
  if (props.preview && props.src) {
    currentImageUrl.value = props.src;
    isPreviewVisible.value = true;
  }
};

const handleClose = () => {
  isPreviewVisible.value = false;
  currentImageUrl.value = "";
};

const handleImageError = (e: Event) => {
  const img = e.target as HTMLImageElement;
  img.src = "/img/placeholder.png";
};

const handlePreviewError = (e: Event) => {
  console.error('图片预览加载失败:', e.target);
};
</script>

<template>
  <div class="enhanced-image-container">
    <img
      :src="src"
      :alt="alt"
      :style="{ 
        width: typeof width === 'number' ? width + 'px' : width,
        height: typeof height === 'number' ? height + 'px' : height,
        objectFit: fit
      }"
      :loading="lazy ? 'lazy' : 'eager'"
      class="enhanced-image"
      @click="handleClick"
      @error="handleImageError"
    />
    
    <!-- 自定义预览弹窗 - 使用 Teleport 确保渲染到 body -->
    <Teleport to="body">
      <transition name="fade">
        <div 
          v-if="isPreviewVisible" 
          class="image-preview-overlay"
          @click.self="handleClose"
        >
          <div class="preview-content">
            <button class="preview-close" @click="handleClose">×</button>
            <img 
              :key="currentImageUrl" 
              :src="currentImageUrl" 
              :alt="alt"
              class="preview-image"
              @error="handlePreviewError"
            />
            <div class="preview-actions">
              <span class="image-info">{{ alt || '商品图片' }}</span>
            </div>
          </div>
        </div>
      </transition>
    </Teleport>
  </div>
</template>

<style scoped lang="scss">
.enhanced-image-container {
  display: inline-block;
  position: relative;
  
  .enhanced-image {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    object-fit: cover;
    
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      opacity: 0.9;
    }
  }
}

.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
  
  .preview-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .preview-close {
      position: absolute;
      top: -40px;
      right: 0;
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 50%;
      color: white;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
      }
    }
    
    .preview-image {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      animation: zoomIn 0.3s ease;
    }
    
    .preview-actions {
      margin-top: 20px;
      padding: 12px 24px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      backdrop-filter: blur(10px);
      
      .image-info {
        color: white;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .image-preview-overlay {
    .preview-content {
      max-width: 95vw;
      max-height: 95vh;
      
      .preview-close {
        top: -30px;
        width: 32px;
        height: 32px;
        font-size: 20px;
      }
      
      .preview-image {
        max-height: 75vh;
      }
    }
  }
}
</style>