<template>
  <view class="event-players-page">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input
        class="search-input"
        placeholder="搜索选手姓名或编号"
        v-model="searchKey"
        @confirm="handleSearch"
      />
      <view class="search-icon" @click="handleSearch">🔍</view>
    </view>

    <!-- 分类筛选 -->
    <view class="category-tabs">
      <view
        class="category-tab"
        v-for="(category, index) in categories"
        :key="index"
        :class="{ active: currentCategory === category.value }"
        @click="handleCategoryChange(category.value)"
      >
        {{ category.label }}
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-bar" v-if="totalCount > 0">
      <text class="stats-text">共 {{ totalCount }} 名选手</text>
      <text class="stats-text">已确认 {{ confirmedCount }} 人</text>
    </view>

    <!-- 选手列表 -->
    <view class="players-list" v-if="playersList.length > 0">
      <view
        class="player-item"
        v-for="(player, index) in playersList"
        :key="player.id"
        @click="handlePlayerClick(player)"
      >
        <view class="player-number">{{ player.playerNo || (index + 1).toString().padStart(3, '0') }}</view>
        <view class="player-info">
          <view class="player-name">
            {{ player.playerName }}
            <text class="gender-tag" v-if="player.gender">{{ player.gender === 1 ? '男' : '女' }}</text>
          </view>
          <view class="player-detail">
            <text class="detail-text" v-if="player.organization">{{ player.organization }}</text>
            <text class="detail-divider" v-if="player.organization && player.projectName">|</text>
            <text class="detail-text" v-if="player.projectName">{{ player.projectName }}</text>
          </view>
          <view class="player-extra" v-if="player.category">
            <text class="extra-text">{{ player.category }}</text>
          </view>
        </view>
        <view class="player-status" :class="getStatusClass(player.registrationStatus)">
          {{ getStatusText(player.registrationStatus) }}
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-icon">👤</text>
      <text class="empty-text">暂无参赛选手</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading" @click="loadMore">
      <text class="load-more-text">加载更多</text>
    </view>
  </view>
</template>

<script>
import athleteAPI from '@/api/athlete.js'

export default {
  data() {
    return {
      eventId: '',
      searchKey: '',
      currentCategory: '',
      categories: [
        { label: '全部', value: '' },
        { label: '男子组', value: '1' },
        { label: '女子组', value: '2' }
      ],
      playersList: [],
      totalCount: 0,
      confirmedCount: 0,
      loading: false,
      page: 1,
      pageSize: 20,
      hasMore: true
    };
  },
  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.loadPlayersList()
    }
  },
  methods: {
    /**
     * 加载选手列表
     */
    async loadPlayersList(isLoadMore = false) {
      if (this.loading) return

      this.loading = true

      try {
        const params = {
          competitionId: this.eventId,
          current: isLoadMore ? this.page : 1,
          size: this.pageSize
        }

        // 添加搜索条件
        if (this.searchKey) {
          params.playerName = this.searchKey
        }

        // 添加性别筛选
        if (this.currentCategory) {
          params.gender = this.currentCategory
        }

        const res = await athleteAPI.getAthleteList(params)

        if (res.code === 200 && res.data) {
          const records = res.data.records || []

          if (isLoadMore) {
            this.playersList = [...this.playersList, ...records]
          } else {
            this.playersList = records
            this.page = 1
          }

          this.totalCount = res.data.total || 0
          this.hasMore = this.playersList.length < this.totalCount

          // 统计已确认人数
          this.confirmedCount = this.playersList.filter(p => p.registrationStatus === 1).length
        }
      } catch (error) {
        console.error('加载选手列表失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    /**
     * 搜索
     */
    handleSearch() {
      this.page = 1
      this.loadPlayersList()
    },

    /**
     * 切换分类
     */
    handleCategoryChange(value) {
      this.currentCategory = value
      this.page = 1
      this.loadPlayersList()
    },

    /**
     * 加载更多
     */
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++
        this.loadPlayersList(true)
      }
    },

    /**
     * 点击选手
     */
    handlePlayerClick(player) {
      // 可以跳转到选手详情页
      uni.showToast({
        title: `选手：${player.playerName}`,
        icon: 'none'
      })
    },

    /**
     * 获取状态样式类
     */
    getStatusClass(status) {
      const statusMap = {
        0: 'pending',    // 待确认
        1: 'confirmed',  // 已确认
        2: 'cancelled'   // 已取消
      }
      return statusMap[status] || 'pending'
    },

    /**
     * 获取状态文本
     */
    getStatusText(status) {
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已取消'
      }
      return statusMap[status] || '未知'
    }
  }
};
</script>

<style lang="scss" scoped>
.event-players-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.search-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.search-input {
  flex: 1;
  background-color: #f5f5f5;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
}

.search-icon {
  font-size: 32rpx;
  cursor: pointer;
}

.category-tabs {
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.category-tab {
  padding: 12rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  color: #666666;
  background-color: #f5f5f5;
  transition: all 0.3s;
}

.category-tab.active {
  background-color: #C93639;
  color: #fff;
}

.stats-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.stats-text {
  font-size: 26rpx;
  color: #666666;
}

.players-list {
  padding: 0 30rpx;
}

.player-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  transition: all 0.3s;

  &:active {
    background-color: #f8f8f8;
    transform: scale(0.98);
  }
}

.player-number {
  width: 80rpx;
  height: 80rpx;
  background-color: #C93639;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  flex-shrink: 0;
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.gender-tag {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background-color: #E3F2FD;
  color: #2196F3;
  font-weight: normal;
}

.player-detail {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-divider {
  margin: 0 10rpx;
}

.player-extra {
  font-size: 22rpx;
  color: #999999;
}

.player-status {
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  flex-shrink: 0;
}

.player-status.confirmed {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.player-status.pending {
  background-color: #FFF3E0;
  color: #FF9800;
}

.player-status.cancelled {
  background-color: #FFEBEE;
  color: #F44336;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  gap: 20rpx;
}

.empty-icon {
  font-size: 120rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

.loading-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}

.load-more-text {
  font-size: 28rpx;
  color: #C93639;
}
</style>
