<template>
  <div class="martial-dispatch-container">
    <div class="page-header">
      <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
      <h2 class="page-title">调度</h2>
    </div>

    <div class="tabs-section">
        <div class="tab-buttons">
          <el-button size="small" type="primary">竞赛分组</el-button>
        </div>

        <div 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>
            <el-button size="small" plain style="margin-left: auto;" @click="handleBatchComplete">
              批次完赛
            </el-button>
          </div>

          <div v-for="(group, index) in dispatchGroups" :key="index" class="dispatch-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">
                <div class="toggle-buttons">
                  <el-button size="small" :type="group.viewMode === 'dispatch' ? 'primary' : ''" @click="setViewMode(index, 'dispatch')">
                    调度列表
                  </el-button>
                  <el-button size="small" :type="group.viewMode === 'menu' ? 'primary' : 'success'" @click="setViewMode(index, 'menu')">
                    {{ group.venueType === 1 ? '一号场地' : '二号场地' }}
                  </el-button>
                </div>
                <el-button size="small" type="danger">赛程</el-button>
              </div>
            </div>

            <el-table :data="group.items" border stripe size="small">
              <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
              <el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
              <el-table-column label="状态" width="100" align="center">
                <template #default="scope">
                  <el-tag v-if="scope.row.completed" type="success" size="small">已完赛</el-tag>
                  <el-tag v-else type="warning" size="small">未完赛</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="裁判" width="100" align="center">
                <template #default="scope">
                  <el-tag v-if="scope.row.refereed" type="success" size="small">已裁判</el-tag>
                  <el-tag v-else type="danger" size="small">未裁判</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleMoveUp(index, scope.$index)"
                    :disabled="scope.$index === 0"
                    title="上移"
                    class="move-btn"
                  >
                    <img src="/img/图标 3@3x.png" class="move-icon" alt="上移" />
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="handleMoveDown(index, scope.$index)"
                    :disabled="scope.$index === group.items.length - 1"
                    title="下移"
                    class="move-btn"
                  >
                    <img src="/img/图标 4@3x.png" class="move-icon" alt="下移" />
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'MartialDispatchList',
  data() {
    return {
      orderId: null,
      selectedTime: 1,
      timeSlots: [
        '2025年11月6日上午8:30',
        '2025年11月6日下午13:00',
        '2025年11月7日上午8:30'
      ],
      dispatchGroups: [
        {
          title: '1. 小学组小组赛男女类',
          type: '集体',
          count: '2队',
          code: '1101',
          venueType: 1,
          viewMode: 'dispatch',
          items: [
            { schoolUnit: '少林寺武校', completed: true, refereed: false },
            { schoolUnit: '访河社区', completed: false, refereed: false }
          ]
        },
        {
          title: '1. 小学组小组赛男女类',
          type: '单人',
          count: '3队',
          code: '1组',
          venueType: 2,
          viewMode: 'dispatch',
          items: [
            { schoolUnit: '少林寺武校', completed: true, refereed: true },
            { schoolUnit: '访河社区', completed: false, refereed: false },
            { schoolUnit: '少林寺武校', completed: true, refereed: true }
          ]
        },
        {
          title: '2. 中学组决赛',
          type: '集体',
          count: '4队',
          code: '2101',
          venueType: 1,
          viewMode: 'dispatch',
          items: [
            { schoolUnit: '成都体育学院', completed: true, refereed: true },
            { schoolUnit: '武侯实验中学', completed: true, refereed: false },
            { schoolUnit: '石室中学', completed: false, refereed: false },
            { schoolUnit: '七中育才', completed: false, refereed: false }
          ]
        }
      ]
    }
  },
  mounted() {
    this.orderId = this.$route.query.orderId
    // 使用静态数据，不调用API
  },
  methods: {
    goBack() {
      this.$router.push('/martial/order/list')
    },
    setViewMode(index, mode) {
      this.dispatchGroups[index].viewMode = mode
      this.$message.success(`已切换到${mode === 'dispatch' ? '调度列表' : '场地'}模式`)
    },
    handleMoveUp(groupIndex, itemIndex) {
      if (itemIndex === 0) return
      const group = this.dispatchGroups[groupIndex]
      const temp = group.items[itemIndex]
      group.items.splice(itemIndex, 1)
      group.items.splice(itemIndex - 1, 0, temp)
      this.$message.success('上移成功')
    },
    handleMoveDown(groupIndex, itemIndex) {
      const group = this.dispatchGroups[groupIndex]
      if (itemIndex === group.items.length - 1) return
      const temp = group.items[itemIndex]
      group.items.splice(itemIndex, 1)
      group.items.splice(itemIndex + 1, 0, temp)
      this.$message.success('下移成功')
    },
    handleBatchComplete() {
      this.$confirm('确定要标记当前批次所有为完赛状态吗？', '批次完赛', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 标记当前时间段所有为完赛
        this.dispatchGroups.forEach(group => {
          group.items.forEach(item => {
            item.completed = true
          })
        })
        this.$message.success('批次完赛成功')
      }).catch(() => {
        // 取消操作
      })
    }
  }
}
</script>

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

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

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

  .tabs-section {
    .tab-buttons {
      margin-bottom: 15px;
      display: flex;
      gap: 8px;
    }

    .tab-content {
      .time-selector {
        margin-bottom: 15px;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }

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

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

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

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

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

          .group-actions {
            display: flex;
            gap: 8px;
            align-items: center;

            .toggle-buttons {
              display: flex;
              gap: 4px;
            }
          }
        }
      }
    }
  }

  .move-btn {
    padding: 4px;

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

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