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

defineOptions({
  name: "TrendAnalysis"
});

const loading = ref(false);
const trendData = ref([]);
const analysisType = ref("revenue");
const periodType = ref("month");
const dateRange = ref([]);

const typeOptions = [
  { label: "营收趋势", value: "revenue" },
  { label: "活动参与趋势", value: "activity" },
  { label: "优惠券使用趋势", value: "coupon" }
];

const periodOptions = [
  { label: "按日", value: "day" },
  { label: "按周", value: "week" },
  { label: "按月", value: "month" }
];

async function fetchTrendAnalysis() {
  loading.value = true;
  try {
    const { data } = await getTrendAnalysis({
      type: analysisType.value,
      period: periodType.value,
      startDate: dateRange.value?.[0],
      endDate: dateRange.value?.[1]
    });
    trendData.value = data || [];
  } catch (error) {
    console.error("获取趋势分析数据失败:", error);
  } finally {
    loading.value = false;
  }
}

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

<template>
  <div class="trend-analysis">
    <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="analysisType" placeholder="请选择分析类型">
            <el-option
              v-for="option in typeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间周期：">
          <el-select v-model="periodType" placeholder="请选择时间周期">
            <el-option
              v-for="option in periodOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </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="fetchTrendAnalysis">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ typeOptions.find(opt => opt.value === analysisType)?.label }}趋势图</span>
            </div>
          </template>
          <div class="main-chart-container">
            <div class="chart-placeholder">
              <i class="ri-line-chart-line chart-icon"></i>
              <p>趋势分析图表</p>
              <p class="chart-desc">展示选定时间段内的数据变化趋势</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>关键指标</span>
            </div>
          </template>
          <div class="metrics-list">
            <div class="metric-item">
              <div class="metric-label">本期数值</div>
              <div class="metric-value">¥125,680</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">环比增长</div>
              <div class="metric-value positive">+15.8%</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">同比增长</div>
              <div class="metric-value positive">+28.3%</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">最高值</div>
              <div class="metric-value">¥156,200</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">最低值</div>
              <div class="metric-value">¥89,450</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>同比分析</span>
            </div>
          </template>
          <div class="chart-placeholder small">
            <i class="ri-bar-chart-line chart-icon"></i>
            <p>同比数据分析图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>环比分析</span>
            </div>
          </template>
          <div class="chart-placeholder small">
            <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="trendData" v-loading="loading" stripe>
        <el-table-column prop="period" :label="`${periodOptions.find(opt => opt.value === periodType)?.label}期`" width="120" />
        <el-table-column prop="value" label="数值" width="120" />
        <el-table-column prop="growthRate" label="增长率" width="120">
          <template #default="{ row }">
            <span :class="row.growthRate >= 0 ? 'positive' : 'negative'">
              {{ row.growthRate >= 0 ? '+' : '' }}{{ row.growthRate }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="accumulated" label="累计值" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.trend-analysis {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .main-chart-container {
    height: 400px;
  }
  
  .chart-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-secondary);
    
    &.small {
      height: 200px;
    }
    
    .chart-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    .chart-desc {
      font-size: 12px;
      margin-top: 8px;
      opacity: 0.7;
    }
  }
  
  .metrics-list {
    .metric-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--el-border-color-light);
      
      &:last-child {
        border-bottom: none;
      }
      
      .metric-label {
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
      
      .metric-value {
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        
        &.positive {
          color: #67c23a;
        }
        
        &.negative {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>