<template>
  <div
    class="bi-user-avatar-cluster"
  >
    <div
      class="bi-user-avatar-cluster__item"
      v-for="item in items"
      :key="item.id"
    >
      <ui-user-avatar
        v-bind="item.props"
      ></ui-user-avatar>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import UserAvatar from '@huntianning/components/packages/user-avatar'

export default {
  name: 'BiUserAvatarCluster',
  components: {
    UiUserAvatar: UserAvatar
  },
  provide() {
    return {
      UserAvatarCluster: this
    }
  },
  props: {
    limit: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      items: []
    }
  },
  methods: {
    add(item) {
      if (!item) {
        return
      }
      if (this.items.some(v => v.id === item.id)) {
        return
      }
      this.items.push(item)
    },
    remove(id) {
      let index = -1
      this.items.some((v, i) => {
        if (v.id === id) {
          index = i
          return true
        }
      })
      this.items.splice(index, 1)
    }
  }
}
</script>
<style lang="less">
.bi-user-avatar-cluster{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bi-user-avatar-cluster__item{
  border: 2px solid #fff;
  margin-right: -12px;
  line-height: 1em;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  .bi-user-avatar {
    vertical-align: top;
  }
}
</style>
