<!--
/**
 * 全局图片组件
 * 
 * @author 系统开发团队
 * @date 2023-05-15
 * @version 1.0.0
 * @description 
 *   该组件是一个全局图片组件，用于处理图片URL，支持将远程图片URL转换为本地路径。
 *   主要特点：
 *   1. 自动处理图片URL，支持本地映射
 *   2. 处理图片加载失败的情况，显示默认图片
 *   3. 支持所有原生img标签的属性
 * 
 * @example
 * <AppImage src="http://example.com/image.jpg" alt="示例图片" />
 * 
 * @example
 * <AppImage 
 *   src="http://example.com/image.jpg" 
 *   alt="示例图片" 
 *   fallbackSrc="/images/default.png" 
 * />
 */
-->
<template>
  <img :src="processedSrc" :alt="alt" v-bind="$attrs" @error="handleError" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { convertImageUrl } from '@/utils/image-helper'

/**
 * 组件属性定义
 */
const props = defineProps({
  /**
   * 图片URL
   * 原始图片URL，将通过convertImageUrl函数处理
   */
  src: {
    type: String,
    required: true
  },
  /**
   * 图片alt属性
   * 图片的替代文本，用于无法显示图片时
   */
  alt: {
    type: String,
    default: ''
  },
  /**
   * 图片加载失败时显示的默认图片
   * 当原始图片加载失败时，将显示此图片
   */
  fallbackSrc: {
    type: String,
    default: '/images/no-image.png'
  }
})

/**
 * 图片加载失败标志
 * 用于跟踪图片是否加载失败
 */
const imgError = ref(false)

/**
 * 处理后的图片URL
 * 根据图片加载状态和配置，返回最终要显示的图片URL
 */
const processedSrc = computed(() => {
  // 如果图片加载失败且有设置fallbackSrc，则显示fallbackSrc
  if (imgError.value && props.fallbackSrc) {
    return props.fallbackSrc
  }
  // 否则返回处理后的原始URL
  return convertImageUrl(props.src)
})

/**
 * 处理图片加载失败事件
 * 当图片加载失败时，设置imgError为true，触发显示fallbackSrc
 */
const handleError = () => {
  console.warn(`图片加载失败: ${props.src}`)
  imgError.value = true
}
</script>
