<template>
  <div class="avatar-wrap">
    <ImageFormat class="img-avatar" :lazy="true" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
  </div>
</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
    },
    small: {
      type: Boolean,
      default: false
    },
    group: [Number, String]
  },
  data() {
    return {
      imgSrc: this.src,
      defaultSrc: 'https://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="css" scoped>
.avatar-wrap {
  display: inline-block;
  position: relative;

  > img {
    width: 100%;
    height: 100%;
  }
}

.img-avatar {
  border-radius: 50%;
  overflow: hidden;
}
</style>