<!--
图片预览组件

使用方法：
<ImagePreview 
  :visible="showImagePreview"
  :image-url="previewImageUrl"
  @close="showImagePreview = false"
/>

参数说明：
- visible: 控制组件显示/隐藏
- image-url: 要预览的图片URL
- @close: 关闭事件回调

特性：
- 响应式设计
- 支持点击遮罩关闭
- 可复用于多个页面
-->

<template>
  <div 
    v-if="visible" 
    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
    @click="handleBackdropClick"
  >
    <!-- 关闭按钮 - 固定在视口上 -->
    <div class="fixed top-4 right-10 z-[60]">
      <el-button :icon="Close" circle @click="handleClose"/>
    </div>
    
    <div class="relative max-w-[90vw] max-h-[90vh] overflow-auto">
      <!-- 图片容器 -->
      <div class="relative">
        <img 
          :src="imageUrl" 
          :alt="imageAlt"
          class="max-w-full object-contain rounded-lg shadow-2xl"
          @click.stop
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import {
    Close
} from '@element-plus/icons-vue'
// 定义组件属性
interface Props {
  visible: boolean
  imageUrl: string
  imageAlt?: string
}

// 定义组件事件
interface Emits {
  (e: 'close'): void
}

// 接收属性
const props = withDefaults(defineProps<Props>(), {
  imageAlt: '图片预览'
})

// 定义事件
const emit = defineEmits<Emits>()

// 处理关闭事件
const handleClose = () => {
  emit('close')
}

// 处理背景点击事件
const handleBackdropClick = (event: Event) => {
  // 只有点击背景遮罩时才关闭，点击图片本身不关闭
  if (event.target === event.currentTarget) {
    handleClose()
  }
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 