<template>
  <div class="chart-performance-monitor">
    <a-card title="图表性能监控" size="small" :bordered="false">
      <template #extra>
        <a-space>
          <a-button type="text" size="small" @click="refreshStats">
            <template #icon><reload-outlined /></template>
            刷新
          </a-button>
          <a-button type="text" size="small" @click="clearCache" danger>
            <template #icon><delete-outlined /></template>
            清理缓存
          </a-button>
        </a-space>
      </template>
      
      <div class="performance-stats">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic
              title="图表实例"
              :value="stats.chartInstances"
              suffix="个"
              :value-style="{ color: '#3f8600' }"
            />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="数据缓存"
              :value="stats.dataCache"
              suffix="项"
              :value-style="{ color: '#1890ff' }"
            />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="内存使用"
              :value="totalMemoryUsage"
              suffix="MB"
              :precision="2"
              :value-style="{ color: '#722ed1' }"
            />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="缓存命中率"
              :value="cacheHitRate"
              suffix="%"
              :precision="1"
              :value-style="{ color: cacheHitRate > 70 ? '#3f8600' : '#faad14' }"
            />
          </a-col>
        </a-row>
      </div>
      
      <a-divider />
      
      <div class="performance-details">
        <a-descriptions size="small" :column="2">
          <a-descriptions-item label="渲染器">Canvas (硬件加速)</a-descriptions-item>
          <a-descriptions-item label="动画优化">启用 (300ms)</a-descriptions-item>
          <a-descriptions-item label="大数据优化">启用 (2000+)</a-descriptions-item>
          <a-descriptions-item label="防抖更新">启用 (100ms)</a-descriptions-item>
          <a-descriptions-item label="懒加载">支持</a-descriptions-item>
          <a-descriptions-item label="数据缓存TTL">2-5分钟</a-descriptions-item>
        </a-descriptions>
      </div>
      
      <div class="performance-tips" v-if="showTips">
        <a-alert
          :message="performanceTip.title"
          :description="performanceTip.description"
          :type="performanceTip.type"
          show-icon
          closable
          @close="showTips = false"
        />
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ReloadOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { getCacheStats, clearAllCache } from '../utils/chartService'
import { message } from 'ant-design-vue'

// 性能统计数据
const stats = ref({
  chartInstances: 0,
  dataCache: 0,
  memoryUsage: {
    charts: 0,
    data: 0
  }
})

// 缓存命中统计
const cacheHits = ref(0)
const cacheRequests = ref(0)
const showTips = ref(true)

// 计算总内存使用量
const totalMemoryUsage = computed(() => {
  return stats.value.memoryUsage.charts + stats.value.memoryUsage.data
})

// 计算缓存命中率
const cacheHitRate = computed(() => {
  if (cacheRequests.value === 0) return 0
  return (cacheHits.value / cacheRequests.value) * 100
})

// 性能提示
const performanceTip = computed(() => {
  const hitRate = cacheHitRate.value
  const memoryUsage = totalMemoryUsage.value
  
  if (memoryUsage > 50) {
    return {
      title: '内存使用较高',
      description: '建议清理缓存或减少图表实例数量以优化性能',
      type: 'warning'
    }
  } else if (hitRate < 50) {
    return {
      title: '缓存命中率较低',
      description: '考虑增加缓存时间或优化数据请求策略',
      type: 'info'
    }
  } else if (hitRate > 80) {
    return {
      title: '性能表现优秀',
      description: '图表缓存工作良好，加载速度已优化',
      type: 'success'
    }
  } else {
    return {
      title: '性能表现良好',
      description: '图表加载速度正常，缓存机制运行稳定',
      type: 'info'
    }
  }
})

// 刷新统计数据
function refreshStats() {
  stats.value = getCacheStats()
  // message.success('统计数据已刷新')
}

// 清理缓存
function clearCache() {
  clearAllCache()
  refreshStats()
  cacheHits.value = 0
  cacheRequests.value = 0
  message.success('缓存已清理')
}

// 模拟缓存命中统计（实际项目中应该从chartService获取）
function simulateCacheStats() {
  // 模拟缓存请求
  cacheRequests.value += Math.floor(Math.random() * 3) + 1
  // 模拟缓存命中
  cacheHits.value += Math.floor(Math.random() * 2) + 1
}

// 定时器
let statsTimer = null

// 组件挂载时开始监控
onMounted(() => {
  refreshStats()
  
  // 每5秒更新一次统计数据
  statsTimer = setInterval(() => {
    refreshStats()
    simulateCacheStats()
  }, 5000)
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (statsTimer) {
    clearInterval(statsTimer)
  }
})
</script>

<style scoped>
.chart-performance-monitor {
  margin-bottom: 16px;
}

.performance-stats {
  margin-bottom: 16px;
}

.performance-details {
  margin-bottom: 16px;
}

.performance-tips {
  margin-top: 16px;
}

:deep(.ant-statistic-content) {
  font-size: 18px;
}

:deep(.ant-statistic-title) {
  font-size: 12px;
  color: #666;
}
</style>