<template>
  <div class="card-tags a-row" v-if="tagList?.length">
    <span class="tag-item a-row">
      {{ tagList[0].group_name }}：{{ tagList[0].tag_name }}
    </span>
    <span class="fs0" v-if="tagList.length > 1">{{
      `共${tagList.length}个`
    }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { VCardItem } from "../../types/interface";
interface Props {
  data: any;
  listItem: VCardItem;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return [];
  },
  listItem: () => {
    return {};
  },
});

// 标签数据处理
const tagList = computed(() => {
  return props.data?.flatMap((group: any) => {
    return group.tag_info?.map((tag: any) => ({
      ...tag,
      group_name: group.group_name,
    }));
  });
});
</script>

<style scoped lang="scss">
.card-tags {
  display: flex;
  align-items: center;

  .tag-item {
    line-height: j(18);
    padding: j(4) j(10) j(5);
    background: var(--wl-primary-color-light);
    border-radius: j(70);
    font-size: j(13);
    color: var(--wl-primary-color-dark);
    margin-right: j(4);
  }
  .a-row {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
  }
  .fs0 {
    flex-shrink: 0;
  }
}
</style>
