<template>
  <view class="image-wrapper">
    <u-image 
      :showLoading="true"
      v-bind="$props"
      :src="src || EmptyImage"
      :style="{
        width: width + 'px',
        height: height + 'px',
      }"
      @click="onClick"
    >
      <template #loading>
        <u-loading-icon color="red"></u-loading-icon>
      </template>
      <template #error>
        <u-empty mode="page" text="图片加载失败" />
      </template>
    </u-image>
  </view>
</template>

<script setup lang="ts">
import EmptyImage from '@/static/EmptyImage.png';

const props = defineProps({	
  src: {
    type: String,
    required: true,
  },
  mode: {
    type: String,
    default: 'aspectFill',
  },
  canPreview: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [Number,String],
    default: 0,
  },
  height: {
    type: [Number,String],
    default: 0,
  },
})

const emit = defineEmits([ 'clcik' ])

function onClick() {
  if (props.canPreview) {
    uni.previewImage({
      urls: [props.src],
    });
  } 
  emit('clcik')
}
</script>