<template>
  <div class="avatar-wrap">
    <ImageFormat class="img-avatar" :lazy="true" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
    <span v-if="identityClass" class="identity-icon" :class="identityClass"></span>
  </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;
    },
    identityClass() {
      let className = '';

      switch (+this.group) {
        case 1: // 普通马甲
        case 4: // 社区大号
        case 6: // 评论马甲
          break;
        case 3: // 官方号
          className = 'identity-gf';
          break;
        case 5: // 品牌号
          className = 'identity-pp';
          break;
        case 2: // 编辑
        case 7: // 授权KOL
          className = 'identity-king';
          break;
        default:
          break;
      }

      return className ? `${className}${this.small ? '-small' : ''}` : '';
    }
  },
  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;
}

.identity-icon {
  width: 45%;
  height: 45%;
  position: absolute;
  right: -6%;
  bottom: -6%;
  background-size: 100%;
}

.identity-gf {
  background-image: url("~statics/image/userpage/GF-big-ic.png");
}

.identity-gf-small {
  background-image: url("~statics/image/userpage/GF-small-ic.png");
}

.identity-king,
.identity-king-small {
  background-image: url("~statics/image/userpage/KING-ic.png");
}

.identity-pp {
  background-image: url("~statics/image/userpage/PP-big-ic.png");
}

.identity-pp-small {
  background-image: url("~statics/image/userpage/PP-small-ic.png");
}
</style>