<template>
  <component
    :is="_elAvatar"
    class="el-avatar-group"
    role="avatargroup"
    :class="[avatarGroupSize ? 'el-avatar-group--' + size : '', type ? 'el-avatar-group--' + type : '', getGridClass()]"
  >
    <slot></slot>
  </component>
</template>
<script>
export default {
  name: "ElAvatarGroup",

  componentName: "ElAvatarGroup",

  props: {
    size: String,
    type: String
  },

  computed: {
    _elAvatar() {
      let tag = (this.$vnode.data || {}).tag;
      if (!tag || tag === "component") tag = "div";
      return tag;
    },
    avatarGroupSize() {
      return this.size || (this.$ELEMENT || {}).size;
    }
  },
  methods: {
    getGridClass() {
      if (this.type === 'grid') {
        const l = this.$slots.default.length;
        if (l > 4) {
          return `grid-img-3`;
        } else if (l > 1) {
          return `grid-img-2`;
        } else {
          return `grid-img-1`;
        }
      }
      return '';
    }
  },
  created() {
    if (this.type !== 'grid' && this.$slots.default.length > 5) {
      const lastNode = this.$slots.default[4]
      const other = this.$slots.default.splice(4)
      // 以后看有没有更优雅的写法
      lastNode.componentOptions.propsData.src = '';
      lastNode.componentOptions.propsData.icon = '';
      lastNode.componentOptions.children = [{ text: `+${other.length}` }];
      this.$slots.default.push(lastNode)
    } else if (this.type === 'grid') {
      this.$slots.default.splice(9);
    }
  }
};
</script>
