<template>
  <div class="daily-active-users-chart">
    <div class="chart-header">
      <h3 class="chart-title">日活用户趋势</h3>
      <div class="chart-controls">
        <el-select v-model="selectedYear" @change="loadChartData" placeholder="选择年份">
          <el-option
            v-for="year in availableYears"
            :key="year"
            :label="`${year}年`"
            :value="year">
          </el-option>
        </el-select>
      </div>
    </div>
    
    <div class="chart-container" ref="chartContainer"></div>
    
    <div class="chart-footer">
      <div class="chart-stats">
        <div class="stat-item">
          <span class="stat-label">今日日活:</span>
          <span class="stat-value">{{ formatNumber(todayDAU) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">日增长率:</span>
          <span class="stat-value" :class="dayGrowthRate >= 0 ? 'positive' : 'negative'">
            {{ dayGrowthRate >= 0 ? '+' : '' }}{{ dayGrowthRate.toFixed(1) }}%
          </span>
        </div>
        <div class="stat-item">
          <span class="stat-label">月均日活:</span>
          <span class="stat-value">{{ formatNumber(monthlyAvgDAU) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">月增长率:</span>
          <span class="stat-value" :class="monthGrowthRate >= 0 ? 'positive' : 'negative'">
            {{ monthGrowthRate >= 0 ? '+' : '' }}{{ monthGrowthRate.toFixed(1) }}%
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as analyticsAPI from '@/api/analytics'

// 响应式数据
const chartContainer = ref(null)
const selectedYear = ref(2024)
const availableYears = ref([2023, 2024, 2025])
const chartInstance = ref(null)

// 统计数据
const todayDAU = ref(0)
const dayGrowthRate = ref(0)
const monthlyAvgDAU = ref(0)
const monthGrowthRate = ref(0)

// 动态加载ECharts
const loadECharts = () => {
  return new Promise((resolve, reject) => {
    if (window.echarts) {
      resolve(window.echarts)
      return
    }
    
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'
    script.onload = () => resolve(window.echarts)
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// 加载图表数据
const loadChartData = async () => {
  try {
    // 并行加载图表数据和概览数据
    const [chartRes, overviewRes] = await Promise.all([
      analyticsAPI.getDailyActiveUsersTrend(selectedYear.value, 'monthly'),
      analyticsAPI.getUserActivityOverview()
    ])
    
    // 处理图表数据
    if (chartRes && chartRes.monthlyData) {
      await nextTick()
      initChart(chartRes.monthlyData)
    }
    
    // 处理概览数据
    if (overviewRes) {
      todayDAU.value = overviewRes.todayDAU || 0
      dayGrowthRate.value = overviewRes.dayGrowthRate || 0
      monthlyAvgDAU.value = overviewRes.monthlyAvgDAU || 0
      monthGrowthRate.value = overviewRes.monthGrowthRate || 0
    }
    
  } catch (error) {
    console.error('加载图表数据失败:', error)
    ElMessage.error('加载图表数据失败')
  }
}

// 初始化图表
const initChart = async (data) => {
  try {
    const echarts = await loadECharts()
    
    if (!chartContainer.value) return
    
    // 销毁现有图表实例
    if (chartInstance.value) {
      chartInstance.value.dispose()
    }
    
    // 创建新图表实例
    chartInstance.value = echarts.init(chartContainer.value)
    
    // 准备数据
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    const values = data.map(item => item.avgDailyActive || 0)
    const maxValues = data.map(item => item.maxDailyActive || 0)
    const minValues = data.map(item => item.minDailyActive || 0)
    
    // 图表配置
    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(255, 255, 255, 0.1)',
        borderWidth: 1,
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        formatter: function(params) {
          const dataIndex = params[0].dataIndex
          const month = months[dataIndex]
          const avgValue = values[dataIndex]
          const maxValue = maxValues[dataIndex]
          const minValue = minValues[dataIndex]
          
          return `${month}<br/>
                  平均日活: ${formatNumber(avgValue)}<br/>
                  最高日活: ${formatNumber(maxValue)}<br/>
                  最低日活: ${formatNumber(minValue)}`
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: months,
        axisLine: {
          lineStyle: {
            color: '#e0e0e0'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          formatter: function(value) {
            return formatNumber(value)
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '日活用户',
          type: 'line',
          data: values,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#3b82f6',
            width: 3
          },
          itemStyle: {
            color: '#3b82f6',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(59, 130, 246, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(59, 130, 246, 0.05)'
                }
              ]
            }
          },
          emphasis: {
            focus: 'series',
            itemStyle: {
              color: '#1d4ed8',
              borderColor: '#fff',
              borderWidth: 3,
              shadowBlur: 10,
              shadowColor: 'rgba(59, 130, 246, 0.5)'
            }
          }
        }
      ],
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut'
    }
    
    // 设置图表配置
    chartInstance.value.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', handleResize)
    
  } catch (error) {
    console.error('初始化图表失败:', error)
    ElMessage.error('图表初始化失败')
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
}

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return Math.round(num).toLocaleString()
}

// 组件挂载时加载数据
onMounted(() => {
  loadChartData()
})

// 组件卸载时清理
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose()
    chartInstance.value = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.daily-active-users-chart {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-container {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}

.chart-footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}

.chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.stat-value.positive {
  color: #059669;
}

.stat-value.negative {
  color: #dc2626;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .chart-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .daily-active-users-chart {
    padding: 16px;
  }
  
  .chart-container {
    height: 200px;
  }
  
  .chart-stats {
    grid-template-columns: 1fr;
  }
}
</style>
