<template>
  <div class="registrations-container">
    <el-page-header @back="$router.back()">
      <template #content>
        <h2 class="page-title">报名管理 - {{ activityName }}</h2>
      </template>
    </el-page-header>
    
    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <span class="stat-label">报名总数</span>
            <span class="stat-value">{{ stats.totalCount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <span class="stat-label">已签到</span>
            <span class="stat-value text-success">{{ stats.checkedInCount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <span class="stat-label">未签到</span>
            <span class="stat-value text-warning">{{ stats.notCheckedInCount }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 报名列表 -->
    <el-card shadow="never" class="table-card">
      <template #header>
        <el-row justify="space-between">
          <span>报名列表</span>
          <el-space>
            <el-button type="success" size="small" icon="Download" @click="handleExport">
              导出数据
            </el-button>
          </el-space>
        </el-row>
      </template>
      
      <el-table
        v-loading="loading"
        :data="registrationList"
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="60" />
        
        <el-table-column prop="userId" label="用户ID" width="80" />
        
        <el-table-column prop="userName" label="用户名" width="120" />
        
        <el-table-column prop="userPhone" label="手机号" width="130" />
        
        <el-table-column prop="userGender" label="性别" width="60">
          <template #default="{ row }">
            {{ row.userGender === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        
        <el-table-column prop="registrationTime" label="报名时间" width="180" />
        
        <el-table-column prop="payStatus" label="支付状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.payStatus === 1 ? 'success' : 'warning'" size="small">
              {{ row.payStatus === 1 ? '已支付' : '未支付' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="checkInStatus" label="签到状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.checkInStatus === 1 ? 'success' : 'info'" size="small">
              {{ row.checkInStatus === 1 ? '已签到' : '未签到' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="checkInTime" label="签到时间" width="180" />
        
        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
        
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="row.checkInStatus !== 1"
              type="primary"
              size="small"
              link
              @click="handleCheckIn(row)"
            >
              签到
            </el-button>
            <el-button
              type="danger"
              size="small"
              link
              @click="handleCancelRegistration(row)"
            >
              取消报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="loadRegistrationList"
          @current-change="loadRegistrationList"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { API_ENDPOINTS } from '@/config/api'

const route = useRoute()
const activityId = ref(route.params.id)
const activityName = ref('')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const registrationList = ref([])

const stats = reactive({
  totalCount: 0,
  checkedInCount: 0,
  notCheckedInCount: 0
})

// 加载报名列表
const loadRegistrationList = async () => {
  loading.value = true
  try {
    const response = await request.get(`${API_ENDPOINTS.ACTIVITY_REGISTRATIONS}/${activityId.value}`, {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value
      }
    })
    
    if (response.code === 200) {
      registrationList.value = response.data.list || []
      total.value = response.data.total || registrationList.value.length
      activityName.value = response.data.activityName || ''
      
      // 计算统计数据
      stats.totalCount = total.value
      stats.checkedInCount = registrationList.value.filter(r => r.checkInStatus === 1).length
      stats.notCheckedInCount = stats.totalCount - stats.checkedInCount
    }
  } catch (error) {
    console.error('加载报名列表失败:', error)
    ElMessage.error('加载报名列表失败')
  } finally {
    loading.value = false
  }
}

// 签到
const handleCheckIn = async (row) => {
  try {
    const response = await request.post(`/admin/activity/check-in`, {
      activityId: activityId.value,
      userId: row.userId
    })
    
    if (response.code === 200) {
      ElMessage.success('签到成功')
      loadRegistrationList()
    }
  } catch (error) {
    console.error('签到失败:', error)
  }
}

// 取消报名
const handleCancelRegistration = async (row) => {
  try {
    await ElMessageBox.confirm('确定要取消此用户的报名吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await request.delete(`/admin/activity/cancel-registration`, {
      params: {
        activityId: activityId.value,
        userId: row.userId
      }
    })
    
    if (response.code === 200) {
      ElMessage.success('取消报名成功')
      loadRegistrationList()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消报名失败:', error)
    }
  }
}

// 导出数据
const handleExport = () => {
  ElMessage.info('导出功能开发中')
  // TODO: 实现导出功能
}

onMounted(() => {
  loadRegistrationList()
})
</script>

<style scoped>
.registrations-container {
  padding: 0;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.stats-row {
  margin: 20px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.text-success {
  color: #67c23a;
}

.text-warning {
  color: #e6a23c;
}

.table-card {
  margin-top: 20px;
}

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

