<template>
  <view class="event-lineup-page">
    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>

    <view v-else-if="!isScheduleCompleted" class="not-ready">
      <view class="not-ready-icon">📋</view>
      <text class="not-ready-text">赛程编排尚未完成</text>
      <text class="not-ready-hint">请等待赛事组织方完成编排后查看</text>
    </view>

    <template v-else>
      <!-- 组别选择 -->
      <view class="group-tabs">
        <view
          class="group-tab"
          v-for="(group, index) in groups"
          :key="index"
          :class="{ active: currentGroupIndex === index }"
          @click="currentGroupIndex = index"
        >
          {{ group.groupName }}
        </view>
      </view>

      <!-- 出场顺序列表 -->
      <view class="lineup-list" v-if="currentGroup">
        <view class="group-header">
          <text class="group-venue">{{ currentGroup.venueName }}</text>
          <text class="group-time">{{ currentGroup.timeSlot }}</text>
          <text class="group-table">表号: {{ currentGroup.tableNo }}</text>
        </view>

        <view class="lineup-item" v-for="(item, index) in currentGroup.participants" :key="index">
          <view class="lineup-order">
            <view class="order-number">{{ item.order }}</view>
            <text class="order-text">号</text>
          </view>
          <view class="lineup-info">
            <view class="lineup-name">{{ item.playerName }}</view>
            <view class="lineup-detail">
              <text class="detail-item">{{ item.organization }}</text>
              <text class="detail-divider" v-if="item.estimatedTime"> | </text>
              <text class="detail-item" v-if="item.estimatedTime">{{ item.estimatedTime }}</text>
            </view>
          </view>
          <view class="lineup-status" :class="item.status">
            {{ getStatusText(item.status) }}
          </view>
        </view>

        <view v-if="!currentGroup.participants || currentGroup.participants.length === 0" class="empty-list">
          <text>暂无参赛者信息</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { getScheduleStatus, getLineup } from '@/api/schedule.js'

export default {
  data() {
    return {
      eventId: '',
      orderId: '',
      loading: true,
      isScheduleCompleted: false,
      currentGroupIndex: 0,
      groups: []
    }
  },

  computed: {
    currentGroup() {
      return this.groups[this.currentGroupIndex] || null
    }
  },

  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.orderId = options.orderId || null
      this.checkScheduleStatus()
    }
  },

  methods: {
    async checkScheduleStatus() {
      try {
        const res = await getScheduleStatus(this.eventId)
        if (res) {
          this.isScheduleCompleted = res.isCompleted
          if (this.isScheduleCompleted) {
            await this.loadLineup()
          }
        }
      } catch (error) {
        console.error('检查编排状态失败:', error)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },

    async loadLineup() {
      try {
        const res = await getLineup(this.eventId, null, this.orderId)
        if (res && res.groups) {
          this.groups = res.groups
        }
      } catch (error) {
        console.error('加载出场顺序失败:', error)
      }
    },

    getStatusText(status) {
      const map = {
        'waiting': '待出场',
        '未签到': '待出场',
        '已完成': '已完成',
        '进行中': '进行中',
        '异常': '异常',
        'ongoing': '进行中',
        'finished': '已完成'
      }
      return map[status] || '待出场'
    }
  }
}
</script>

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

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #666;
}

.not-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
}

.not-ready-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
}

.not-ready-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.not-ready-hint {
  font-size: 26rpx;
  color: #999;
}

.group-tabs {
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  gap: 15rpx;
  overflow-x: auto;
  margin-bottom: 20rpx;
}

.group-tab {
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  color: #666666;
  background-color: #f5f5f5;
  white-space: nowrap;
  flex-shrink: 0;
}

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

.lineup-list {
  padding: 0 30rpx 20rpx;
}

.group-header {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-venue, .group-time, .group-table {
  font-size: 26rpx;
  color: #666;
}

.lineup-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 25rpx;
}

.lineup-order {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.order-text {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.9);
}

.lineup-info {
  flex: 1;
}

.lineup-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.lineup-detail {
  font-size: 24rpx;
  color: #666666;
}

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

.lineup-status.finished,
.lineup-status.已完成 {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.lineup-status.ongoing,
.lineup-status.进行中 {
  background-color: #FFF3E0;
  color: #FF9800;
}

.lineup-status.waiting,
.lineup-status.未签到 {
  background-color: #F5F5F5;
  color: #999999;
}

.empty-list {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}
</style>
