<template>
  <ImageFormat :lazy="lazy" class="img-avatar" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
</template>

<script>
export default {
  name: 'WidgetAvatar',
  props: {
    src: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 35
    },
    height: {
      type: Number,
      default: 35
    },
    lazy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgSrc: this.src,
      defaultSrc: '//img12.static.yhbimg.com/article/2019/02/26/16/02456ade977d8dfdbc4ca548b196c1d62b.png?imageView/2/w/{width}/h/{height}'
    }
  },
  computed: {
    imageSrc() {
      return this.imgSrc || this.defaultSrc;
    }
  },
  watch: {
    src(val) {
      this.imgSrc = val;
    }
  },
  methods: {
    errorHandle() {
      this.imgSrc = this.defaultSrc;
    }
  }
};
</script>

<style lang="scss" scoped>
.img-avatar {
  border-radius: 50%;
  overflow: hidden;
}
</style>