thebet365/apps/player/src/components/match-detail/MarketSelectionsPanel.vue

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { resolveSelectionLabel } from '../../utils/selectionLabel';
import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';

const props = defineProps<{
  selections: {
    id: string;
    selectionCode?: string;
    selectionName: string;
    selectionDisplayName?: string;
    odds: string;
  }[];
  isSelected: (id: string) => boolean;
  compact?: boolean;
  /** PC 行内横排：左标签右赔率，适合详情页全宽 */
  horizontal?: boolean;
  /** PC 卡片内：上标签下赔率，列数随选项数量 */
  desktopCard?: boolean;
  locked?: boolean;
  lineValue?: string | number | null;
}>();

const emit = defineEmits<{ pick: [id: string, event?: MouseEvent] }>();
const { t } = useI18n();
const { cancelClose } = useDesktopBetPopover();

function label(sel: (typeof props.selections)[number]) {
  if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
  if (sel.selectionCode) {
    return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName, {
      lineValue: props.lineValue,
    });
  }
  return sel.selectionName;
}

function onPick(id: string, event?: MouseEvent) {
  if (props.locked) return;
  emit('pick', id, event);
}

const gridCols = computed(() => {
  const n = props.selections.length;
  if (n <= 1) return 1;
  if (n === 2) return 2;
  if (n === 3) return 3;
  return 4;
});

const panelStyle = computed(() =>
  props.desktopCard ? { '--market-cols': String(gridCols.value) } : undefined,
);
</script>

<template>
  <div class="wrap" :class="{ compact, horizontal, desktopCard, locked }" @mouseenter="cancelClose">
    <div
      class="panel"
      :class="{ horizontal, 'desktop-card': desktopCard }"
      :style="panelStyle"
    >
      <button
        v-for="sel in selections"
        :key="sel.id"
        type="button"
        class="odds-btn"
        :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
        :data-bet-selection-id="sel.id"
        :disabled="locked"
        @mouseenter="onPick(sel.id, $event)"
        @click="onPick(sel.id, $event)"
      >
        <span class="label">{{ label(sel) }}</span>
        <span class="odds">{{ sel.odds }}</span>
      </button>
    </div>
  </div>
</template>


<style scoped>
.wrap {
  padding: 6px 8px 8px;
  background: var(--bg-card-elevated);
  border-top: 1px solid var(--border);
}

.wrap.compact {
  padding: 2px 4px 4px;
}

.wrap.compact:not(.horizontal) {
  padding: 2px 4px 4px;
}

.wrap.horizontal {
  padding: 0;
  background: transparent;
}

.wrap.desktopCard {
  padding: 0;
  background: transparent;
}

.wrap.locked {
  opacity: 0.78;
}

/* ── 基础网格 ── */
.panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.wrap.compact .panel:not(.horizontal) {
  gap: 2px;
}

.wrap.compact:not(.horizontal) .odds-btn {
  min-height: 30px;
  padding: 3px 2px;
  font-size: 10px;
}

/* ── Horizontal 行内布局 ── */
.panel.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.panel.horizontal .odds-btn {
  flex: 1 1 72px;
  min-width: 72px;
  max-width: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 4px 10px;
}

.panel.horizontal .odds-btn .label {
  font-size: 10px;
  text-align: left;
}

.panel.horizontal .odds-btn .odds {
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Desktop Card 紧凑布局 ── */
.panel.desktop-card {
  display: grid;
  grid-template-columns: repeat(var(--market-cols, 3), minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.panel.desktop-card .odds-btn {
  min-height: 34px;
  padding: 3px 4px;
  gap: 1px;
}

.panel.desktop-card .odds-btn .label {
  font-size: 8px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel.desktop-card .odds-btn .odds {
  font-size: 12px;
  line-height: 1.1;
}

/* ── Odds Button ── */
.odds-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.odds-btn:hover:not(.odds-btn--locked) {
  border-color: var(--primary-light);
  background: var(--bg-hover);
}

.odds-btn.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(244, 162, 97, 0.08);
}

.odds-btn.selected .label {
  color: var(--primary-light);
}

.odds-btn.selected .odds {
  color: var(--primary);
}

.odds-btn--locked {
  background: var(--bg-elevated);
  border-color: var(--border);
  cursor: not-allowed;
}

.odds-btn--locked .label,
.odds-btn--locked .odds {
  color: var(--text-muted);
}

.label {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.15;
  font-weight: 600;
}

.odds {
  font-size: 15px;
  font-weight: 800;
  color: var(--warning);
}
</style>