<template>
  <div class="sport-container" v-loading="loading">
    <!-- 顶部标题与自定义分页切换 -->
    <div class="header-action">
      <span class="title">{{ t('热门赛事') }}</span>
      
      <!-- 自定义分页组件: < 1/5 > -->
      <div class="custom-pagination">
        <span 
          class="pager-btn" 
          :class="{ disabled: currentIndex <= 0 }"
          @click="changePage(-1)"
        >&lt;</span>
        <span class="pager-text">{{ currentIndex + 1 }} / {{ list.length }}</span>
        <span 
          class="pager-btn" 
          :class="{ disabled: currentIndex >= list.length - 1 }"
          @click="changePage(1)"
        >&gt;</span>
      </div>
    </div>

    <!-- 赛程列表 -->
    <div class="schedule-list">
      <el-card 
        v-if="currentItem" 
        :key="currentItem.id" 
        class="match-card" 
        shadow="never"
        @click="goDetail(currentItem)"
      >
        <!-- 联赛信息与时间 -->
        <div class="match-info">
          <div class="league-box">
            <span class="league-name">{{ locale === 'zh' ? currentItem.league : currentItem.league_en }}</span>
          </div>
          <div class="status-box">
            <span class="match-state" :class="'state-' + currentItem.state">
              {{ getStateName(currentItem.state) }}
            </span>
          </div>
        </div>

        <div style="margin-bottom: 6px;">
          <span class="game-time">{{ currentItem.game_time }}</span>
        </div>

        <!-- 对阵双方 (上下排列) -->
        <div class="match-teams-vertical">
          <div class="team-row">
            <div class="team-info">
              <el-image :src="currentItem.home_team_logo" class="team-logo-small">
                <template #error><div class="image-slot">Logo</div></template>
              </el-image>
              <div class="team-name">{{ locale === 'zh' ? currentItem.home_team : currentItem.home_team_en }}</div>
            </div>
            <div class="score" v-if="currentItem.state !== 0">{{ currentItem.home_score ?? 0 }}</div>
          </div>

          <div class="team-row">
            <div class="team-info">
              <el-image :src="currentItem.guest_team_logo" class="team-logo-small">
                <template #error><div class="image-slot">Logo</div></template>
              </el-image>
              <div class="team-name">{{ locale === 'zh' ? currentItem.guest_team : currentItem.guest_team_en }}</div>
            </div>
            <div class="score" v-if="currentItem.state !== 0">{{ currentItem.guest_score ?? 0 }}</div>
          </div>
        </div>
      </el-card>

      <!-- 空状态 -->
      <el-empty v-if="list.length === 0 && !loading" description="暂无赛程数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { getSportSchedule } from '@/request/api.js'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

const router = useRouter()
const { t, locale } = useI18n()

// 响应式数据
const loading = ref(false)
const list = ref([])           // 所有数据
const currentIndex = ref(0)    // 当前显示第几条（从0开始）

// 当前展示的数据
const currentItem = computed(() => list.value[currentIndex.value] || null)

// 查询参数（去掉分页，请求尽量多的数据）
const queryParams = reactive({
  page: 1,
  limit: 999,        // 请求全部数据
  state: 1,
  is_rec: 1,
  from: 'pc'
})

// 状态映射
const getStateName = (state) => {
  const states = {
    0: t('未开始'),
    1: t('进行中'),
    2: t('已完场')
  }
  return states[state] || ''
}

// 切换显示项
const changePage = (step) => {
  const target = currentIndex.value + step
  if (target >= 0 && target < list.value.length) {
    currentIndex.value = target
  }
}

// 获取所有数据
const fetchData = async () => {
  loading.value = true
  try {
    const res = await getSportSchedule(queryParams)
    if (res.code === 1) {
      list.value = res.data.list || []
      // 如果有数据，默认显示第一条
      if (list.value.length > 0) {
        currentIndex.value = 0
      }
    }
  } catch (error) {
    console.error('获取赛程失败:', error)
  } finally {
    loading.value = false
  }
}

const goDetail = (item) => {
  router.push({ name: 'SportDetail', query: { data_id: item.data_id } });
};

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 原有样式基本保持不变，仅做少量优化 */

.sport-container {
  margin: 0 auto;
  background-color: #141414;
  color: #ffffff;
}

.header-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-weight: 600;
  font-size: 12px;
  color: #f2ba45;
}

/* 自定义分页样式 */
.custom-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.pager-btn {
  cursor: pointer;
  font-family: monospace;
  font-size: 14px;
  color: #f2ba45;
  transition: opacity 0.2s;
  padding: 0 4px;
}

.pager-btn:hover {
  opacity: 0.8;
}

.pager-btn.disabled {
  color: #444;
  cursor: not-allowed;
}

.pager-text {
  font-size: 12px;
  color: #999;
}

/* 卡片样式 */
.match-card {
  margin-bottom: 12px;
  border-radius: 12px;
  border: none;
  background-color: #212121;
  --el-card-padding: 16px;
  cursor: pointer;
}

.match-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.league-box {
  flex: 1;
}

.league-name {
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  display: block;
}

.status-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.match-state {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: #2a2a2a;
  border: 1px solid #3d3d3d;
}

.state-1 { color: #ff4d4f; border-color: rgba(255, 77, 79, 0.3); }
.state-0 { color: #f2ba45; border-color: rgba(242, 186, 69, 0.3); }
.state-2 { color: #858585; }

.game-time {
  color: #858585;
  font-size: 11px;
}

.match-teams-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-logo-small {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.team-name {
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
}

.score {
  font-size: 18px;
  font-weight: 700;
  color: #f2ba45;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  color: #555;
  font-size: 8px;
}
</style>