<script lang="ts" setup>
/**
 * 诊所列表 VIP 单元格：徽标+会员名+到期时间，点击打开 VIP 入口弹窗
 */
import { computed } from 'vue';

import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
import { formatVipDurationExpireLine } from '#/utils/vip';

const props = defineProps<{
  vip?: Record<string, any> | null;
}>();

const emit = defineEmits<{
  click: [];
}>();

/** 副行展示时长类型与到期，方便列表一眼看到过期时间 */
const subText = computed(() => formatVipDurationExpireLine(props.vip));
</script>
<template>
  <div
    class="store-vip-cell"
    role="button"
    tabindex="0"
    @click.stop="emit('click')"
    @keydown.enter.prevent="emit('click')"
  >
    <VipBadgeCombo
      size="sm"
      :badge-url="vip?.badge_url"
      :duration-badge-url="vip?.duration_badge_url"
      :level-name="vip?.level_name"
      :duration-label="vip?.duration_label"
    />
    <div class="store-vip-cell__text">
      <div class="store-vip-cell__name">{{ vip?.level_name || '普通会员' }}</div>
      <div class="store-vip-cell__sub">{{ subText }}</div>
    </div>
  </div>
</template>
<style scoped>
.store-vip-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
  transition: background 0.15s ease;
  max-width: 100%;
}
.store-vip-cell:hover {
  background: rgba(106, 205, 187, 0.12);
}
.store-vip-cell__text {
  min-width: 0;
  line-height: 1.25;
}
.store-vip-cell__name {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-vip-cell__sub {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .store-vip-cell:hover,
.dark .store-vip-cell:hover {
  background: rgba(106, 205, 187, 0.2);
}
</style>
