<template>
  <div class="app-image" :class="{ 'app-logo': isLogo }" :style="style">
    <van-icon v-if="!src" :name="fallbackIcon" :size="size" :color="color" />
  </div>
</template>

<script>
export default {
  name: 'AppImage',
  props: {
    src: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '24px'
    },
    height: {
      type: [String, Number],
      default: '24px'
    },
    fallbackIcon: {
      type: String,
      default: 'photo-o'
    },
    size: {
      type: [String, Number],
      default: '24'
    },
    color: {
      type: String,
      default: '#3D8BFF'
    },
    isLogo: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    style() {
      const width = typeof this.width === 'number' ? `${this.width}px` : this.width;
      const height = typeof this.height === 'number' ? `${this.height}px` : this.height;
      
      return {
        width,
        height,
        backgroundImage: this.src ? `url(${this.src})` : 'none',
        backgroundSize: 'contain',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      };
    }
  }
}
</script>

<style scoped>
.app-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-logo {
  background-color: #B66FFF;
  border-radius: 12px;
  overflow: hidden;
}

.app-logo .van-icon {
  color: white !important;
}
</style> 