<template>
  <!-- 根据条件判断显示不同的图片元素 -->
  <!-- 如果不存在错误（isError为false）且图片路径（imgPath）有值，则显示此图片元素 -->
  <image v-if="!isError && imgPath"
         :src="imgPath"
         :style="imgStyle"
         :class="classList"
         :mode="imgMode"
         @error="imgError"
         @load="imgLoad"
         @tap="handleTap" />
  <!-- 如果存在错误或者图片路径无值，则显示默认图片元素 -->
  <image v-else
         :src="defaultImgPath"
         :style="imgStyle"
         :class="classList"
         @tap="handleTap" />
</template>

<script setup>
  // 使用 defineProps 定义组件接收的属性（props）
  const props = defineProps({
    // 图片的源路径，类型为字符串，默认值为空字符串
    src: {
      type: String,
      default: ''
    },
    // 图片的显示模式，类型为字符串，默认值为'scaleToFill'
    imgMode: {
      type: String,
      default: 'scaleToFill'
    },
    // 图片应用的类名列表，类型为数组，默认值是一个空数组
    classList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 图片的内联样式，类型为对象，默认值是一个空对象
    imgStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 默认失败图片类型，false为默认图片，true为默认头像图片，类型为布尔值，默认值为false
    defaultImgType: {
      type: Boolean,
      default: false
    }
  })

  // 通过计算属性 imgPath，调用 util.checkFileUrl 函数来处理传入的图片路径（props.src），
  // 可能会对路径进行合法性检查等操作后返回合适的路径
  const imgPath = computed(() => {
    return util.checkFileUrl(props.src)
  })
  // 通过计算属性 defaultImgPath 根据 defaultImgType 的值来确定默认图片的路径
  // 如果 defaultImgType 为 true，则返回头像图片的路径，否则返回默认图片的路径
  const defaultImgPath = computed(() => {
    if (props.defaultImgType) return '/static/images/icon/head04.png'
    return '/static/images/icon/def.png'
  })

  // 使用 defineEmits 定义组件向外触发的事件
  const emit = defineEmits(['imgError', 'imgLoad', 'handleTap'])
  // 定义一个响应式的变量 isError，初始值为 false，用于标记图片是否出现加载错误
  const isError = ref(false)
  // 图片加载出错时的处理函数
  // 将 isError 设置为 true，表示出现错误，并触发 'imgError' 事件向外通知
  const imgError = () => {
    isError.value = true
    emit('imgError')
  }

  // 图片加载成功时的处理函数，触发 'imgLoad' 事件，并传递加载成功的相关事件对象（e）向外通知
  const imgLoad = (e) => {
    emit('imgLoad', e)
  }

  // 图片被点击时的处理函数，触发 'handleTap' 事件向外通知
  const handleTap = () => {
    emit('handleTap')
  }
</script>

<style scoped>
  /* 为 image 标签设置样式，使其宽度和高度都占满父元素的 100% */
  image {
    width: 100%;
    height: 100%;
  }
</style>
