<template>
  <div class="bi-user-protray" :class="['bi-user-protray--' + size, { 'is-link': $listeners.click }]" @click="handleClick">
    <div class="bi-user-protray__inner">
      <div v-if="showAvatar" class="bi-user-protray__avatar">
        <bi-user-avatar :size="size" :src="avatar" />
      </div>
      <div class="bi-user-protray__main">
        <div class="bi-user-protray__name" :title="name">{{ name }}</div>
        <slot name="addon"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import BiUserAvatar from '@huntianning/components/packages/user-avatar'

export default {
  name: 'BiUserPortray',
  components: {
    BiUserAvatar
  },
  props: {
    avatar: {
      type: String,
      default: ''
    },
    showAvatar: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'small'
    },
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less">
.bi-user-protray{
  display: inline-block;
  vertical-align: top;
  color: #131313;
  max-width: 100%;
  .bi-user-avatar {
    vertical-align: top;
  }
  &.is-link {
    cursor: pointer;
  }
}
.bi-user-protray__inner{
  display: flex;
  flex-direction: row;
}
.bi-user-protray__name{
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-user-protray__avatar{
  margin-right: 6px;
  line-height: 1em;
}
.bi-user-protray__main{
  flex: 1;
  min-width: 0;
}
.bi-user-protray--mini{
  .bi-user-protray__name{
    line-height: 24px;
  }
}
.bi-user-protray--small{
  .bi-user-protray__name{
    line-height: 28px;
  }
}
</style>
