<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

defineOptions({
  name: "MarketingStatistics"
});

const router = useRouter();
const activeTab = ref("overview");

const tabs = [
  { name: "overview", label: "统计概览", icon: "ri:dashboard-line" },
  { name: "activity", label: "活动统计", icon: "ri:calendar-event-line" },
  { name: "coupon", label: "优惠券统计", icon: "ri:coupon-3-line" },
  { name: "trend", label: "趋势分析", icon: "ri:line-chart-line" }
];

function handleTabChange(tabName: string) {
  activeTab.value = tabName;
  router.push(`/marketing/statistics/${tabName}`);
}

onMounted(() => {
  // 根据当前路由设置激活的tab
  const routeName = router.currentRoute.value.name;
  if (routeName === "StatisticsOverview") activeTab.value = "overview";
  else if (routeName === "ActivityStatistics") activeTab.value = "activity";
  else if (routeName === "CouponStatistics") activeTab.value = "coupon";
  else if (routeName === "TrendAnalysis") activeTab.value = "trend";
});
</script>

<template>
  <div class="marketing-statistics">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="statistics-tabs">
      <el-tab-pane 
        v-for="tab in tabs" 
        :key="tab.name" 
        :name="tab.name" 
        :label="tab.label"
      >
        <template #label>
          <span class="flex items-center">
            <i :class="useRenderIcon(tab.icon)" class="mr-2"></i>
            {{ tab.label }}
          </span>
        </template>
        <router-view />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.marketing-statistics {
  padding: 24px;
  background-color: var(--el-bg-color-page);
  min-height: calc(100vh - 120px);
}

.statistics-tabs {
  :deep(.el-tabs__header) {
    background: white;
    padding: 0 24px;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
  
  :deep(.el-tabs__nav-wrap)::after {
    height: 1px;
  }
  
  :deep(.el-tabs__item) {
    height: 56px;
    line-height: 56px;
    font-size: 14px;
    font-weight: 500;
  }
  
  :deep(.el-tabs__content) {
    background: white;
    border-radius: 0 0 8px 8px;
    padding: 24px;
    min-height: 500px;
  }
}
</style>