<template>
  <el-dialog
    v-model="visible"
    title="签到管理"
    width="800px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="mb-20">
      <div class="activity-info">
        <span class="font-bold">{{ currentActivity?.name }}</span>
        <span class="ml-10 text-gray">{{ currentActivity?.startTime }}</span>
      </div>
      <div class="mt-10">
        <el-input v-model="keyword" placeholder="搜索姓名/学号" style="width: 200px" class="mr-10" />
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="success" @click="handleExport">导出名单</el-button>
      </div>
    </div>

    <el-table :data="studentList" border stripe height="400">
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="studentId" label="学号" width="120" />
      <el-table-column prop="college" label="学院" width="150" />
      <el-table-column label="签到状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.signInTime ? 'success' : 'info'">{{ row.signInTime ? '已签到' : '未签到' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="signInTime" label="签到时间" width="160" />
      <el-table-column label="签退状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.signOutTime ? 'success' : 'info'">{{ row.signOutTime ? '已签退' : '未签退' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="signOutTime" label="签退时间" width="160" />
      <el-table-column label="评价" min-width="150" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.comment || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button 
            v-if="!row.signInTime" 
            type="primary" 
            size="small" 
            link 
            @click="handleManualSign(row, 'in')"
          >
            补签到
          </el-button>
          <el-button 
            v-if="row.signInTime && !row.signOutTime" 
            type="warning" 
            size="small" 
            link 
            @click="handleManualSign(row, 'out')"
          >
            补签退
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

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

const visible = ref(false)
const currentActivity = ref(null)
const keyword = ref('')
const studentList = ref([])

const open = (activity) => {
  currentActivity.value = activity
  keyword.value = ''
  // Mock data
  studentList.value = [
    { name: '梁健', studentId: '31901001', college: 'ZJE', signInTime: '2026-03-01 17:55:00', signOutTime: '', comment: '' },
    { name: '鲁永波', studentId: '31901002', college: 'ZJUI', signInTime: '', signOutTime: '', comment: '' },
    { name: '王应哲', studentId: '31901003', college: 'ZIBS', signInTime: '2026-03-01 17:58:00', signOutTime: '2026-03-01 21:05:00', comment: '活动很精彩！' },
  ]
  visible.value = true
}

const handleQuery = () => {
  // Mock filter
  ElMessage.success('查询成功')
}

const handleExport = () => {
  ElMessage.success('名单导出中...')
}

const handleManualSign = (row, type) => {
  const time = dayjs().format('YYYY-MM-DD HH:mm:ss')
  if (type === 'in') {
    row.signInTime = time
    ElMessage.success(`已为 ${row.name} 补签到`)
  } else {
    row.signOutTime = time
    // Auto score logic mock
    ElMessage.success(`已为 ${row.name} 补签退，系统已自动赋分`)
  }
}

defineExpose({
  open
})
</script>

<style scoped>
.mb-20 { margin-bottom: 20px; }
.mt-10 { margin-top: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }
.font-bold { font-weight: bold; }
.text-gray { color: #909399; }
</style>
