<template>
  <view
    :class="[size, round ? 'round' : '', radius ? 'radius' : '', color ? 'bg-' + color : '', className]"
    :style="rootStyle"
    class="cu-avatar"
  >
    <slot></slot>
    <slot name="badge"></slot>
  </view>
</template>

<script>
export default {
  name: 'l-avatar',

  props: {
    src: {},
    size: { default: 'df' },
    round: {},
    radius: {},
    color: {}
  },

  computed: {
    rootStyle() {
      return this.getStyle({
        backgroundImage: this.src ? 'url(' + this.src + ')' : null,
        backgroundColor: this.color || this.src ? null : '#ccc'
      })
    }
  }
}
</script>
