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

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-10-26 20:09:23
 */
export default {
  name: "WlUserGroups",
};
</script>

<script setup lang="ts">
import { computed } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

type IData = {
  avatar: string;
};

type Props = {
  data?: IData[];
  size?: string | number;
  avatar_offset?: string | number;
};
const props = withDefaults(defineProps<Props>(), {
  data: null,
  size: "16",
  avatar_offset: "-10px",
});

const avatarStyle = computed(() => {
  let offset =
    typeof props.avatar_offset === "number"
      ? props.avatar_offset + "px"
      : props.avatar_offset;
  return {
    width: `${props.size}px`,
    height: `${props.size}px`,
    "--avatarOffset": offset,
  };
});
</script>

<style lang="scss">
.user-groups[data-weiling-mobile-ui-wl-user-groups] {
  display: flex;

  > li {
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;

    &:not(:first-child) {
      margin-left: var(--avatarOffset);
    }
  }
}
</style>
