library-picturebook-activity/frontend/src/views/contests/Activities.vue

<template>
  <div class="contests-activities-page">
    <a-card class="mb-4">
      <template #title>
        <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
          <a-tab-pane key="my" :tab="myTabTitle" />
          <a-tab-pane key="all" tab="全部赛事" />
        </a-tabs>
      </template>
      <template #extra>
        <a-input-search
          v-model:value="searchKeyword"
          placeholder="搜索赛事"
          style="width: 300px"
          @search="handleSearch"
          @press-enter="handleSearch"
        />
      </template>
    </a-card>

    <!-- 赛事列表 -->
    <div v-if="loading" class="loading-container">
      <a-spin size="large" />
    </div>

    <div v-else-if="dataSource.length === 0" class="empty-container">
      <a-empty description="暂无赛事" />
    </div>

    <div v-else class="contests-list">
      <div v-for="contest in dataSource" :key="contest.id" class="contest-card">
        <div class="contest-card-content">
          <!-- 左侧封面 -->
          <div class="contest-cover-wrapper">
            <div class="contest-cover">
              <img
                v-if="contest.coverUrl && !imageErrors[contest.id]"
                :src="contest.coverUrl"
                :alt="contest.contestName"
                @error="(e) => handleImageError(e, contest.id)"
              />
              <div
                v-if="!contest.coverUrl || imageErrors[contest.id]"
                class="cover-placeholder"
              >
                <span>赛事封面</span>
              </div>
              <a-tag
                class="contest-type-tag"
                :color="contest.contestType === 'individual' ? 'blue' : 'green'"
              >
                {{ contest.contestType === "individual" ? "个人赛" : "团队赛" }}
              </a-tag>
            </div>
            <!-- 图片下方按钮 - 根据角色显示不同按钮 -->
            <div v-if="activeTab === 'my'" class="cover-buttons">
              <!-- 学生角色按钮 -->
              <template v-if="userRole === 'student'">
                <template v-if="contest.contestType === 'individual'">
                  <a-button
                    v-if="isSubmitting(contest)"
                    type="primary"
                    size="small"
                    @click.stop="handleUploadWork(contest.id)"
                  >
                    上传作品
                  </a-button>
                  <a-button
                    size="small"
                    @click.stop="handleViewWorks(contest.id)"
                  >
                    参赛作品
                  </a-button>
                </template>
                <template v-else>
                  <a-button
                    size="small"
                    @click.stop="handleViewWorks(contest.id)"
                  >
                    参赛作品
                  </a-button>
                  <a-button
                    size="small"
                    @click.stop="handleViewTeam(contest.id)"
                  >
                    我的队伍
                  </a-button>
                </template>
              </template>

              <!-- 教师角色按钮 -->
              <template v-if="userRole === 'teacher'">
                <a-button
                  type="primary"
                  size="small"
                  @click.stop="handleMyGuidance(contest.id)"
                >
                  我的指导
                </a-button>
              </template>

              <!-- 评委角色按钮 -->
              <template v-if="userRole === 'judge'">
                <a-button
                  type="primary"
                  size="small"
                  :disabled="isReviewEnded(contest)"
                  @click.stop="handleReviewWorks(contest.id)"
                >
                  评审作品
                </a-button>
                <a-button
                  size="small"
                  :disabled="isReviewEnded(contest)"
                  @click.stop="handlePresetComments(contest.id)"
                >
                  预设评语
                </a-button>
              </template>
            </div>
          </div>

          <!-- 右侧内容 -->
          <div class="contest-content">
            <div class="contest-title">{{ contest.contestName }}</div>
            <div class="contest-status">
              <div class="status-row">
                <a-tag color="success" class="status-tag">
                  {{ getStatusText(contest) }}
                </a-tag>
                <span v-if="contest.status === 'ongoing'" class="stage-text">
                  {{ getStageText(contest) }}
                </span>
              </div>
              <div class="time-info">
                <div class="time-item">
                  <span class="time-label">赛事时间:</span>
                  <span class="time-value">
                    {{ formatDate(contest.startTime) }} ~
                    {{ formatDate(contest.endTime) }}
                  </span>
                </div>
                <div v-if="isRegistering(contest)" class="time-item">
                  <a-tag color="success" class="stage-tag">报名中</a-tag>
                  <span class="time-label">报名时间:</span>
                  <span class="time-value">
                    {{ formatDate(contest.registerStartTime) }} ~
                    {{ formatDate(contest.registerEndTime) }}
                  </span>
                </div>
                <div v-if="isSubmitting(contest)" class="time-item">
                  <a-tag color="success" class="stage-tag">征稿中</a-tag>
                  <span class="time-label">提交作品:</span>
                  <span class="time-value">
                    {{ formatDate(contest.submitStartTime) }} ~
                    {{ formatDate(contest.submitEndTime) }}
                  </span>
                </div>
                <div v-if="isReviewing(contest)" class="time-item">
                  <a-tag color="processing" class="stage-tag">评审中</a-tag>
                  <span class="time-label">评审作品:</span>
                  <span class="time-value">
                    {{ formatDate(contest.reviewStartTime) }} ~
                    {{ formatDate(contest.reviewEndTime) }}
                  </span>
                </div>
                <div
                  v-if="
                    contest.resultState === 'published' &&
                    contest.resultPublishTime
                  "
                  class="time-item"
                >
                  <span class="time-label">结果公布:</span>
                  <span class="time-value">
                    {{ formatDate(contest.resultPublishTime) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧操作按钮 -->
          <div class="contest-actions">
            <a-button type="primary" @click.stop="handleViewDetail(contest.id)">
              查看活动
            </a-button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-size-changer="true"
          :page-size-options="['12', '24', '50', '100']"
          :show-total="(total: number) => `共 ${total} 条`"
          @change="handlePageChange"
          @show-size-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 上传作品抽屉 -->
    <SubmitWorkDrawer
      v-model:open="submitWorkDrawerVisible"
      :contest-id="currentContestId"
      @success="handleSubmitWorkSuccess"
    />

    <!-- 查看参赛作品抽屉 -->
    <ViewWorkDrawer
      v-model:open="viewWorkDrawerVisible"
      :contest-id="currentContestIdForView"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import { message } from "ant-design-vue"
import dayjs from "dayjs"
import {
  contestsApi,
  type Contest,
  type QueryContestParams,
} from "@/api/contests"
import { useAuthStore } from "@/stores/auth"
import SubmitWorkDrawer from "./components/SubmitWorkDrawer.vue"
import ViewWorkDrawer from "./components/ViewWorkDrawer.vue"

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const tenantCode = route.params.tenantCode as string

// 获取用户角色
const userRole = computed((): "student" | "teacher" | "judge" => {
  const roles = authStore.user?.roles || []
  // 按优先级判断角色（roles 是字符串数组如 ['judge', 'student']）
  if (roles.includes("judge")) {
    return "judge"
  }
  if (roles.includes("teacher")) {
    return "teacher"
  }
  if (roles.includes("student")) {
    return "student"
  }
  return "student" // 默认学生
})

// 根据角色计算Tab标题
const myTabTitle = computed(() => {
  switch (userRole.value) {
    case "teacher":
      return "我参与的赛事"
    case "judge":
      return "我评审的赛事"
    case "student":
    default:
      return "我报名的赛事"
  }
})

// Tab切换
const activeTab = ref<"all" | "my">("my")
const searchKeyword = ref<string>("")

// 加载状态
const loading = ref(false)
const dataSource = ref<Contest[]>([])
const pagination = reactive({
  current: 1,
  pageSize: 12,
  total: 0,
})
const searchParams = reactive<Partial<QueryContestParams>>({})

// 获取列表数据
const fetchList = async () => {
  loading.value = true
  try {
    const pageSize = Math.min(pagination.pageSize, 100)

    const params: QueryContestParams = {
      ...searchParams,
      page: pagination.current,
      pageSize,
    }

    let response
    if (activeTab.value === "my") {
      // 根据角色调用API，传递 role 参数
      response = await contestsApi.getMyContests({
        ...params,
        role: userRole.value,
      })
    } else {
      response = await contestsApi.getList(params)
    }

    dataSource.value = response.list
    pagination.total = response.total
  } catch (error) {
    message.error("获取赛事列表失败")
    console.error("List request error:", error)
  } finally {
    loading.value = false
  }
}

// Tab切换处理
const handleTabChange = () => {
  searchKeyword.value = ""
  Object.assign(searchParams, {})
  pagination.current = 1
  fetchList()
}

// 搜索处理
const handleSearch = () => {
  searchParams.contestName = searchKeyword.value || undefined
  pagination.current = 1
  fetchList()
}

// 分页变化处理
const handlePageChange = (page?: number, size?: number) => {
  if (size !== undefined) {
    pagination.pageSize = Math.min(size, 100)
  }
  if (page !== undefined) {
    pagination.current = page
  }
  fetchList()
}

// 查看详情
// 跳转到竞赛详情页
const handleViewDetail = (contestId: number) => {
  router.push(`/${tenantCode}/contests/${contestId}`)
}

// ===== 学生相关操作 =====
// 上传作品
const submitWorkDrawerVisible = ref(false)
const currentContestId = ref<number>(0)

const handleUploadWork = (id: number) => {
  currentContestId.value = id
  submitWorkDrawerVisible.value = true
}

const handleSubmitWorkSuccess = () => {
  message.success("作品提交成功")
}

// 查看参赛作品
const viewWorkDrawerVisible = ref(false)
const currentContestIdForView = ref<number>(0)

const handleViewWorks = (id: number) => {
  currentContestIdForView.value = id
  viewWorkDrawerVisible.value = true
}

// 查看我的队伍
const handleViewTeam = (id: number) => {
  // TODO: 跳转到我的队伍页面或打开抽屉
  message.info("查看我的队伍功能开发中")
}

// ===== 教师相关操作 =====
// 我的指导
const handleMyGuidance = (id: number) => {
  router.push(`/${tenantCode}/student-activities/guidance?contestId=${id}`)
}

// ===== 评委相关操作 =====
// 评审作品
const handleReviewWorks = (id: number) => {
  router.push(`/${tenantCode}/student-activities/review?contestId=${id}`)
}

// 预设评语
const handlePresetComments = (id: number) => {
  router.push(`/${tenantCode}/student-activities/comments?contestId=${id}`)
}

// 图片加载错误记录
const imageErrors = ref<Record<number, boolean>>({})

const handleImageError = (_event: Event, contestId: number) => {
  imageErrors.value[contestId] = true
}

// 格式化日期
const formatDate = (dateStr?: string) => {
  if (!dateStr) return "-"
  return dayjs(dateStr).format("YYYY-MM-DD")
}

// 判断是否在报名中
const isRegistering = (contest: Contest): boolean => {
  const now = dayjs()
  const start = dayjs(contest.registerStartTime)
  const end = dayjs(contest.registerEndTime)
  return now.isAfter(start) && now.isBefore(end)
}

// 判断是否在征稿中
const isSubmitting = (contest: Contest): boolean => {
  if (!contest.submitStartTime || !contest.submitEndTime) {
    return false
  }
  const now = dayjs()
  const start = dayjs(contest.submitStartTime)
  const end = dayjs(contest.submitEndTime)
  return (
    (now.isAfter(start) || now.isSame(start, "day")) &&
    (now.isBefore(end) || now.isSame(end, "day"))
  )
}

// 判断是否在评审中
const isReviewing = (contest: Contest): boolean => {
  if (!contest.reviewStartTime || !contest.reviewEndTime) {
    return false
  }
  const now = dayjs()
  const start = dayjs(contest.reviewStartTime)
  const end = dayjs(contest.reviewEndTime)
  return now.isAfter(start) && now.isBefore(end)
}

// 判断评审是否已结束
const isReviewEnded = (contest: Contest): boolean => {
  if (!contest.reviewEndTime) {
    return false
  }
  const now = dayjs()
  const end = dayjs(contest.reviewEndTime)
  return now.isAfter(end)
}

// 判断评审是否已开始
const isReviewStarted = (contest: Contest): boolean => {
  if (!contest.reviewStartTime) {
    return false
  }
  const now = dayjs()
  const start = dayjs(contest.reviewStartTime)
  return now.isAfter(start)
}

// 获取当前阶段文本
const getStageText = (contest: Contest): string => {
  if (isRegistering(contest)) {
    return "报名中"
  }
  if (isSubmitting(contest)) {
    return "征稿中"
  }
  if (isReviewing(contest)) {
    return "评审中"
  }
  return ""
}

// 获取状态文本
const getStatusText = (contest: Contest): string => {
  if (contest.status === "finished") {
    return "赛事已结束"
  }
  return "赛事进行中"
}

// 初始化
onMounted(() => {
  fetchList()
})
</script>

<style lang="scss" scoped>
.contests-activities-page {
  padding: 24px;

  .loading-container,
  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
  }

  .contests-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .contest-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      overflow: hidden;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .contest-card-content {
        display: flex;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
      }

      .contest-cover-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0;
      }

      .contest-cover {
        position: relative;
        width: 200px;
        height: 150px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .cover-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          font-size: 14px;
          background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
        }

        .contest-type-tag {
          position: absolute;
          top: 8px;
          left: 8px;
          margin: 0;
        }
      }

      .cover-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
        width: 200px;
        flex-wrap: wrap;
      }

      .contest-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .contest-title {
        font-size: 16px;
        font-weight: 500;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .contest-status {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .status-row {
          display: flex;
          align-items: center;
          gap: 8px;

          .status-tag {
            margin: 0;
          }

          .stage-text {
            color: #52c41a;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .time-info {
          display: flex;
          flex-direction: column;
          gap: 6px;
          font-size: 14px;

          .time-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .stage-tag {
              margin: 0;
            }

            .time-label {
              color: #8c8c8c;
              white-space: nowrap;
            }

            .time-value {
              color: #595959;
            }
          }
        }
      }

      .contest-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        flex-shrink: 0;

        .action-buttons {
          display: flex;
          gap: 8px;
        }
      }
    }

    .pagination-container {
      margin-top: 24px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>