<template>
  <ui-image class="bi-user-avatar" :class="{'is-round': round}" :src="avatar" :style="style" />
</template>
<script>
import UiImage from '@huntianning/components/packages/image'

export default {
  name: 'BiUserAvatar',
  components: {
    UiImage
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    round: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    style() {
      const sy = {}
      if (this.size === 'large') {
        sy.width = '54px'
        sy.height = '54px'
      } else if (this.size === 'medium') {
        sy.width = '36px'
        sy.height = '36px'
      } else if (this.size === 'small') {
        sy.width = '28px'
        sy.height = '28px'
      } else if (this.size === 'mini') {
        sy.width = '22px'
        sy.height = '22px'
      }
      return sy
    },
    avatar() {
      return this.src || require('./default-avatar.svg')
    }
  }
}
</script>
<style lang="less">
.bi-user-avatar{
  &.is-round {
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
