<template>
  <div class="activity-record-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">本学期活动总数</div>
            <div class="value">45</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">累计参与人次</div>
            <div class="value text-primary">1,280</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">平均素质分增量</div>
            <div class="value text-success">+3.5</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">信用分扣除人次</div>
            <div class="value text-danger">12</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 图表分析 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="12">
        <vab-card title="活动类型分布">
          <vab-chart :option="typeChartOption" style="height: 300px" />
        </vab-card>
      </el-col>
      <el-col :span="12">
        <vab-card title="月度参与趋势">
          <vab-chart :option="trendChartOption" style="height: 300px" />
        </vab-card>
      </el-col>
    </el-row>

    <!-- 详细报表 -->
    <vab-card title="详细数据报表">
      <template #header>
        <div class="header-actions">
          <span>详细数据报表</span>
          <el-button type="primary" @click="handleExportReport">导出Excel报表</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-date-picker
                v-model="queryForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table :data="tableData" border stripe height="400">
        <el-table-column prop="date" label="日期" width="120" sortable />
        <el-table-column prop="activityName" label="活动/事件名称" min-width="180" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="participant" label="参与人" width="100" />
        <el-table-column prop="college" label="学院" width="120" />
        <el-table-column prop="scoreChange" label="分值变动" width="120">
          <template #default="{ row }">
            <span :class="row.scoreChange > 0 ? 'text-success' : 'text-danger'">
              {{ row.scoreChange > 0 ? '+' : '' }}{{ row.scoreChange }}
            </span>
            <span class="text-xs text-gray ml-5">({{ row.scoreType === 'credit' ? '信用' : '素质' }})</span>
          </template>
        </el-table-column>
      </el-table>
    </vab-card>
  </div>
</template>

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

defineOptions({
  name: 'ActivityRecord',
})

const queryForm = reactive({
  dateRange: []
})

const tableData = ref([])

// Mock Charts
const typeChartOption = computed(() => ({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [
    {
      name: '活动类型',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: { show: false, position: 'center' },
      emphasis: {
        label: { show: true, fontSize: 20, fontWeight: 'bold' }
      },
      labelLine: { show: false },
      data: [
        { value: 15, name: '学术讲座' },
        { value: 12, name: '文体活动' },
        { value: 8, name: '志愿服务' },
        { value: 5, name: '社团招新' },
        { value: 5, name: '其他' }
      ]
    }
  ]
}))

const trendChartOption = computed(() => ({
  xAxis: {
    type: 'category',
    data: ['9月', '10月', '11月', '12月', '1月']
  },
  yAxis: { type: 'value' },
  series: [
    {
      data: [120, 200, 150, 380, 430],
      type: 'bar',
      itemStyle: { color: '#409eff' }
    }
  ]
}))

const handleQuery = () => {
  // Mock data
  tableData.value = [
    { date: '2026-01-20', activityName: '校园环境志愿清理', type: '志愿服务', participant: '梁健', college: 'ZJE', scoreChange: 2, scoreType: 'quality' },
    { date: '2026-01-18', activityName: '晚归违规扣分', type: '违规', participant: '王应哲', college: 'ZIBS', scoreChange: -5, scoreType: 'credit' },
    { date: '2026-01-15', activityName: '迎新晚会', type: '文体活动', participant: '曹青青', college: 'ZJE', scoreChange: 1.5, scoreType: 'quality' },
    { date: '2026-01-10', activityName: '学术讲座: AI发展', type: '学术讲座', participant: '鲁永波', college: 'ZJUI', scoreChange: 0.5, scoreType: 'quality' },
  ]
}

const handleExportReport = () => {
  ElMessage.success('正在生成并导出Excel报表...')
}

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

<style lang="scss" scoped>
.activity-record-container {
  .mb-20 { margin-bottom: 20px; }
  .text-primary { color: var(--el-color-primary); }
  .text-success { color: var(--el-color-success); }
  .text-danger { color: var(--el-color-danger); }
  .text-gray { color: #909399; }
  .text-xs { font-size: 12px; }
  .ml-5 { margin-left: 5px; }

  .stat-item {
    text-align: center;
    padding: 10px 0;
    .title { font-size: 14px; color: #909399; margin-bottom: 10px; }
    .value { font-size: 24px; font-weight: bold; color: #303133; }
  }

  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
