<template>
  <el-drawer v-model="visible" title="报名名单管理" size="50%">
    <div v-if="currentActivity" class="member-manage">
      <div class="header mb-20">
        <h3 class="mt-0">{{ currentActivity.title }}</h3>
        <div class="tags">
          <el-tag size="small">已报名: {{ currentActivity.enrolled }}</el-tag>
          <el-tag size="small" type="success" class="ml-10">已签到: {{ Math.floor(currentActivity.enrolled * 0.8) }}</el-tag>
        </div>
      </div>
      
      <el-table :data="memberList" border stripe height="500">
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="studentName" label="姓名" width="100" />
        <el-table-column prop="college" label="学院" />
        <el-table-column prop="signStatus" label="签到状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.signStatus ? 'success' : 'info'" size="small">
              {{ row.signStatus ? '已签到' : '未签到' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
           <template #default="{ row }">
            <el-button v-if="!row.signStatus" type="primary" link size="small" @click="handleSign(row)">补签</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const currentActivity = ref(null)
const memberList = ref([])

const open = (row) => {
  currentActivity.value = row
  // Mock members
  memberList.value = [
    { studentId: '31901001', studentName: '梁健', college: 'ZJUI', signStatus: true },
    { studentId: '31901002', studentName: '鲁永波', college: 'ZJE', signStatus: false },
    { studentId: '31901003', studentName: '王应哲', college: 'ZIBS', signStatus: true },
    { studentId: '31901004', studentName: '杨勇捷', college: 'ZJUI', signStatus: true },
  ]
  visible.value = true
}

const handleSign = (row) => {
  row.signStatus = true
  ElMessage.success('补签成功')
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.ml-10 { margin-left: 10px; }
.mt-0 { margin-top: 0; }

.member-manage {
  .header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
}
</style>
