<script lang="ts" setup>
/**
 * VIP 组合徽标：等级徽标在下，期限丝带（透明底）叠在上方绑定
 * size: sm 顶栏 / md 表格 / lg 详情 / xl 诊所设置会员卡
 */
withDefaults(
  defineProps<{
    badgeUrl?: string;
    durationBadgeUrl?: string;
    levelName?: string;
    durationLabel?: string;
    size?: 'sm' | 'md' | 'lg' | 'xl';
  }>(),
  {
    badgeUrl: '',
    durationBadgeUrl: '',
    levelName: '',
    durationLabel: '',
    size: 'md',
  },
);
</script>
<template>
  <div
    v-if="badgeUrl || durationBadgeUrl"
    class="vip-badge-combo"
    :class="[`vip-badge-combo--${size}`]"
    :title="[durationLabel, levelName].filter(Boolean).join(' · ')"
  >
    <img
      v-if="badgeUrl"
      class="vip-badge-combo__level"
      :src="badgeUrl"
      :alt="levelName || '会员等级'"
    />
    <img
      v-if="durationBadgeUrl"
      class="vip-badge-combo__ribbon"
      :src="durationBadgeUrl"
      :alt="durationLabel || '会员类型'"
    />
  </div>
  <span v-else>-</span>
</template>
<style scoped>
.vip-badge-combo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.vip-badge-combo__level {
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}
.vip-badge-combo__ribbon {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
}
.vip-badge-combo--sm {
  width: 52px;
  height: 52px;
}
.vip-badge-combo--sm .vip-badge-combo__level {
  width: 48px;
  height: 48px;
}
.vip-badge-combo--sm .vip-badge-combo__ribbon {
  width: 72px;
  height: 28px;
}
.vip-badge-combo--md {
  width: 64px;
  height: 64px;
}
.vip-badge-combo--md .vip-badge-combo__level {
  width: 56px;
  height: 56px;
}
.vip-badge-combo--md .vip-badge-combo__ribbon {
  width: 84px;
  height: 30px;
}
.vip-badge-combo--lg {
  width: 96px;
  height: 96px;
}
.vip-badge-combo--lg .vip-badge-combo__level {
  width: 84px;
  height: 84px;
}
.vip-badge-combo--lg .vip-badge-combo__ribbon {
  width: 120px;
  height: 42px;
}
.vip-badge-combo--xl {
  width: 140px;
  height: 140px;
}
.vip-badge-combo--xl .vip-badge-combo__level {
  width: 120px;
  height: 120px;
}
.vip-badge-combo--xl .vip-badge-combo__ribbon {
  width: 168px;
  height: 58px;
}
</style>
