<template>
  <div v-if="avatars" class="avatar-list-wrap">
    <ul v-if="avatarList" class="avatar-list">
        <li v-for="(item, index) in avatarList" :key="index" :style="item.style">
          <WidgetAvatar :src="item.src" width="100" height="100"></WidgetAvatar>
        </li>
        <li v-if="hasMore">
          <img src="//img12.static.yhbimg.com/evidenceImages/2019/01/30/17/02fdbbddfc30f18868f91406eed8a70fb9.png?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90">
        </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'WidgetAvatarGroup',
    props: {
      avatars: Array,
      option: {
        type: Object,
        default() {
          return {
            srcKey: 'src',
            maxDisplayNum: 0
          };
        }
      }
    },
    data() {
      return {
        hasMore: false
      }
    },
    computed: {
      avatarList() {
        let list = [];
        let length = this.avatars && this.avatars.length;

        if (this.option.maxDisplayNum > 0 && this.avatars.length > this.option.maxDisplayNum) {
          length = this.option.maxDisplayNum;
          this.hasMore = true;
        }

        for (let i = 0; i < length; i++) {
          let avt = this.avatars[i];
          let src = avt;

          if (this.option.srcKey && typeof avt !== 'string') {
            src = avt[this.option.srcKey] || '';
          }

          list.push({
            src: src,
            style: `z-index: ${length - i};`
          });
        }

        return list;
      }
    }
  };
</script>

<style type="css">
  .avatar-list-wrap {
    display: inline-block;
    vertical-align: middle;
  }

  .avatar-list {
    display: flex;

    li {
      width: 60px;
      height: 60px;
      border: 1px solid #fff;
      border-radius: 50%;
      overflow: hidden;
      margin-left: -18px;
      position: relative;

      &:first-child {
        margin-left: 0;
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>