<template>
  <ul class="user-groups">
    <li v-for="(item, index) in data" :key="index" :style="avatarStyle">
      <WlPic :src="item.avatar" />
    </li>
  </ul>
</template>

<script>
import WlPic from "@packages/components/Common/WlPic/src/index.vue";

export default {
  name: "WlUserGroups",
  components: { WlPic },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    size: {
      type: [String, Number],
      default: "16",
    },
    avatar_offset: {
      type: [String, Number],
      default: "-10px",
    },
  },
  computed: {
    avatarStyle() {
      let offset =
        typeof this.avatar_offset === "number" ? this.avatar_offset + "px" : this.avatar_offset;
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        "--avatarOffset": offset,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.user-groups {
  display: flex;
  > li {
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    &:not(:first-child) {
      margin-left: var(--avatarOffset);
    }
  }
}
</style>
