<template>
  <div class="match-detail-container" v-loading="loading">
    <el-card class="scoreboard-card" shadow="hover">
      <div class="league-header">
        <span class="league-name">{{ info.league }}</span>
<!--        <span class="match-time">{{ formatTime(fixture.date) }}</span>-->
        <span class="match-time">{{ info.game_time }}</span>
      </div>

      <div class="score-display">
        <div class="team home-team">
          <el-avatar :size="80" :src="info.home_team_logo" icon="el-icon-picture-outline"></el-avatar>
          <div class="team-name">{{ info.home_team }}</div>
        </div>

        <div class="match-status">
          <div class="status-tag">
            <el-tag :type="fixture.status.short === 'FT' ? 'info' : 'success'" size="small">
              {{ fixture.status.long }} {{ fixture.status.elapsed ? `(${fixture.status.elapsed}')` : '' }}
            </el-tag>
          </div>
          <div class="big-score">
            {{ score.fulltime.home !== null ? score.fulltime.home : '-' }}
            :
            {{ score.fulltime.away !== null ? score.fulltime.away : '-' }}
          </div>
          <div class="half-score">半场比分: {{ info.half_score || '-:-' }}</div>
        </div>

        <div class="team away-team">
          <el-avatar :size="80" :src="info.guest_team_logo" icon="el-icon-picture-outline"></el-avatar>
          <div class="team-name">{{ info.guest_team }}</div>
        </div>
      </div>

      <div class="venue-info" v-if="fixture.venue && fixture.venue.name">
        <i class="el-icon-location-information"></i> 比赛场地: {{ fixture.venue.name }}
      </div>
    </el-card>

    <el-tabs v-model="activeTab" class="detail-tabs" type="border-card">

      <el-tab-pane label="比赛事件" name="events">
        <el-timeline v-if="events && events.length > 0">
          <el-timeline-item
            v-for="(item, index) in events"
            :key="index"
            :timestamp="`${item.time.elapsed}'`"
            placement="top"
            :color="getEventColor(item.type, item.detail)"
          >
            <el-card shadow="never" class="event-card">
              <div class="event-header">
                <strong>{{ getEventIcon(item.type, item.detail) }} {{ item.detail || item.type }}</strong>
                <span class="event-team">
                  ({{ item.team_id === info.home_team_id ? info.home_team : info.guest_team }})
                </span>
              </div>
              <div class="event-body">
                <span>球员: <strong>{{ item.player.name || '未知' }}</strong></span>
                <span v-if="item.assist && item.assist.name" class="assist-text">
                  (助攻/换下: {{ item.assist.name }})
                </span>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂无比赛事件数据"></el-empty>
      </el-tab-pane>

      <el-tab-pane label="盘口数据 (Odds)" name="odds">
        <el-collapse v-if="parsedOdds && parsedOdds.length > 0" v-model="activeOddPanels">
          <el-collapse-item
            v-for="(oddGroup, index) in parsedOdds"
            :key="oddGroup.id"
            :title="oddGroup.name"
            :name="index"
          >
            <el-table :data="oddGroup.values" size="mini" border stripe>
              <el-table-column prop="value" label="投注项 (Value)" min-width="120"></el-table-column>
              <el-table-column prop="odd" label="赔率 (Odd)" align="center" width="100">
                <template slot-scope="scope">
                  <span class="odd-text">{{ scope.row.odd }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="handicap" label="盘口数值 (Handicap)" align="center" width="150">
                <template slot-scope="scope">
                  {{ scope.row.handicap || '-' }}
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
        <el-empty v-else description="暂无盘口数据"></el-empty>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
// 这里假设你已经配置好了 API 请求
import { getFixtures } from '@/api/data'

export default {
  name: 'MatchDetail',
  data() {
    return {
      loading: true,
      activeTab: 'events',
      activeOddPanels: [0, 1], // 默认展开前两个赔率分类

      // 核心数据源初始化
      fixture: { status: {}, venue: {} },
      score: { fulltime: {}, halftime: {} },
      info: {},
      events: [],
      parsedOdds: []
    }
  },
  created() {
    this.fetchMatchData();
  },
  methods: {
    async fetchMatchData() {
      this.loading = true;
      try {
        // 实际开发中替换为：
        const res = await getFixtures({ data_id: this.$route.query.data_id });
        const matchData = res.data;

        // 此处使用你提供的 Mock 数据进行演示
        // const mockResponse = this.getMockData();
        // const matchData = mockResponse.data;

        this.fixture = matchData.fixture;
        this.score = matchData.score;
        this.info = matchData.info;
        this.events = matchData.events;

        // odds 是一个 JSON 字符串，需要解析成对象数组
        if (this.info.odds) {
          try {
            this.parsedOdds = JSON.parse(this.info.odds);
          } catch (e) {
            console.error("解析赔率数据失败:", e);
            this.parsedOdds = [];
          }
        }
      } catch (error) {
        this.$message.error('获取赛事数据失败');
      } finally {
        this.loading = false;
      }
    },

    // 格式化时间
    formatTime(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },

    // 状态点颜色 (黄牌、红牌、进球、换人)
    getEventColor(type, detail) {
      if (type === 'Goal') return '#67C23A'; // 绿色进球
      if (type === 'Card' && detail === 'Yellow Card') return '#E6A23C'; // 黄色黄牌
      if (type === 'Card' && detail === 'Red Card') return '#F56C6C'; // 红色红牌
      if (type === 'subst') return '#409EFF'; // 蓝色换人
      return '#909399';
    },

    // 状态 Emoji 图标
    getEventIcon(type, detail) {
      if (type === 'Goal') return '⚽';
      if (type === 'Card' && detail === 'Yellow Card') return '🟨';
      if (type === 'Card' && detail === 'Red Card') return '🟥';
      if (type === 'subst') return '🔄';
      return '📌';
    },

    // 附带你提供的 Mock 数据 (为了保证代码可直接运行)
    getMockData() {
      return {
        "code": 0,
        "data": {
          // ... 你提供的那一整坨完整的 JSON data ...
          // 为了篇幅，我在这里省略 JSON 内容，实际测试时直接将你的 JSON 填入这里即可。
        }
      }
    }
  }
}
</script>

<style scoped>
.match-detail-container {
  height: calc(100vh - 60px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.scoreboard-card {
  margin-bottom: 20px;
  text-align: center;
  background-image: #fff;
}

.league-header {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.score-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.team-name {
  margin-top: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #303133;
}

.match-status {
  flex: 1;
}

.big-score {
  font-size: 48px;
  font-weight: 900;
  color: #303133;
  margin: 10px 0;
  letter-spacing: 5px;
}

.half-score {
  font-size: 14px;
  color: #909399;
}

.venue-info {
  margin-top: 20px;
  font-size: 13px;
  color: #909399;
}

.detail-tabs {
  min-height: 400px;
}

.event-card {
  border-radius: 4px;
  padding: 10px;
}

.event-header {
  margin-bottom: 8px;
  font-size: 15px;
}

.event-team {
  color: #909399;
  font-size: 13px;
  margin-left: 5px;
}

.event-body {
  font-size: 14px;
  color: #606266;
}

.assist-text {
  color: #909399;
  margin-left: 8px;
  font-size: 12px;
}

.odd-text {
  font-weight: bold;
  color: #F56C6C;
}
</style>
