thebet365/apps/player/src/components/outright/OutrightPanel.vue

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import OutrightEventSection, {
  type OutrightEvent,
  type OutrightSelection,
} from './OutrightEventSection.vue';
import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
import { useAuthStore } from '../../stores/auth';
import emptyMatchesImg from '../../assets/images/generated/empty-matches-stadium-v1.webp';
import GoldSpinner from '../../components/GoldSpinner.vue';
import { useOutrightEvents } from '../../composables/useOutrightEvents';

const props = defineProps<{
  activated?: boolean;
}>();

const { t } = useI18n();
const auth = useAuthStore();
const { loading, loadError, events, load } = useOutrightEvents();

function goLogin() {
  auth.showLoginPrompt('/bet');
}

const expanded = ref<Set<string>>(new Set());
const modalOpen = ref(false);
const activePick = ref<OutrightPick | null>(null);

const eventCount = computed(() => events.value.length);
const totalSelections = computed(() =>
  events.value.reduce((sum, e) => sum + e.selections.length, 0),
);

function syncExpandedAfterLoad() {
  const ids = events.value.map((e) => e.id);
  const kept = [...expanded.value].filter((id) => ids.includes(id));
  if (kept.length > 0) {
    expanded.value = new Set([kept[0]]);
    return;
  }
  if (ids.length > 0) {
    expanded.value = new Set([ids[0]]);
  } else {
    expanded.value = new Set();
  }
}

watch(
  () => events.value.length,
  (len, prev) => {
    if (len > 0 && prev === 0) syncExpandedAfterLoad();
  },
);

// 每次切回优胜冠军 Tab 时静默刷新赔率
watch(
  () => props.activated,
  (active) => {
    if (active && events.value.length > 0) void load({ silent: true });
  },
);

function toggle(id: string) {
  const next = new Set(expanded.value);
  if (next.has(id)) next.delete(id);
  else next.add(id);
  expanded.value = next;
}

function openBet(event: OutrightEvent, sel: OutrightSelection) {
  if (event.bettingOpen === false || event.status === 'SETTLED') return;
  if (!auth.token) {
    goLogin();
    return;
  }
  activePick.value = {
    selectionId: sel.id,
    oddsVersion: sel.oddsVersion,
    teamCode: sel.teamCode,
    teamName: sel.teamName,
    odds: sel.odds,
    eventTitle: event.title,
  };
  modalOpen.value = true;
}

function closeModal() {
  modalOpen.value = false;
  activePick.value = null;
}
</script>

<template>
  <div class="outright-panel">
    <div v-if="loading" class="state">
      <GoldSpinner :size="36" />
    </div>
    <template v-else-if="events.length">
      <p v-if="eventCount > 1" class="panel-summary">
        {{ t('bet.outright_events_summary', { events: eventCount, teams: totalSelections }) }}
      </p>
      <p v-if="events.some((e) => e.bettingOpen === false || e.status === 'SETTLED')" class="panel-settled-hint">
        {{ t('bet.outright_settled_hint') }}
      </p>

      <div class="event-list">
        <OutrightEventSection
          v-for="event in events"
          :key="event.id"
          :event="event"
          :expanded="expanded.has(event.id)"
          @toggle="toggle(event.id)"
          @pick="openBet(event, $event)"
        />
      </div>
    </template>

    <div v-else class="empty">
      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
      <p v-if="loadError">{{ loadError }}</p>
      <p v-else>{{ t('bet.no_outright') }}</p>
      <p v-if="!loadError" class="empty-hint">{{ t('bet.no_outright_hint') }}</p>
    </div>

    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
  </div>
</template>

<style scoped>
.outright-panel {
  padding: 4px 12px 0;
}

.panel-summary {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.panel-settled-hint {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.22);
  font-size: 12px;
  font-weight: 600;
  color: #c9a227;
  line-height: 1.45;
}

.event-list {
  padding-bottom: 8px;
}

.state,
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  padding: 34px 20px 44px;
  font-weight: 600;
}

.empty-icon {
  width: min(270px, 82vw);
  aspect-ratio: 16 / 9;
  height: auto;
  margin-bottom: 12px;
  border-radius: 8px;
  object-fit: cover;
  opacity: 0.86;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.empty-hint {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}
</style>