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

defineOptions({
  name: "CouponStatistics"
});

const loading = ref(false);
const couponStats = ref([]);
const selectedCoupon = ref("");
const dateRange = ref([]);

async function fetchCouponStatistics() {
  loading.value = true;
  try {
    const couponId = Number(selectedCoupon.value) || 1;
    const { data } = await getCouponStatistics(couponId, {
      startDate: dateRange.value?.[0],
      endDate: dateRange.value?.[1]
    });
    couponStats.value = data || [];
  } catch (error) {
    console.error("获取优惠券统计数据失败:", error);
  } finally {
    loading.value = false;
  }
}

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

<template>
  <div class="coupon-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="selectedCoupon" 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="fetchCouponStatistics">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-icon bg-blue">
              <i class="ri-ticket-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">1,234</div>
              <div class="stat-label">发放总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-icon bg-green">
              <i class="ri-check-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">856</div>
              <div class="stat-label">已使用</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-icon bg-orange">
              <i class="ri-time-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">234</div>
              <div class="stat-label">待使用</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-icon bg-red">
              <i class="ri-close-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">144</div>
              <div class="stat-label">已过期</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">
            <i class="ri-line-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">
            <i class="ri-pie-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="couponStats" v-loading="loading" stripe>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="issued" label="发放数" width="120" />
        <el-table-column prop="used" label="使用数" width="120" />
        <el-table-column prop="expired" label="过期数" width="120" />
        <el-table-column prop="usageRate" label="使用率" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.coupon-statistics {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .stat-card {
    display: flex;
    align-items: center;
    
    .stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      
      i {
        font-size: 20px;
        color: white;
      }
      
      &.bg-blue { background: linear-gradient(135deg, #409eff, #337ecc); }
      &.bg-green { background: linear-gradient(135deg, #67c23a, #529b2e); }
      &.bg-orange { background: linear-gradient(135deg, #fa8c16, #d46b08); }
      &.bg-red { background: linear-gradient(135deg, #f56c6c, #c45656); }
    }
    
    .stat-info {
      flex: 1;
      
      .stat-value {
        font-size: 20px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 2px;
      }
      
      .stat-label {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  
  .chart-placeholder {
    height: 250px;
    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>