<template>
  <div class="martial-schedule-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="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="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 competitionGroups" :key="index" 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-dropdown trigger="click" @command="(cmd) => handleVenueCommand(cmd, index)">
                  <el-button size="small" type="primary">
                    {{ group.selectedVenue || '一号场地' }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="venue1">一号场地</el-dropdown-item>
                    <el-dropdown-item command="venue2">二号场地</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <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-button
                    type="text"
                    size="small"
                    @click="handleMoveUp(index, 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
                    type="text"
                    size="small"
                    @click="handleMoveDown(index, 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>
                </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 class="venue-footer-hints">
            <p class="footer-hint-text">完成编排前的现阶段, 点击放开次文本; 完成编排前在可导列</p>
          </div>
        </div>
      </div>

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

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

<script>
export default {
  name: 'MartialScheduleList',
  data() {
    return {
      orderId: null,
      activeTab: 'competition',
      selectedTime: 0,
      confirmDialogVisible: false,
      isScheduleCompleted: false, // 是否已完成编排
      timeSlots: [
        '2025年11月6日上午8:30',
        '2025年11月6日下午13:00',
        '2025年11月6日下午13:00',
        '2025年11月6日下午13:00'
      ],
      competitionGroups: [
        {
          title: '1. 小学组小组赛男女类',
          type: '集体',
          count: '2队',
          code: '1101',
          selectedVenue: '一号场地',
          items: [
            { schoolUnit: '清河小学' },
            { schoolUnit: '访河社区' }
          ]
        },
        {
          title: '1. 小学组小组赛男女类',
          type: '单人',
          count: '3队',
          code: '1组',
          selectedVenue: '二号场地',
          items: [
            { schoolUnit: '少林寺武校' },
            { schoolUnit: '访河社区' },
            { schoolUnit: '少林寺武校' }
          ]
        },
        {
          title: '2. 中学组决赛',
          type: '集体',
          count: '4队',
          code: '2101',
          selectedVenue: '一号场地',
          items: [
            { schoolUnit: '成都体育学院' },
            { schoolUnit: '武侯实验中学' },
            { schoolUnit: '石室中学' },
            { schoolUnit: '七中育才' }
          ]
        }
      ],
      venueData: [
        {
          project: '小学组小组赛男女类',
          hint: '剩余功能在位置换现上，显示出已比赛名称的位置',
          participant: '集体',
          team: 1,
          number: 1,
          duration: 2,
          status: '*101'
        },
        {
          project: '中学组决赛',
          participant: '单人',
          team: 2,
          number: 5,
          duration: 3,
          status: '*102'
        },
        {
          project: '少年组对抗赛',
          participant: '双人',
          team: 1,
          number: 3,
          duration: 2,
          status: ''
        }
      ]
    }
  },
  mounted() {
    this.orderId = this.$route.query.orderId
    // 使用静态数据，不调用API
  },
  methods: {
    goBack() {
      this.$router.push('/martial/order/list')
    },
    handleVenueCommand(command, groupIndex) {
      const venueName = command === 'venue1' ? '一号场地' : '二号场地'
      this.competitionGroups[groupIndex].selectedVenue = venueName
      this.$message.success(`已选择${venueName}`)
    },
    handleMoveUp(groupIndex, itemIndex) {
      if (itemIndex === 0 || this.isScheduleCompleted) return
      const group = this.competitionGroups[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.competitionGroups[groupIndex]
      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
    },
    confirmComplete() {
      // 确认完成编排
      this.isScheduleCompleted = true
      this.confirmDialogVisible = false
      this.$message.success('编排已完成，现在可以进行调度操作')
    }
  }
}
</script>

<style lang="scss" scoped>
.martial-schedule-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 {
    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;
      }

      .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>
