<template>
  <div class="chat-avatar">
    <slot v-if="!!!avatar.file"></slot>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  export default class ChatAvatar extends Vue {
    @Prop() avatar: any = '';

    get avatar_background(): any {
      if (this.avatar.file) {
        return {
          'background-image': 'url('+this.$root.basePath+'/data/'+this.avatar.file.externalName+')'
        }
      }
      return {
        'background-color': 'hsla(180,'+Math.floor(Math.random()*90 + 50)+'%,'+Math.floor(Math.random()*50)+'%,1)'
      };
    }
  }
</script>

<style lang="scss" scoped>

.chat-avatar {
  display: inline-block;
  width: 63px;
  min-width: 63px;
  height: 63px;
  color: white;
  background-position: center;
  background-size: cover;
  text-align: center;
  font-size: 50px;
  line-height: 63px;
  border-radius: 100%;
  overflow: hidden;

  &.for-chat-list-item {
    width: 63px;
    height: 63px;
    text-align: center;
    line-height: 63px;
    // text-shadow: 0 0 5px black;
  }
}

</style>