<script setup lang="ts">
import type { CustomerProfileDto } from '#/api/customer';

import { Tag } from 'ant-design-vue';

import {
  formatInteger,
  resolveAvatarText,
  resolveTagColor,
} from '../composables/customer-profile-page/helpers';

interface Props {
  profile: CustomerProfileDto;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="cp-header">
    <div class="cp-avatar">{{ resolveAvatarText(props.profile.name) }}</div>

    <div class="cp-header-main">
      <div class="cp-name">{{ props.profile.name }}</div>
      <div class="cp-meta">
        {{ props.profile.phoneMasked }} · 首次下单
        {{ props.profile.firstOrderAt }} · 来源：{{
          props.profile.source || '--'
        }}
      </div>
      <div class="cp-member-meta">
        <template v-if="props.profile.member.isMember">
          {{ props.profile.member.tierName || '会员' }} · 积分
          {{ formatInteger(props.profile.member.pointsBalance) }} · 成长值
          {{ formatInteger(props.profile.member.growthValue) }} · 入会
          {{ props.profile.member.joinedAt || '--' }}
        </template>
        <template v-else>未入会</template>
      </div>
    </div>

    <div class="cp-tags">
      <Tag
        v-for="tag in props.profile.tags"
        :key="`${tag.code}-${tag.label}`"
        :color="resolveTagColor(tag.tone)"
      >
        {{ tag.label }}
      </Tag>
    </div>
  </div>
</template>
