<template>
  <div>
    <div 
      class="x-image-preview" 
      :class="{ 'is-circle': shape === 'circle' }"
      :style="containerStyle"
      @click.stop="handleClick"
    >
      <!-- 图片容器 -->
      <a-avatar 
        :src="imageUrl" 
        :size="size" 
        :shape="shape === 'circle' ? 'circle' : 'square'"
        icon="picture"
        class="image-avatar"
      />
      
      <!-- 悬停遮罩层 -->
      <div v-if="preview && src" class="preview-mask">
        <a-icon type="eye" class="preview-icon" />
      </div>
    </div>
    
    <!-- 图片预览模态框 - 作为根级兄弟元素，不受图片容器的事件影响 -->
    <image-preview-modal
      v-if="previewVisible"
      :visible="previewVisible"
      :image-url="imageUrl"
      :image-name="imageName || extractFileName(src)"
      @close="handleCloseModal"
    />
  </div>
</template>

<script>
import ImagePreviewModal from '@vue2-client/base-client/components/common/ImagePreviewModal'

export default {
  name: 'XImagePreview',
  components: {
    ImagePreviewModal
  },
  props: {
    // 图片 URL
    src: {
      type: String,
      default: ''
    },
    // 图片尺寸
    size: {
      type: Number,
      default: 60
    },
    // 图片形状：square（方形）、circle（圆形）
    shape: {
      type: String,
      default: 'square',
      validator: (value) => ['square', 'circle'].includes(value)
    },
    // 是否启用预览功能
    preview: {
      type: Boolean,
      default: true
    },
    // 图片名称（用于下载）
    imageName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      previewVisible: false
    }
  },
  computed: {
    // 容器样式
    containerStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        borderRadius: this.shape === 'circle' ? '50%' : '4px'
      }
    },
    
    // 处理后的图片URL
    imageUrl() {
      if (!this.src) return ''
      
      // 如果是完整的URL（http/https/data:开头），直接返回
      if (/^(https?:\/\/|data:)/.test(this.src)) {
        return this.src
      }
      
      // 如果是相对路径，需要拼接baseURL
      // 获取当前页面的origin
      const origin = window.location.origin
      
      // 如果路径以/开头，直接拼接origin
      if (this.src.startsWith('/')) {
        return `${origin}${this.src}`
      }
      
      // 其他情况也拼接origin和/
      return `${origin}/${this.src}`
    }
  },
  methods: {
    // 处理点击事件
    handleClick(event) {
      if (this.preview && this.src) {
        // 阻止事件继续冒泡到表格
        if (event) {
          event.stopPropagation()
        }
        this.previewVisible = true
      }
      // 发出点击事件，供外部使用
      this.$emit('click')
    },
    
    // 处理关闭模态框
    handleCloseModal() {
      this.previewVisible = false
    },
    
    // 从 URL 中提取文件名
    extractFileName(url) {
      if (!url) return 'image'
      const parts = url.split('/')
      const fileName = parts[parts.length - 1]
      // 移除查询参数
      return fileName.split('?')[0] || 'image'
    }
  }
}
</script>

<style lang="less" scoped>
.x-image-preview {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
  cursor: pointer;
  
  .image-avatar {
    display: block;
    width: 100%;
    height: 100%;
    
    // 覆盖 Avatar 组件默认样式
    :deep(.ant-avatar) {
      width: 100%;
      height: 100%;
      line-height: inherit;
    }
    
    :deep(img) {
      object-fit: cover;
    }
  }
  
  // 预览遮罩层
  .preview-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    
    .preview-icon {
      font-size: 20px;
      color: #fff;
    }
  }
  
  // 悬停效果
  &:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
    
    .preview-mask {
      opacity: 1;
    }
  }
  
  // 圆形模式特殊处理
  &.is-circle {
    border-radius: 50%;
    
    .image-avatar {
      border-radius: 50%;
    }
  }
}

// 无图片时的占位样式
.x-image-preview .image-avatar {
  :deep(.ant-avatar-icon) {
    font-size: 24px;
    color: #bfbfbf;
  }
}
</style>
