<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">评分系统</view>
      <view class="nav-right">
        <view class="icon-menu">···</view>
        <view class="icon-close">⊗</view>
      </view>
    </view>

    <!-- 比赛信息 -->
    <view class="match-info">
      <view class="match-title">{{ matchInfo.name }}</view>
      <view class="match-time">比赛时间：{{ matchInfo.time }}</view>
    </view>

    <!-- 场地和项目选择 -->
    <view class="venue-section">
      <!-- 场地切换 - 横向滚动 -->
      <scroll-view class="venue-scroll" scroll-x="true" show-scrollbar="false">
        <view class="venue-tabs">
          <view
            v-for="venue in venues"
            :key="venue.venueId"
            :class="['venue-tab', currentVenue === venue.venueId ? 'active' : '']"
            @click="switchVenue(venue.venueId)"
          >
            {{ venue.venueName }}
          </view>
        </view>
      </scroll-view>

      <view class="venue-tip">
        <!-- <text class="tip-bold">主裁判可看见所有场地和项目</text> -->
        <!-- <text class="tip-normal">（场地和项目可动态全部），可以点击切换</text> -->
      </view>

      <!-- 项目选择 - 横向滚动 -->
      <scroll-view class="project-scroll" scroll-x="true" show-scrollbar="false">
        <view class="project-list">
          <view
            v-for="(project, index) in projects"
            :key="project.projectId"
            :class="['project-btn', currentProject === project.projectId ? 'active' : '']"
            @click="switchProject(project.projectId)"
          >
            {{ project.projectName }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 已评分统计 -->
    <view class="score-stats">
      <text class="stats-text">已评分：</text>
      <text class="stats-number">{{ scoredCount }}/{{ totalCount }}</text>
    </view>

    <!-- 选手列表 -->
    <view class="player-list">
      <!-- 遍历选手列表 -->
      <view
        class="player-card"
        v-for="player in players"
        :key="player.athleteId"
      >
        <view class="player-header">
          <view class="player-name">{{ player.name }}</view>

          <!-- 动作区域：始终显示 -->
          <view class="action-area">
            <!-- 已评分：显示总分和修改按钮 -->
            <template v-if="player.scoringComplete && player.totalScore > 0">
              <text class="total-score">总分：{{ player.totalScore }}</text>
              <view class="chief-actions">
                <button class="modify-btn" @click="goToModify(player)">修改</button>
              </view>
            </template>
            
            <!-- 未评分：显示评分中提示 -->
            <template v-else>
              <text class="scoring-status">评分中...</text>
            </template>
          </view>
        </view>

        <view class="player-info">
          <view class="info-item">身份证：{{ player.idCard }}</view>
          <view class="info-item">队伍：{{ player.team }}</view>
          <view class="info-item">编号：{{ player.number }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dataAdapter from '@/utils/dataAdapter.js'
import config from '@/config/env.config.js'

export default {
  data() {
    return {
      matchInfo: {
        id: '',
        name: '',
        time: ''
      },
      competitionId: '',
      currentVenue: '',
      currentProject: '',
      venues: [],
      projects: [],
      players: [],
      scoredCount: 0,
      totalCount: 0
    }
  },

  async onLoad() {
    // 获取全局数据
    const app = getApp()
    const globalData = app.globalData || {}

    // 加载比赛信息
    this.matchInfo = {
      id: globalData.matchId,
      name: globalData.matchName || '比赛名称',
      time: globalData.matchTime || '比赛时间'
    }

    // 注意：主裁判没有固定场地和项目，需要查看所有
    this.competitionId = globalData.matchId

    // 调试信息
    if (config.debug) {
      console.log('主裁判列表页加载:', {
        userRole: globalData.userRole,
        competitionId: this.competitionId
      })
    }

    // 加载场地和项目列表
    await this.loadVenuesAndProjects()
  },

  methods: {
    async loadVenuesAndProjects() {
      try {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })

        // 🔥 关键改动：使用 dataAdapter 获取场地列表
        // Mock模式：调用 mock/athlete.js 的 getVenues 函数
        // API模式：调用 api/athlete.js 的 getVenues 函数（GET /martial/venue/list）
        const venuesRes = await dataAdapter.getData('getVenues', {
          competitionId: this.competitionId
        })

        // 🔥 关键改动：使用 dataAdapter 获取项目列表
        // Mock模式：调用 mock/athlete.js 的 getProjects 函数
        // API模式：调用 api/athlete.js 的 getProjects 函数（GET /martial/project/list）
        const projectsRes = await dataAdapter.getData('getProjects', {
          competitionId: this.competitionId
        })

        this.venues = venuesRes.data || []
        this.projects = projectsRes.data || []

        // 默认选中第一个场地和项目
        if (this.venues.length > 0) {
          this.currentVenue = this.venues[0].venueId
        }
        if (this.projects.length > 0) {
          this.currentProject = this.projects[0].projectId
        }

        uni.hideLoading()

        // 调试信息
        if (config.debug) {
          console.log('场地和项目加载成功:', {
            venues: this.venues.length,
            projects: this.projects.length,
            currentVenue: this.currentVenue,
            currentProject: this.currentProject
          })
        }

        // 加载选手列表
        if (this.currentVenue && this.currentProject) {
          await this.loadPlayers()
        }

      } catch (error) {
        uni.hideLoading()
        console.error('加载场地和项目失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      }
    },

    async loadPlayers() {
      try {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })

        // 🔥 关键改动：使用 dataAdapter 获取选手列表（主裁判视图）
        // Mock模式：调用 mock/athlete.js 的 getAthletesForAdmin 函数
        // API模式：调用 api/athlete.js 的 getAthletesForAdmin 函数（GET /api/mini/athletes/admin）
        const response = await dataAdapter.getData('getAthletesForAdmin', {
          competitionId: this.competitionId,
          venueId: this.currentVenue,
          projectId: this.currentProject
        })

        uni.hideLoading()

        // 保存选手列表
        this.players = (response.data.records || response.data) || []

        // 计算评分统计（主裁判视图：统计有总分的选手）
        this.totalCount = this.players.length
        this.scoredCount = this.players.filter(p => p.scoringComplete).length

        // 调试信息
        if (config.debug) {
          console.log('选手列表加载成功:', {
            venueId: this.currentVenue,
            projectId: this.currentProject,
            total: this.totalCount,
            scored: this.scoredCount,
            players: this.players
          })
        }

      } catch (error) {
        uni.hideLoading()
        console.error('加载选手列表失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      }
    },

    async switchVenue(venueId) {
      if (this.currentVenue === venueId) return

      this.currentVenue = venueId

      // 调试信息
      if (config.debug) {
        console.log('切换场地:', venueId)
      }

      // 重新加载选手列表
      await this.loadPlayers()
    },

    async switchProject(projectId) {
      if (this.currentProject === projectId) return

      this.currentProject = projectId

      // 调试信息
      if (config.debug) {
        console.log('切换项目:', projectId)
      }

      // 重新加载选手列表
      await this.loadPlayers()
    },

    goToModify(player) {
      // 保存当前选手信息到全局数据
      const app = getApp()
      app.globalData.currentAthlete = player

      uni.navigateTo({
        url: '/pages/modify-score/modify-score'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 40rpx;
}

/* 导航栏 */
.nav-bar {
  height: 90rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 30rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 2rpx;
}

.nav-right {
  position: absolute;
  right: 30rpx;
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.icon-menu,
.icon-close {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: bold;
}

/* 比赛信息 */
.match-info {
  padding: 30rpx;
  background-color: #F5F5F5;
}

.match-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #FF4D6A;
  margin-bottom: 10rpx;
}

.match-time {
  font-size: 28rpx;
  color: #666666;
}

/* 场地和项目区域 */
.venue-section {
  background-color: #FFFFFF;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

/* 场地滚动容器 */
.venue-scroll {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 20rpx;
}

.venue-tabs {
  display: inline-flex;
  gap: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 4rpx solid #E0E0E0;
  position: relative;
}

.venue-tab {
  font-size: 32rpx;
  font-weight: 500;
  color: #666666;
  padding: 0 20rpx;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.venue-tab.active {
  font-weight: 600;
  color: #333333;
}

.venue-tab.active::after {
  content: '';
  position: absolute;
  bottom: -24rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: #1B7C5E;
}

.venue-tip {
  font-size: 24rpx;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.tip-bold {
  color: #FF4D6A;
  font-weight: 500;
}

.tip-normal {
  color: #FF4D6A;
}

/* 项目滚动容器 */
.project-scroll {
  width: 100%;
  white-space: nowrap;
}

.project-list {
  display: inline-flex;
  gap: 20rpx;
}

.project-btn {
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  border: 2rpx solid #CCCCCC;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #666666;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.project-btn.active {
  background-color: #1B7C5E;
  color: #FFFFFF;
  border-color: #1B7C5E;
  font-weight: 500;
}

/* 评分统计 */
.score-stats {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333333;
}

.stats-text {
  color: #666666;
}

.stats-number {
  color: #1B7C5E;
  font-weight: 600;
}

/* 选手列表 */
.player-list {
  padding: 0 30rpx;
}

.player-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.player-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.player-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.action-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.total-score {
  font-size: 26rpx;
  color: #333333;
  font-weight: 600;
}

.scoring-status {
  font-size: 26rpx;
  color: #FF9800;
  font-weight: 500;
  padding: 8rpx 20rpx;
  background-color: #FFF3E0;
  border-radius: 8rpx;
}

.chief-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.chief-hint {
  font-size: 22rpx;
  color: #FF4D6A;
  text-align: right;
  line-height: 1.5;
  max-width: 400rpx;
}

.modify-btn {
  padding: 12rpx 40rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 500;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.modify-btn:active {
  opacity: 0.9;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-item {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
}
</style>
