<template>
  <div class="echart-container" ref="chartContainer" :style="{ height: height }"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { createChart, handleResize, disposeChart, DataCache } from '../utils/chartService'

// 定义组件属性
const props = defineProps({
  // 图表选项
  options: {
    type: Object,
    required: true
  },
  // 图表高度
  height: {
    type: String,
    default: '300px'
  },
  // 自动调整大小
  autoResize: {
    type: Boolean,
    default: true
  },
  // 缓存键
  cacheKey: {
    type: String,
    default: null
  },
  // 启用缓存
  enableCache: {
    type: Boolean,
    default: true
  },
  // 缓存过期时间（毫秒）
  cacheTTL: {
    type: Number,
    default: 5 * 60 * 1000 // 5分钟
  }
})

// 定义事件
const emit = defineEmits(['chart-ready', 'chart-click'])

// 图表容器引用
const chartContainer = ref(null)

// 图表实例
let chartInstance = null

// 计算缓存键
const computedCacheKey = computed(() => {
  if (!props.enableCache || !props.cacheKey) return null
  return `chart_${props.cacheKey}_${JSON.stringify(props.options).slice(0, 100)}`
})

// 初始化图表
function initChart() {
  if (!chartContainer.value) return
  
  // 检查缓存
  if (props.enableCache && computedCacheKey.value) {
    const cachedData = DataCache.get(computedCacheKey.value)
    if (cachedData) {
      console.log('使用缓存的图表数据:', computedCacheKey.value)
    }
  }
  
  // 创建图表实例（使用缓存键）
  chartInstance = createChart(
    chartContainer.value, 
    props.options, 
    computedCacheKey.value
  )
  
  // 添加点击事件监听
  chartInstance.on('click', (params) => {
    emit('chart-click', params)
  })
  
  // 缓存图表配置
  if (props.enableCache && computedCacheKey.value) {
    DataCache.set(computedCacheKey.value, props.options, props.cacheTTL)
  }
  
  // 触发图表就绪事件
  emit('chart-ready', chartInstance)
}

// 更新图表选项（优化版本）
function updateChart() {
  if (chartInstance) {
    // 使用notMerge=false和lazyUpdate=true来优化性能
    chartInstance.setOption(props.options, false, true)
    
    // 更新缓存
    if (props.enableCache && computedCacheKey.value) {
      DataCache.set(computedCacheKey.value, props.options, props.cacheTTL)
    }
  }
}

// 防抖更新函数
let updateTimer = null
function debouncedUpdate() {
  if (updateTimer) {
    clearTimeout(updateTimer)
  }
  updateTimer = setTimeout(() => {
    updateChart()
  }, 100) // 100ms防抖
}

// 监听选项变化（优化版本）
watch(() => props.options, (newOptions, oldOptions) => {
  if (chartInstance) {
    // 深度比较，避免不必要的更新
    const optionsChanged = JSON.stringify(newOptions) !== JSON.stringify(oldOptions)
    if (optionsChanged) {
      debouncedUpdate()
    }
  }
}, { deep: true })

// 处理窗口大小变化
function onResize() {
  handleResize(chartInstance)
}

// 组件挂载时初始化图表
onMounted(() => {
  initChart()
  
  // 添加窗口大小变化监听
  if (props.autoResize) {
    window.addEventListener('resize', onResize)
  }
})

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理防抖定时器
  if (updateTimer) {
    clearTimeout(updateTimer)
    updateTimer = null
  }
  
  // 移除窗口大小变化监听
  if (props.autoResize) {
    window.removeEventListener('resize', onResize)
  }
  
  // 销毁图表实例（传入缓存键以清理相关缓存）
  disposeChart(chartInstance, computedCacheKey.value)
  chartInstance = null
})

// 暴露方法
defineExpose({
  getChartInstance: () => chartInstance,
  resize: () => handleResize(chartInstance)
})
</script>

<style scoped>
.echart-container {
  width: 100%;
  min-height: 200px;
  background-color: #fff;
}
</style>