<template>
  <div class="render-card-users">
    <div
      class="users-item"
      v-for="item in list"
      :key="item.id"
      @click.stop="onItem(item)"
    >
      <WlPic :src="item.head_img_url || defaultAvatar" alt="" />
      <WlStaffName
        class="user-name"
        :class="{'user-name--clickable': props.listItem?.allowClick && props.listItem?.viewType}"
        :name="item.nick_name"
        :openid="item.userid_third"
        :is_trial="is_trial"
      />
    </div>
  </div>
</template>

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

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

const emit = defineEmits<{
  (e: "onItem", val: any): void;
}>();

/* 数据处理 */
const list = computed(() => {
  return typeDetection(props.data) === "object" ? [props.data] : props.data;
});

/* 点击用户 */
const onItem = (item: any) => {
  if (!props.listItem?.allowClick) return;
  emit("onItem", {
    data: item,
    listItem: props.listItem,
  });
};
</script>

<style scoped lang="scss">
.render-card-users {
  .users-item {
    display: inline-flex;
    cursor: pointer;
    margin-right: j(10);
    .wl-img {
      width: j(20);
      height: j(20);
      border: j(1) solid #e4e9ed;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .user-name {
      margin-left: j(5);
      &--clickable {
        color: var(--wl-primary-color);
      }
    }
  }
}
</style>
