<template>
  <div class="activity-report">
    <el-row :gutter="16" class="summary-row">
      <el-col :span="6"><el-card><div class="metric"><span>活动总数</span><strong>{{ activities.length }}</strong></div></el-card></el-col>
      <el-col :span="6"><el-card><div class="metric"><span>已发布</span><strong>{{ publishedCount }}</strong></div></el-card></el-col>
      <el-col :span="6"><el-card><div class="metric"><span>累计报名</span><strong>{{ totalSigned }}</strong></div></el-card></el-col>
      <el-col :span="6"><el-card><div class="metric"><span>互斥活动</span><strong>{{ mutexCount }}</strong></div></el-card></el-col>
    </el-row>

    <el-card>
      <template #header>
        <div class="search-section">
          <el-form :model="searchForm" inline label-width="86px">
            <el-form-item label="活动名称">
              <el-input v-model="searchForm.name" clearable placeholder="请输入" class="name-field" />
            </el-form-item>
            <el-form-item label="活动状态">
              <el-select v-model="searchForm.status" clearable placeholder="全部" class="status-field">
                <el-option label="草稿" value="draft" />
                <el-option label="待审核" value="pending" />
                <el-option label="审核通过" value="approved" />
                <el-option label="已发布" value="published" />
                <el-option label="已下线" value="offline" />
                <el-option label="已结束" value="ended" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <el-table :data="pagedActivities" stripe style="width:100%">
        <el-table-column prop="id" label="活动编号" width="130" />
        <el-table-column prop="name" label="活动名称" min-width="180" />
        <el-table-column label="报名进度" width="220">
          <template #default="{ row }">
            <el-progress :percentage="signupPercent(row)" />
          </template>
        </el-table-column>
        <el-table-column label="达标配置" min-width="160">
          <template #default="{ row }">{{ row.progressEnabled ? `${row.levels.length} 层级 / ${taskCount(row)} 任务` : '未开启' }}</template>
        </el-table-column>
        <el-table-column label="奖品" min-width="160">
          <template #default="{ row }">{{ row.reward.name }}（{{ row.reward.type }}）</template>
        </el-table-column>
        <el-table-column label="互斥状态" min-width="180">
          <template #default="{ row }">
            <el-tag v-if="row.mutexEnabled" type="warning">{{ row.mutexGroup }}</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="170" />
      </el-table>
      <div class="pagination-section">
        <span>Total {{ filteredActivities.length }}</span>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[10, 20, 50]"
          :total="filteredActivities.length"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import activityStore from '@/store/activityStore'

export default {
  name: 'ActivityReport',
  data() {
    return {
      searchForm: { name: '', status: '' },
      appliedSearch: { name: '', status: '' },
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    activities() {
      return activityStore.activities
    },
    publishedCount() {
      return this.activities.filter((item) => item.status === 'published').length
    },
    totalSigned() {
      return this.activities.reduce((sum, item) => sum + Number(item.signedCount || 0), 0)
    },
    mutexCount() {
      return this.activities.filter((item) => item.mutexEnabled).length
    },
    filteredActivities() {
      return this.activities.filter((item) => {
        const name = `${item.internalTitle || ''}${item.name || ''}`
        if (this.appliedSearch.name && !name.includes(this.appliedSearch.name)) return false
        if (this.appliedSearch.status && item.status !== this.appliedSearch.status) return false
        return true
      })
    },
    pagedActivities() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.filteredActivities.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handleSearch() {
      this.appliedSearch = { ...this.searchForm }
      this.currentPage = 1
    },
    handleReset() {
      this.searchForm = { name: '', status: '' }
      this.handleSearch()
    },
    signupPercent(row) {
      if (!row.quotaEnabled || !row.quota) return 100
      return Math.min(100, Math.round((row.signedCount / row.quota) * 100))
    },
    taskCount(row) {
      return row.levels.reduce((sum, level) => sum + level.tasks.length, 0)
    }
  }
}
</script>

<style scoped>
.activity-report { padding:0; }
.summary-row { margin-bottom: 16px; }
.metric { display:flex; flex-direction:column; gap:8px; color:#606266; }
.metric strong { font-size:24px; color:#303133; }
.search-section .el-form { display:flex; flex-wrap:wrap; }
.search-section .el-form-item { margin-right:0; margin-bottom:0; }
.name-field { width:220px; }
.status-field { width:150px; }
.pagination-section { display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-top:20px; }
@media (max-width:1200px) {
  .summary-row :deep(.el-col) { max-width:50%; flex:0 0 50%; margin-bottom:16px; }
  .summary-row { margin-bottom:0; }
}
</style>
