<template>
  <div class="system-overview">
    <h1 class="page-title">系统总览</h1>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in statistics" :key="stat.label">
        <div class="stat-icon" :style="{ background: stat.color }">
          <i>{{ stat.icon }}</i>
        </div>
        <div class="stat-content">
          <h3>{{ stat.value }}</h3>
          <p>{{ stat.label }}</p>
          <span class="stat-change" :class="stat.trend">
            {{ stat.change }}
          </span>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户活跃度折线图</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              />
            </div>
          </template>
          <div class="chart-container" ref="activityChart"></div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <span>资源分类统计(饼图)</span>
          </template>
          <div class="chart-container" ref="resourcePieChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 今日访问量详情 -->
    <el-card class="visit-card">
      <template #header>
        <span>今日访问量</span>
      </template>
      <div class="visit-stats">
        <div class="visit-item" v-for="item in visitStats" :key="item.label">
          <div class="visit-label">{{ item.label }}</div>
          <div class="visit-value">{{ item.value }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElRow, ElCol, ElCard, ElDatePicker } from 'element-plus';
import * as echarts from 'echarts';
import { systemOverviewApi } from '@/apis/system/overview';

const dateRange = ref<[Date, Date] | null>(null);
const activityChart = ref<HTMLElement | null>(null);
const resourcePieChart = ref<HTMLElement | null>(null);
let activityChartInstance: echarts.ECharts | null = null;
let pieChartInstance: echarts.ECharts | null = null;

const statistics = ref<{
  icon: string;
  label: string;
  value: string | number;
  change: string;
  trend: 'up' | 'down';
  color: string;
}[]>([]);

const visitStats = ref<{ label: string; value: string | number }[]>([]);

onMounted(async () => {
  initCharts();
  await loadOverviewData();
});

onUnmounted(() => {
  if (activityChartInstance) {
    activityChartInstance.dispose();
  }
  if (pieChartInstance) {
    pieChartInstance.dispose();
  }
});

async function loadOverviewData() {
  try {
    const [statRes, activeRes, pieRes, todayRes] = await Promise.all([
      systemOverviewApi.getStatistics(),
      systemOverviewApi.getActiveUsersChart('2025-10-15', '2025-10-21'),
      systemOverviewApi.getResourceCategoryStats(),
      systemOverviewApi.getTodayVisits()
    ]);

    if (statRes.success && statRes.data) {
      const d = statRes.data;
      statistics.value = [
        {
          icon: '👥',
          label: '总用户数',
          value: d.totalUsers,
          change: d.totalUsersChange,
          trend: d.totalUsersChange.startsWith('-') ? 'down' : 'up',
          color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
        },
        {
          icon: '📚',
          label: '总资源数',
          value: d.totalResources,
          change: d.totalResourcesChange,
          trend: d.totalResourcesChange.startsWith('-') ? 'down' : 'up',
          color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
        },
        {
          icon: '👁',
          label: '今日访问量',
          value: d.todayVisits,
          change: d.todayVisitsChange,
          trend: d.todayVisitsChange.startsWith('-') ? 'down' : 'up',
          color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
        },
        {
          icon: '✅',
          label: '活跃用户',
          value: d.activeUsers,
          change: d.activeUsersChange,
          trend: d.activeUsersChange.startsWith('-') ? 'down' : 'up',
          color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
        }
      ];
    }

    if (todayRes.success && todayRes.data) {
      const t = todayRes.data;
      visitStats.value = [
        { label: 'UV(独立访客)', value: t.uv },
        { label: 'PV(页面浏览量)', value: t.pv },
        { label: '平均访问时长', value: t.avgVisitDuration },
        { label: '跳出率', value: t.bounceRate }
      ];
    }

    if (activeRes.success && activeRes.data) {
      updateActivityChart(activeRes.data.labels, activeRes.data.values);
    }

    if (pieRes.success && pieRes.data) {
      updatePieChart(pieRes.data.items);
    }
  } catch (error) {
    console.error('加载系统总览数据失败:', error);
  }
}

function initCharts() {
  if (activityChart.value) {
    activityChartInstance = echarts.init(activityChart.value);
  }

  if (resourcePieChart.value) {
    pieChartInstance = echarts.init(resourcePieChart.value);
  }
}

function updateActivityChart(labels: string[], values: number[]) {
  if (!activityChartInstance) return;
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: labels
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values,
        type: 'line',
        smooth: true,
        areaStyle: {}
      }
    ]
  };
  activityChartInstance.setOption(option);
}

function updatePieChart(items: { name: string; value: number }[]) {
  if (!pieChartInstance) return;
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: items
      }
    ]
  };
  pieChartInstance.setOption(option);
}
</script>

<style lang="scss" scoped>
.system-overview {
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #141F38;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
  
  h3 {
    font-size: 28px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 4px;
  }
  
  p {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
  }
}

.stat-change {
  font-size: 13px;
  
  &.up {
    color: #4caf50;
  }
  
  &.down {
    color: #f44336;
  }
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.visit-card {
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.visit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.visit-item {
  text-align: center;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.visit-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.visit-value {
  font-size: 24px;
  font-weight: 600;
  color: #C62828;
}
</style>

