<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getActivityStatistics } from "@/api/marketing";

defineOptions({
  name: "ActivityStatistics"
});

const loading = ref(false);
const activityStats = ref([]);
const selectedActivity = ref("");
const dateRange = ref([]);

async function fetchActivityStatistics() {
  loading.value = true;
  try {
    // 这里需要传入具体的活动ID
    const activityId = Number(selectedActivity.value) || 1;
    const { data } = await getActivityStatistics(activityId, {
      startDate: dateRange.value?.[0],
      endDate: dateRange.value?.[1]
    });
    activityStats.value = data || [];
  } catch (error) {
    console.error("获取活动统计数据失败:", error);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  fetchActivityStatistics();
});
</script>

<template>
  <div class="activity-statistics">
    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <span>活动统计筛选</span>
        </div>
      </template>
      <el-form :inline="true" :model="{}">
        <el-form-item label="选择活动：">
          <el-select v-model="selectedActivity" placeholder="请选择活动" clearable>
            <el-option label="春节促销活动" value="1" />
            <el-option label="新品上市活动" value="2" />
            <el-option label="会员专享活动" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围：">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchActivityStatistics">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>参与人数趋势</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <i class="ri-line-chart-line chart-icon"></i>
            <p>参与人数趋势图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>订单转化率</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <i class="ri-pie-chart-line chart-icon"></i>
            <p>订单转化率图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>收益分析</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <i class="ri-bar-chart-line chart-icon"></i>
            <p>收益分析图表</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="mt-4">
      <template #header>
        <div class="card-header">
          <span>详细数据</span>
        </div>
      </template>
      <el-table :data="activityStats" v-loading="loading" stripe>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="participants" label="参与人数" width="120" />
        <el-table-column prop="orders" label="订单数" width="120" />
        <el-table-column prop="revenue" label="营收" width="120" />
        <el-table-column prop="conversionRate" label="转化率" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.activity-statistics {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chart-placeholder {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-secondary);
    
    .chart-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
  }
}
</style>