<template>
    <div class="group-avatar" :class="'count-' + displayUsers.length">
      <div
        v-for="(img, index) in displayUsers"
        :key="index"
        class="avatar-item"
        :style="{ backgroundImage: `url(${getAvatarUrl(img)})` }"
      ></div>
    </div>
  </template>
  
  <script setup>
  import { computed } from "vue";
  
  const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
  
  const props = defineProps({
    users: {
      type: Array,
      default: () => []
    }
  });
  
  // 最多显示 4 个头像
  const displayUsers = computed(() => (props.users ?? []).slice(0, 4));
  
  // 拼接头像地址
  const getAvatarUrl = (img) => {
    return formatAvatarUrl(img);
  };
  const formatAvatarUrl = (url) => url && /^https?:\/\//.test(url) ? url: (IM_PATH + (url || ''))
  </script>
  
  <style scoped>
  .group-avatar {
    position: relative;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    margin-right: 12px;
  }
  
  /* 通用头像 */
  .avatar-item {
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 1 人：大图 */
  .count-1 .avatar-item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
  
  /* 2 人：左右两张（缩小比例） */
  .count-2 .avatar-item {
    width: 46%;
    height: 80%;
    margin: 0 2%;
  }
  
  /* 3 人：上 1 下 2 */
  .count-3 .avatar-item:nth-child(1) {
    width: 60%;
    height: 50%;
    margin: 0 auto 2px auto;
  }
  .count-3 .avatar-item:nth-child(n+2) {
    width: 46%;
    height: 46%;
    margin: 0 2%;
  }
  
  /* 4 人：2x2 */
  .count-4 .avatar-item {
    width: 46%;
    height: 46%;
    margin: 2%;
  }
  
  /* 5-9 人：3x3 宫格（留白） */
  .count-5 .avatar-item,
  .count-6 .avatar-item,
  .count-7 .avatar-item,
  .count-8 .avatar-item,
  .count-9 .avatar-item {
    width: 30%;
    height: 30%;
    margin: 2%;
  }
  </style>
  