<template>
  <div class="activity-record-container">
    <el-row :gutter="20">
      <!-- 左侧活动列表 -->
      <el-col :span="16">
        <vab-card title="活动发布管理">
          <template #header>
            <div class="card-header">
              <span>活动列表</span>
              <el-button type="primary" size="small" @click="handleAdd"> <vab-icon icon="add-line" /> 发布新活动</el-button>
            </div>
          </template>

          <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.type" placeholder="全部" clearable style="width: 120px">
                    <el-option label="志愿服务" value="volunteer" />
                    <el-option label="文体活动" value="culture" />
                    <el-option label="学术讲座" value="lecture" />
                    <el-option label="党团建设" value="party" />
                  </el-select>
                </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="finished" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-table v-loading="loading" :data="tableData" border stripe height="calc(100vh - 400px)">
            <el-table-column prop="title" label="活动主题" min-width="200" show-overflow-tooltip />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="活动时间" width="160" />
            <el-table-column prop="location" label="地点" width="120" show-overflow-tooltip />
            <el-table-column prop="points" label="综测分" width="80" align="center">
              <template #default="{ row }">
                <span class="text-primary font-bold">+{{ row.points }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="participants" label="报名/限额" width="120" align="center">
              <template #default="{ row }">
                <span>{{ row.enrolled }} / {{ row.limit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" effect="dark">{{ getStatusLabel(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" type="primary" text @click="handleDetail(row)"> <vab-icon icon="user-group-line" /> 名单管理</el-button>
                <el-button size="small" type="primary" text @click="handleEdit(row)"> <vab-icon icon="edit-line" /> 编辑</el-button>
                <el-dropdown class="ml-10">
                  <el-button size="small" type="info" text>更多<vab-icon icon="arrow-down-s-line" /></el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleNotify(row)"> <vab-icon icon="message-line" /> 群发通知</el-dropdown-item>
                      <el-dropdown-item @click="handleExport(row)"> <vab-icon icon="export-line" /> 导出签到表</el-dropdown-item>
                      <el-dropdown-item divided class="text-danger" @click="handleDelete(row)"> <vab-icon icon="delete-line" /> 删除活动</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </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>
      </el-col>

      <!-- 右侧数据看板 -->
      <el-col :span="8" style="height: calc(100vh - 400px);">
        <vab-card title="活动数据概览" class="mb-20">
           <el-row :gutter="10" class="stat-row">
            <el-col :span="12">
              <div class="stat-box bg-blue">
                <div class="num">12</div>
                <div class="label">本月活动数</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-box bg-green">
                <div class="num">458</div>
                <div class="label">参与人次</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-box bg-orange">
                <div class="num">98%</div>
                <div class="label">签到率</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-box bg-purple">
                <div class="num">350</div>
                <div class="label">累计发放学分</div>
              </div>
            </el-col>
          </el-row>
        </vab-card>

        <vab-card title="待审核报名" class="pending-list">
          <el-empty v-if="pendingList.length === 0" description="暂无待审核" image-size="60" />
          <div v-else class="list-wrap">
            <div v-for="item in pendingList" :key="item.id" class="pending-item">
              <div class="info">
                <div class="title">{{ item.activityName }}</div>
                <div class="student">{{ item.studentName }} ({{ item.studentId }})</div>
                <div class="time">{{ item.applyTime }}</div>
              </div>
              <div class="actions">
                <el-button type="success" circle size="small" @click="handleApprove(item)"> <vab-icon icon="check-line" /> </el-button>
                <el-button type="danger" circle size="small" @click="handleReject(item)"> <vab-icon icon="close-line" /> </el-button>
              </div>
            </div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 活动发布/编辑弹窗 -->
    <activity-edit-dialog ref="activityEditDialogRef" @success="handleQuery" />

    <!-- 名单管理抽屉 -->
    <member-manage-drawer ref="memberManageDrawerRef" />
  </div>
</template>

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

defineOptions({
  name: 'BehaviorActivityRecord',
})

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

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const activityEditDialogRef = ref()
const memberManageDrawerRef = ref()

const pendingList = ref([
  { id: 1, activityName: '“暖冬行动”社区志愿服务', studentName: '梁健', studentId: '31901001', applyTime: '10分钟前' },
  { id: 2, activityName: '国际文化节志愿者', studentName: '鲁永波', studentId: '31901002', applyTime: '30分钟前' },
  { id: 3, activityName: '寝室文化装扮大赛', studentName: '王应哲', studentId: '31901003', applyTime: '1小时前' },
])

// --- Helpers ---
const getTypeLabel = (type) => {
  const map = { volunteer: '志愿服务', culture: '文体活动', lecture: '学术讲座', party: '党团建设' }
  return map[type] || type
}
const getTypeTag = (type) => {
  const map = { volunteer: 'danger', culture: 'warning', lecture: 'primary', party: 'success' }
  return map[type]
}
const getStatusLabel = (status) => {
  const map = { enrolling: '报名中', active: '进行中', finished: '已结束' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { enrolling: 'success', active: 'primary', finished: 'info' }
  return map[status]
}

// --- Methods ---
const generateMockData = () => {
  return [
    {
      id: 1,
      title: '2026年迎新志愿者招募',
      type: 'volunteer',
      time: '2026-08-25',
      location: '北区广场',
      points: 2.0,
      enrolled: 45,
      limit: 50,
      status: 'enrolling'
    },
    {
      id: 2,
      title: '“寝室文化节” 摄影大赛',
      type: 'culture',
      time: '2026-05-10',
      location: '线上',
      points: 1.0,
      enrolled: 120,
      limit: 200,
      status: 'active'
    },
    {
      id: 3,
      title: '院士面对面：生物医药前沿',
      type: 'lecture',
      time: '2026-04-15',
      location: '多功能厅',
      points: 0.5,
      enrolled: 200,
      limit: 200,
      status: 'finished'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

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

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

const handleDetail = (row) => {
  memberManageDrawerRef.value.open(row)
}

const handleNotify = (row) => {
  ElMessageBox.prompt('请输入通知内容', '群发通知', {
    confirmButtonText: '发送',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    ElMessage.success(`已向 ${row.enrolled} 名学生发送通知`)
  })
}

const handleExport = (row) => {
  ElMessage.success('正在导出签到表...')
}

const handleDelete = (row) => {
  ElMessage.success('活动已删除')
}

// 审核逻辑
const handleApprove = (item) => {
  ElMessage.success('报名已通过')
  pendingList.value = pendingList.value.filter(i => i.id !== item.id)
}
const handleReject = (item) => {
  ElMessage.info('报名已驳回')
  pendingList.value = pendingList.value.filter(i => i.id !== item.id)
}

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

handleQuery()
</script>

<style lang="scss" scoped>
.activity-record-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .mb-20 { margin-bottom: 20px; }
  .ml-10 { margin-left: 10px; }
  .mt-0 { margin-top: 0; }
  .text-primary { color: var(--el-color-primary); }
  .text-danger { color: var(--el-color-danger); }
  .text-gray { color: #909399; }
  .text-xs { font-size: 12px; }
  .font-bold { font-weight: bold; }

  .stat-row {
    margin-bottom: -10px;
    .stat-box {
      padding: 15px;
      border-radius: 8px;
      color: #fff;
      margin-bottom: 10px;
      text-align: center;
      
      .num { font-size: 20px; font-weight: bold; }
      .label { font-size: 12px; opacity: 0.9; margin-top: 5px; }

      &.bg-blue { background: #409eff; }
      &.bg-green { background: #67c23a; }
      &.bg-orange { background: #e6a23c; }
      &.bg-purple { background: #9061f9; }
    }
  }

  .pending-list {
    height: 400px;
    overflow-y: auto;

    .pending-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child { border-bottom: none; }

      .info {
        .title { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
        .student { font-size: 12px; color: #666; }
        .time { font-size: 12px; color: #999; }
      }
    }
  }

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