<template>
  <div class="user-groups" :class="{ 'a-row': listItemObj.aRow }">
    <WlPic
      v-for="(item, index) in list?.slice(0, 3)"
      :key="item?.id"
      class="user_img"
      :src="item?.head_img_url || item.add_user?.head_img_url || defaultAvatar"
      alt=""
      :class="{ 'uno-ml-n-10': index >= 1 }"
    />
    <WlStaffName
      class="user-groups-name"
      :class="{ 'a-row': listItemObj.aRow }"
      :name="getName(list)"
      :openid="list?.[0]?.userid_third"
      :is_trial="is_trial"
    />
    <span class="fs0" v-if="list?.length > 1">{{ `等${list?.length}人` }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import { typeDetection } from "../../hooks/utils";
import { VCardItem, VUser } from "../../types/interface";
import { defaultAvatar } from "@mobileUI/utils/cdn";
import WlStaffName from "@mobileUI/components/WlStaffName/src/index.vue";

interface Props {
  data: any;
  listItem: VCardItem;
  is_trial: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return {};
  },
  listItem: () => {
    return {
      aRow: true,
      sliceNum: 1,
    };
  },
  is_trial: false,
});

/* 数据处理 */
const list = computed(() => {
  return typeDetection(props.data) === "object" ? [props.data] : props.data;
});
const listItemObj = computed(() => {
  return {
    aRow: true,
    sliceNum: 1,
    ...props.listItem,
  };
});

/* 名称展示 */
const getName = (arr: VUser[]) => {
  const nameList = arr
    ?.map((e) => e.nick_name || e.add_user?.nick_name)
    ?.slice(0, listItemObj.value?.sliceNum);
  return arr?.length > 1 ? `${nameList?.join("、")}` : nameList?.[0];
};
</script>

<style scoped lang="scss">
.user-groups {
  display: flex;
  .user_img {
    width: j(20);
    height: j(20);
    border: j(1) solid #e4e9ed;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .user-groups-name {
    margin-left: j(6);
  }
}
.a-row {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
}
</style>
