<template>
  <div>
    <div v-if="imageUrl">
      <el-image
        lazy
        fit="fill"
        :key="Math.random()"
        :class="{'custom-avatar': isUser, 'custom-image': !isUser}"
        :src="imageUrl"
        :preview-src-list="[imageUrl]">
        <div slot="error" class="image-slot" style="height: 36px; line-height: 36px;">
          <img class="empty-image" v-show="isUser" :src="emptySrc">
        </div>
      </el-image>
    </div>
    <div v-else>
      <slot name="noAvatar">
        <img class="empty-image" v-show="isUser" :src="emptySrc">
        <span v-show="!isUser" style="color: #ccc">-</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListImage",
  props: {
    imageUrl: {
      required: true,
      default: ''
    },
    // 是否为头像
    isUser: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 占位图片
      emptySrc: require('@/assets/images/placeholder-avatar.jpg')
    }
  }
}
</script>

<style scoped>
.empty-image {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  border-radius: 18px;
}
</style>
