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

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import OutrightOptionCard from './OutrightOptionCard.vue';
import saishiImg from '../../assets/images/saishi.webp';
import cardBg from '../../assets/images/card-bg.webp';

const matchCardBg = `url(${cardBg})`;

export interface OutrightSelection {
  id: string;
  teamCode: string;
  teamName: string;
  logoUrl?: string | null;
  odds: string;
  oddsVersion: string;
}

export interface OutrightEvent {
  id: string;
  leagueId: string;
  leagueCode?: string;
  leagueName: string;
  title: string;
  selectionCount?: number;
  selections: OutrightSelection[];
}

const props = defineProps<{
  event: OutrightEvent;
  expanded: boolean;
}>();

const emit = defineEmits<{
  toggle: [];
  pick: [selection: OutrightSelection];
}>();

const { t } = useI18n();

const headTitle = computed(() => {
  const raw = props.event.title.replace(/^\*+/, '').trim();
  return raw || props.event.leagueName || t('bet.tab_outright');
});

const headMeta = computed(() => {
  const total = props.event.selectionCount ?? props.event.selections.length;
  return t('bet.outright_teams_count', { n: total });
});
</script>

<template>
  <section class="event-block">
    <button type="button" class="event-head" :class="{ 'is-expanded': expanded }" :aria-expanded="expanded" @click="emit('toggle')">
      <span class="toggle-icon" :class="{ open: expanded }">
        <span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
      </span>
      <span class="event-head-text">
        <span class="event-title">{{ headTitle }}</span>
        <span v-if="event.leagueName && event.leagueName !== headTitle" class="event-league">
          {{ event.leagueName }}
        </span>
        <span class="event-meta">{{ headMeta }}</span>
      </span>
      <img :src="saishiImg" alt="" class="event-saishi" />
    </button>

    <div v-show="expanded" class="options-scroll">
      <div class="options-grid">
        <OutrightOptionCard
          v-for="sel in event.selections"
          :key="sel.id"
          :team-code="sel.teamCode"
          :team-name="sel.teamName"
          :logo-url="sel.logoUrl"
          :odds="sel.odds"
          @pick="emit('pick', sel)"
        />
      </div>
    </div>
  </section>
</template>

<style scoped>
.event-block {
  position: relative;
  isolation: isolate;
  margin-bottom: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.event-head {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}

.event-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

.toggle-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F5F7FA;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.toggle-icon.open {
  border-color: #003D6B;
}

.toggle-mark {
  color: #003D6B;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.event-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-title {
  font-size: 13px;
  font-weight: 800;
  color: #003D6B;
  line-height: 1.35;
}

.event-league {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  line-height: 1.3;
}

.event-meta {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
}

.event-saishi {
  flex-shrink: 0;
  height: 44px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  padding-left: 8px;
  border-left: 1px solid #E5E7EB;
}

.options-scroll {
  max-height: 408px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #E5E7EB transparent;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
</style>