<template>
  <div class="martial-schedule-container">
    <div class="page-header">
      <div class="header-left">
        <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
        <h2 class="page-title">编排</h2>
      </div>
      <div class="header-right">
        <el-button
          size="small"
          type="primary"
          :loading="autoArrangeLoading"
          @click="handleAutoArrange"
        >
          {{ isScheduleCompleted ? '重新编排' : '自动编排' }}
        </el-button>
        <el-button size="small" type="danger" @click="showExceptionDialog">
          异常组 <el-badge :value="exceptionList.length" :hidden="exceptionList.length === 0" />
        </el-button>
      </div>
    </div>

    <div class="tabs-section">
        <div class="tab-buttons">
          <el-button
            size="small"
            :type="activeTab === 'competition' ? 'primary' : ''"
            @click="activeTab = 'competition'"
          >
            竞赛分组
          </el-button>
          <el-button
            size="small"
            :type="activeTab === 'venue' ? 'primary' : ''"
            @click="activeTab = 'venue'"
          >
            场地
          </el-button>
        </div>

        <!-- 竞赛分组 Tab -->
        <div v-show="activeTab === 'competition'" class="tab-content">
          
          <!-- 场地列表 -->
          <div class="venue-list">
            <div class="venue-buttons">
              <el-button
                v-for="venue in venues"
                :key="venue.id"
                size="small"
                :type="selectedVenueId === venue.id ? 'primary' : ''"
                @click="selectedVenueId = venue.id"
              >
                {{ venue.venueName }}
              </el-button>
              <div v-if="venues.length === 0" class="no-venue-hint">
                暂无场地信息，请先在赛事管理中配置场地
              </div>
            </div>
          </div>

          <div class="time-selector">
            <el-button
              v-for="(time, index) in timeSlots"
              :key="index"
              size="small"
              :type="selectedTime === index ? 'primary' : ''"
              @click="selectedTime = index"
            >
              {{ time }}
            </el-button>
          </div>

          <div v-for="(group, index) in filteredCompetitionGroups" :key="group.id" class="competition-group">
            <div class="group-header">
              <div class="group-info">
                <span class="group-title">{{ group.title }}</span>
                <span class="group-meta">{{ group.type }}</span>
                <span class="group-meta">{{ group.count }}</span>
                <span class="group-meta">{{ group.code }}</span>
              </div>
              <div class="group-actions">
                <el-button size="small" type="warning" @click="handleMoveGroup(group)">
                  移动
                </el-button>
              </div>
            </div>

            <el-table :data="groupItemsByTeam(group.items)" border stripe size="small" row-key="id">
              <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
              <el-table-column prop="schoolUnit" label="学校/单位" min-width="150"></el-table-column>
              <el-table-column prop="playerName" label="选手" min-width="120"></el-table-column>
              <el-table-column prop="status" label="状态" width="100" align="center">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '已签到' ? 'success' : scope.row.status === '异常' ? 'danger' : 'info'" size="small">
                    {{ scope.row.status || '未签到' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                  <el-button
                    link
                    size="small"
                    @click="handleMoveUp(group, scope.$index)"
                    :disabled="scope.$index === 0 || isScheduleCompleted"
                    title="上移"
                    class="move-btn"
                  >
                    <img src="/img/图标 3@3x.png" class="move-icon" alt="上移" />
                  </el-button>
                  <el-button
                    link
                    size="small"
                    @click="handleMoveDown(group, scope.$index)"
                    :disabled="scope.$index === group.items.length - 1 || isScheduleCompleted"
                    title="下移"
                    class="move-btn"
                  >
                    <img src="/img/图标 4@3x.png" class="move-icon" alt="下移" />
                  </el-button>
                  <el-button
                    v-if="(scope.row.status || '未签到') === '未签到'"
                    link
                    size="small"
                    @click="markAsException(group, scope.$index)"
                    :disabled="isScheduleCompleted"
                    style="color: #f56c6c;"
                  >
                    异常
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 场地 Tab -->
        <div v-show="activeTab === 'venue'" class="tab-content">
          <div class="time-selector">
            <el-button
              v-for="(time, index) in timeSlots"
              :key="index"
              size="small"
              :type="selectedTime === index ? 'primary' : ''"
              @click="selectedTime = index"
            >
              {{ time }}
            </el-button>
          </div>

          <el-table :data="venueData" border stripe size="small">
            <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
            <el-table-column prop="project" label="项目" min-width="180">
              <template #default="scope">
                <span>{{ scope.row.project }}</span>
                <div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="participant" label="参人/单位" width="120"></el-table-column>
            <el-table-column prop="team" label="队伍" width="80" align="center"></el-table-column>
            <el-table-column prop="number" label="编号" width="80" align="center"></el-table-column>
            <el-table-column prop="duration" label="合计时间" width="100" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.status" class="status-active">{{ scope.row.status }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="footer-actions">
        <el-button size="small" @click="handleSaveDraft" v-if="!isScheduleCompleted">保存草稿</el-button>
        <el-button size="small" @click="handleExport" v-if="isScheduleCompleted">导出</el-button>
        <el-button size="small" type="primary" @click="handleConfirm" v-if="!isScheduleCompleted">完成编排</el-button>
      </div>

    <!-- 确认对话框 -->
    <el-dialog
      title="确定完成编排"
      v-model="confirmDialogVisible"
      width="450px"
      center
    >
      <p style="text-align: center; padding: 20px; color: #606266;">
        完成编排后，不可再次调整。确定完成编排吗？
      </p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmComplete">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 移动分组对话框 -->
    <el-dialog
      title="移动竞赛分组"
      v-model="moveDialogVisible"
      width="500px"
      center
    >
      <el-form label-width="100px">
        <el-form-item label="目标场地">
          <el-select v-model="moveTargetVenueId" placeholder="请选择场地" style="width: 100%;">
            <el-option
              v-for="venue in venues"
              :key="venue.id"
              :label="venue.venueName"
              :value="venue.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标时间段">
          <el-select v-model="moveTargetTimeSlot" placeholder="请选择时间段" style="width: 100%;">
            <el-option
              v-for="(time, index) in timeSlots"
              :key="index"
              :label="time"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="moveDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmMoveGroup">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 异常组对话框 -->
    <el-dialog
      title="异常组参赛人员"
      v-model="exceptionDialogVisible"
      width="700px"
      center
    >
      <el-table :data="exceptionList" border stripe size="small" max-height="400">
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column prop="groupTitle" label="分组" min-width="180"></el-table-column>
        <el-table-column prop="schoolUnit" label="学校/单位" min-width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag type="danger" size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button
              link
              size="small"
              @click="removeFromException(scope.$index)"
              style="color: #409eff;"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="exceptionList.length === 0" style="text-align: center; padding: 40px; color: #909399;">
        暂无异常参赛人员
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exceptionDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getVenuesByCompetition } from '@/api/martial/venue'
import { getCompetitionDetail } from '@/api/martial/competition'
import { getScheduleResult, saveAndLockSchedule, saveDraftSchedule, triggerAutoArrange, moveScheduleGroup } from '@/api/martial/activitySchedule'

export default {
  name: 'MartialScheduleList',
  data() {
    return {
      competitionId: null,
      orderId: null,
      activeTab: 'competition',
      selectedTime: 0,
      selectedVenueId: null, // 选中的场地ID
      confirmDialogVisible: false,
      isScheduleCompleted: false, // 是否已完成编排
      loading: false,
      autoArrangeLoading: false, // 自动编排加载状态
      venues: [], // 场地列表(从后端加载)
      competitionInfo: {
        competitionName: '',
        competitionStartTime: '',
        competitionEndTime: ''
      },
      timeSlots: [], // 时间段列表(根据比赛时间动态生成)
      competitionGroups: [], // 竞赛分组(从后端加载)

      // 移动分组相关
      moveDialogVisible: false,
      moveTargetVenueId: null,
      moveTargetTimeSlot: null,
      moveGroupIndex: null,

      // 异常组相关
      exceptionDialogVisible: false,
      exceptionList: [] // 异常参赛人员列表
    }
  },
  computed: {
    // 根据选中的场地和时间段过滤竞赛分组
    filteredCompetitionGroups() {
      console.log('=== 过滤调试信息 ===')
      console.log('selectedVenueId:', this.selectedVenueId, 'type:', typeof this.selectedVenueId)
      console.log('selectedTime:', this.selectedTime, 'type:', typeof this.selectedTime)
      console.log('competitionGroups总数:', this.competitionGroups.length)

      if (!this.selectedVenueId || this.selectedTime === null) {
        console.log('场地或时间未选中，返回空数组')
        return []
      }

      const filtered = this.competitionGroups.filter(group => {
        console.log(`分组"${group.title}": venueId=${group.venueId}(${typeof group.venueId}), timeSlotIndex=${group.timeSlotIndex}(${typeof group.timeSlotIndex})`)
        const venueMatch = group.venueId === this.selectedVenueId || Number(group.venueId) === Number(this.selectedVenueId)
        const timeMatch = group.timeSlotIndex === this.selectedTime
        console.log(`  场地匹配:${venueMatch}, 时间匹配:${timeMatch}`)
        return venueMatch && timeMatch
      })

      console.log('过滤后的分组数量:', filtered.length)
      return filtered
    },

    // 场地标签页的数据 - 根据选中的时间段动态生成
    venueData() {
      if (this.selectedTime === null) {
        return []
      }

      // 获取选中时间段的所有分组
      const groupsInTimeSlot = this.competitionGroups.filter(
        group => group.timeSlotIndex === this.selectedTime
      )

      // 将分组转换为场地视图的数据格式
      return groupsInTimeSlot.map(group => ({
        project: group.title,
        participant: group.type,
        team: 1, // 队伍数量,可以从分组中计算
        number: group.items?.length || 0, // 参赛人数
        duration: 0, // 合计时间,如果后端有数据可以显示
        status: group.venueName, // 显示场地名称
        venueName: group.venueName,
        hint: '' // 可以根据需要添加提示信息
      }))
    }
  },
  mounted() {
    // 从路由获取赛事ID和订单ID
    this.competitionId = this.$route.query.competitionId
    this.orderId = this.$route.query.orderId

    if (this.competitionId) {
      this.loadCompetitionInfo()
      this.loadVenues()
      this.loadScheduleData()
    } else {
      this.$message.warning('未获取到赛事ID')
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },

    // 加载赛事信息
    async loadCompetitionInfo() {
      try {
        this.loading = true
        const res = await getCompetitionDetail(this.competitionId)
        const data = res.data?.data

        if (data) {
          this.competitionInfo.competitionName = data.competitionName || data.competition_name || ''
          this.competitionInfo.competitionStartTime = data.competitionStartTime || data.competition_start_time
          this.competitionInfo.competitionEndTime = data.competitionEndTime || data.competition_end_time

          // 生成时间段
          this.generateTimeSlots()
        }
      } catch (err) {
        console.error('加载赛事信息失败', err)
        this.$message.error('加载赛事信息失败')
      } finally {
        this.loading = false
      }
    },

    // 根据开始和结束时间生成时间段列表
    generateTimeSlots() {
      const startTime = this.competitionInfo.competitionStartTime
      const endTime = this.competitionInfo.competitionEndTime

      if (!startTime || !endTime) {
        this.$message.warning('赛事时间信息不完整，使用默认时间段')
        this.timeSlots = [
          '2025年11月6日 上午8:30',
          '2025年11月6日 下午13:30'
        ]
        return
      }

      const slots = []
      const start = new Date(startTime)
      const end = new Date(endTime)

      // 遍历每一天
      let currentDate = new Date(start)
      let dayIndex = 1

      while (currentDate <= end) {
        const year = currentDate.getFullYear()
        const month = currentDate.getMonth() + 1
        const day = currentDate.getDate()
        const dateStr = `${year}年${month}月${day}日`

        // 添加上午时段 8:30
        slots.push(`${dateStr} 上午8:30`)

        // 添加下午时段 13:30
        slots.push(`${dateStr} 下午13:30`)

        // 下一天
        currentDate.setDate(currentDate.getDate() + 1)
        dayIndex++
      }

      this.timeSlots = slots
      console.log('生成的时间段:', this.timeSlots)
    },

    // 加载场地列表
    async loadVenues() {
      try {
        this.loading = true
        const res = await getVenuesByCompetition(this.competitionId)
        const venuesData = res.data?.data?.records || res.data?.data || []

        if (venuesData.length === 0) {
          this.$message.warning('该赛事暂无场地信息')
          this.venues = []
        } else {
          this.venues = venuesData.map(v => ({
            id: v.id,
            venueName: v.venueName || v.venue_name,
            capacity: v.capacity || 0,
            location: v.location,
            description: v.description
          }))
          // 默认选中第一个场地
          if (this.venues.length > 0) {
            this.selectedVenueId = this.venues[0].id
          }
          console.log('加载的场地数据:', this.venues)
        }
      } catch (err) {
        console.error('加载场地失败', err)
        this.$message.error('加载场地失败')
        this.venues = []
      } finally {
        this.loading = false
      }
    },

    // 加载编排数据
    async loadScheduleData() {
      try {
        this.loading = true
        const res = await getScheduleResult(this.competitionId)
        const data = res.data?.data

        console.log('=== API返回的编排数据 ===')
        console.log('完整响应:', res.data)
        console.log('data:', data)

        if (data) {
          // 判断是否有草稿或已完成的编排
          this.isScheduleCompleted = data.isCompleted || false

          // 加载竞赛分组数据
          if (data.competitionGroups && data.competitionGroups.length > 0) {
            this.competitionGroups = data.competitionGroups.map(group => ({
              id: group.id,
              title: group.title,
              type: group.type,
              count: group.count,
              code: group.code,
              venueId: group.venueId,
              venueName: group.venueName,
              timeSlot: group.timeSlot,
              timeSlotIndex: group.timeSlotIndex,
              items: (group.participants || []).map(p => ({
                id: p.id,
                schoolUnit: p.schoolUnit,
                playerName: p.playerName,
                status: p.status || '未签到',
                sortOrder: p.sortOrder
              }))
            }))

            // 加载异常组数据
            this.exceptionList = []
            this.competitionGroups.forEach(group => {
              group.items.forEach(item => {
                if (item.status === '异常') {
                  this.exceptionList.push({
                    groupId: group.id,
                    groupTitle: group.title,
                    participantId: item.id,
                    schoolUnit: item.schoolUnit,
                    status: item.status
                  })
                }
              })
            })

            console.log('解析后的competitionGroups:', this.competitionGroups)
            console.log('当前selectedVenueId:', this.selectedVenueId)
            console.log('当前selectedTime:', this.selectedTime)
            this.$message.success(data.isDraft ? '已加载草稿数据' : '已加载编排数据')
          } else {
            // 后端还没有数据，使用默认数据进行展示
            this.competitionGroups = []
            console.log('后端暂无编排数据，等待后端生成')
          }
        }
      } catch (err) {
        console.error('加载编排数据失败', err)
        if (err.response?.status === 404) {
          console.log('编排数据不存在，等待后端生成')
        } else {
          this.$message.error('加载编排数据失败: ' + (err.message || ''))
        }
        this.competitionGroups = []
      } finally {
        this.loading = false
      }
    },

    // 移动分组
    handleMoveGroup(group) {
      if (this.isScheduleCompleted) {
        this.$message.warning('编排已完成，无法移动')
        return
      }
      this.moveGroupIndex = this.competitionGroups.findIndex(g => g.id === group.id)
      this.moveTargetVenueId = group.venueId || null
      this.moveTargetTimeSlot = group.timeSlotIndex || 0
      this.moveDialogVisible = true
    },

    // 确认移动分组
    async confirmMoveGroup() {
      if (!this.moveTargetVenueId) {
        this.$message.warning('请选择目标场地')
        return
      }
      if (this.moveTargetTimeSlot === null) {
        this.$message.warning('请选择目标时间段')
        return
      }

      const group = this.competitionGroups[this.moveGroupIndex]
      const targetVenue = this.venues.find(v => v.id === this.moveTargetVenueId)

      try {
        // 调用后端API移动分组
        const res = await moveScheduleGroup({
          groupId: group.id,
          targetVenueId: this.moveTargetVenueId,
          targetTimeSlotIndex: this.moveTargetTimeSlot
        })

        if (res.data.success) {
          // 更新前端数据
          group.venueId = this.moveTargetVenueId
          group.venueName = targetVenue ? targetVenue.venueName : ''
          group.timeSlotIndex = this.moveTargetTimeSlot
          group.timeSlot = this.timeSlots[this.moveTargetTimeSlot]

          this.$message.success(`已移动到 ${group.venueName} - ${group.timeSlot}`)
          this.moveDialogVisible = false
        } else {
          this.$message.error(res.data.msg || '移动分组失败')
        }
      } catch (error) {
        console.error('移动分组失败:', error)
        this.$message.error('移动分组失败，请稍后重试')
      }
    },

    // 标记为异常
    markAsException(group, itemIndex) {
      if (this.isScheduleCompleted) {
        this.$message.warning('编排已完成，无法标记异常')
        return
      }

      const item = group.items[itemIndex]

      // 修改状态为异常
      item.status = '异常'

      // 添加到异常组列表
      this.exceptionList.push({
        groupId: group.id,
        groupTitle: group.title,
        participantId: item.id,
        schoolUnit: item.schoolUnit,
        status: '异常'
      })

      this.$message.success(`已将 ${item.schoolUnit} 标记为异常`)
    },

    // 显示异常组对话框
    showExceptionDialog() {
      this.exceptionDialogVisible = true
    },

    // 从异常组移除
    removeFromException(index) {
      const exceptionItem = this.exceptionList[index]

      // 在竞赛分组中找到对应的参赛人员并恢复状态
      for (let group of this.competitionGroups) {
        if (group.id === exceptionItem.groupId) {
          for (let item of group.items) {
            if (item.id === exceptionItem.participantId) {
              item.status = '未签到'
              break
            }
          }
          break
        }
      }

      // 从异常列表中移除
      this.exceptionList.splice(index, 1)
      this.$message.success(`已将 ${exceptionItem.schoolUnit} 从异常组移除`)
    },

    // 触发自动编排
    async handleAutoArrange() {
      try {
        // 确认操作
        await this.$confirm('自动编排将重新生成赛程安排，当前编排数据将被覆盖。确定继续吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        this.autoArrangeLoading = true

        // 调用自动编排接口
        const res = await triggerAutoArrange(this.competitionId)

        if (res.data?.success) {
          this.$message.success('自动编排完成')

          // 重新加载编排数据
          await this.loadScheduleData()
        } else {
          this.$message.error(res.data?.msg || '自动编排失败')
        }
      } catch (err) {
        if (err !== 'cancel') {
          console.error('自动编排失败', err)
          this.$message.error('自动编排失败: ' + (err.message || ''))
        }
      } finally {
        this.autoArrangeLoading = false
      }
    },

    // 保存草稿
    async handleSaveDraft() {
      try {
        this.loading = true

        // 构建保存数据
        const saveData = {
          competitionId: this.competitionId,
          isDraft: true,
          competitionGroups: this.competitionGroups.map(group => ({
            id: group.id,
            title: group.title,
            type: group.type,
            count: group.count,
            code: group.code,
            venueId: group.venueId,
            venueName: group.venueName,
            timeSlot: group.timeSlot,
            timeSlotIndex: group.timeSlotIndex,
            participants: group.items.map((item, index) => ({
              id: item.id,
              schoolUnit: item.schoolUnit,
              status: item.status,
              sortOrder: index + 1
            }))
          }))
        }

        // 调用保存草稿接口
        await saveDraftSchedule(saveData)
        console.log('保存草稿数据:', saveData)
        this.$message.success('草稿保存成功')
      } catch (err) {
        console.error('保存草稿失败', err)
        this.$message.error('保存草稿失败: ' + (err.message || ''))
      } finally {
        this.loading = false
      }
    },

    handleVenueCommand(command, groupIndex) {
      // 这个方法已废弃，保留以防万一
    },
    handleMoveUp(group, itemIndex) {
      if (itemIndex === 0 || this.isScheduleCompleted) return
      const temp = group.items[itemIndex]
      group.items.splice(itemIndex, 1)
      group.items.splice(itemIndex - 1, 0, temp)
      this.$message.success('上移成功')
    },
    handleMoveDown(group, itemIndex) {
      if (itemIndex === group.items.length - 1 || this.isScheduleCompleted) return
      const temp = group.items[itemIndex]
      group.items.splice(itemIndex, 1)
      group.items.splice(itemIndex + 1, 0, temp)
      this.$message.success('下移成功')
    },
    handleExport() {
      this.$message.success('导出功能开发中')
    },
    handleConfirm() {
      this.confirmDialogVisible = true
    },
    async confirmComplete() {
      try {
        this.loading = true

        // 检查是否有编排数据
        if (!this.competitionGroups || this.competitionGroups.length === 0) {
          this.$message.warning('请先进行自动编排，生成编排数据后再完成编排')
          this.confirmDialogVisible = false
          return
        }

        console.log('开始完成编排，竞赛ID:', this.competitionId)
        console.log('编排分组数量:', this.competitionGroups.length)

        // 1. 先保存当前的草稿数据
        const saveData = {
          competitionId: this.competitionId,
          isDraft: true,
          competitionGroups: this.competitionGroups.map(group => ({
            id: group.id,
            title: group.title,
            type: group.type,
            count: group.count,
            code: group.code,
            venueId: group.venueId,
            venueName: group.venueName,
            timeSlot: group.timeSlot,
            timeSlotIndex: group.timeSlotIndex,
            participants: group.items.map((item, index) => ({
              id: item.id,
              schoolUnit: item.schoolUnit,
              status: item.status,
              sortOrder: index + 1
            }))
          }))
        }

        console.log('准备保存草稿数据:', saveData)

        const draftRes = await saveDraftSchedule(saveData)
        console.log('保存草稿成功，返回:', draftRes)

        // 2. 然后调用锁定接口
        console.log('准备锁定编排，竞赛ID:', this.competitionId)
        const lockRes = await saveAndLockSchedule(this.competitionId)
        console.log('锁定接口返回:', lockRes)

        // 3. 更新UI状态
        this.isScheduleCompleted = true
        this.confirmDialogVisible = false
        this.$message.success('编排已完成并锁定')

        // 4. 重新加载编排数据以获取最新状态
        await this.loadScheduleData()
      } catch (err) {
        console.error('完成编排失败', err)
        console.error('错误详情:', err.response?.data || err.message)
        this.$message.error('完成编排失败: ' + (err.response?.data?.msg || err.message || '未知错误'))
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.martial-schedule-container {
  padding: 15px;
  background: #fff;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 10px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .page-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .tabs-section {
    margin-bottom: 15px;

    .tab-buttons {
      margin-bottom: 15px;
      padding: 12px;
      background: #fff;
      border: 1px solid #dcdfe6;
    }

    .tab-content {
      padding: 15px;
      background: #fff;
      border: 1px solid #dcdfe6;

      .time-selector {
        margin-bottom: 15px;
        // padding: 8px;
        // background: #f5f7fa;
      }

      // 场地列表样式
      .venue-list {
        margin-bottom: 10px;
        background: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 4px;

        .venue-list-title {
          font-size: 14px;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .venue-buttons {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;

          .no-venue-hint {
            padding: 8px 12px;
            color: #f59e0b;
            font-size: 13px;
            background: #fef3c7;
            border-radius: 4px;
          }
        }
      }

      .competition-group {
        margin-bottom: 15px;

        .group-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px;
          background: #f5f7fa;
          border: 1px solid #dcdfe6;
          border-bottom: none;

          .group-info {
            display: flex;
            align-items: center;
            gap: 12px;

            .group-title {
              font-weight: 600;
              color: #303133;
              font-size: 13px;
            }

            .group-meta {
              color: #909399;
              font-size: 12px;
            }
          }

          .group-hints {
            flex: 1;
            text-align: center;

            .hint-text {
              color: #f50057;
              font-size: 11px;

              &.secondary {
                color: #ff4081;
              }
            }
          }

          .group-actions {
            display: flex;
            gap: 8px;
          }
        }
      }

      .group-footer-hints {
        margin-top: 15px;
        padding: 8px 12px;
        background: #fff3e0;
        border-left: 3px solid #ff9800;

        .footer-hint-text {
          margin: 4px 0;
          color: #f50057;
          font-size: 11px;

          &.secondary {
            color: #ff4081;
          }
        }
      }

      .row-hint {
        margin-top: 4px;
        padding: 2px 5px;
        color: #f50057;
        font-size: 11px;
        background: rgba(245, 0, 87, 0.05);
        display: inline-block;
      }

      .venue-footer-hints {
        margin-top: 15px;
        padding: 8px 12px;
        background: #fff3e0;
        border-left: 3px solid #ff9800;

        .footer-hint-text {
          margin: 4px 0;
          color: #f50057;
          font-size: 11px;
        }
      }

      .status-active {
        color: #409eff;
        font-weight: 600;
      }
    }
  }

  .footer-actions {
    text-align: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #dcdfe6;
  }

  .move-btn {
    padding: 4px;

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }

  .move-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
