<template>
  <div class="activity-list-container">
    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="活动名称">
              <el-input v-model="queryForm.keyword" placeholder="请输入活动名称" clearable />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 120px">
                <el-option label="报名中" value="enrolling" />
                <el-option label="进行中" value="active" />
                <el-option label="已结束" value="ended" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="primary" @click="handleAdd"> <vab-icon icon="add-line" /> 发布活动</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="name" label="活动名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            {{ getTypeLabel(row.type) }}
          </template>
        </el-table-column>
        <el-table-column label="活动时间" width="300">
          <template #default="{ row }">
            {{ row.startTime }} ~ {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="地点" width="150" />
        <el-table-column label="报名情况" width="120">
          <template #default="{ row }">
            {{ row.enrolled }}/{{ row.limit || '不限' }}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="加分" width="80" align="center" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleSignIn(row)">签到管理</el-button>
            <el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <activity-dialog ref="dialogRef" @success="handleSuccess" />
    <sign-in-dialog ref="signInRef" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ActivityDialog from './components/ActivityDialog.vue'
import SignInDialog from './components/SignInDialog.vue'

defineOptions({
  name: 'ActivityList',
})

const queryForm = reactive({
  keyword: '',
  status: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const dialogRef = ref()
const signInRef = ref()

const getTypeLabel = (type) => {
  const map = { academic: '学术讲座', culture: '文体活动', volunteer: '志愿服务', club: '社团招新' }
  return map[type] || type
}

const getStatusLabel = (status) => {
  const map = { enrolling: '报名中', active: '进行中', ended: '已结束' }
  return map[status]
}

const getStatusType = (status) => {
  const map = { enrolling: 'success', active: 'primary', ended: 'info' }
  return map[status]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: 1,
        name: '2026春季迎新晚会',
        type: 'culture',
        startTime: '2026-03-01 18:00:00',
        endTime: '2026-03-01 21:00:00',
        location: '多功能厅',
        enrolled: 120,
        limit: 200,
        score: 2,
        status: 'enrolling',
        creditLimit: 60,
        isFee: false,
        fee: 0,
        description: '迎新晚会...'
      },
      {
        id: 2,
        name: '校园环境志愿清理',
        type: 'volunteer',
        startTime: '2026-02-28 09:00:00',
        endTime: '2026-02-28 11:00:00',
        location: '北区草坪',
        enrolled: 45,
        limit: 50,
        score: 3,
        status: 'enrolling',
        creditLimit: 70,
        isFee: false,
        fee: 0,
        description: '志愿活动...'
      }
    ]
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  dialogRef.value.open()
}

const handleEdit = (row) => {
  dialogRef.value.open(row)
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该活动吗？', '删除确认').then(() => {
    ElMessage.success('删除成功')
    handleQuery()
  })
}

const handleSuccess = () => {
  handleQuery()
}

const handleSignIn = (row) => {
  signInRef.value.open(row)
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

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

<style lang="scss" scoped>
.text-danger { color: var(--el-color-danger); }
</style>
