<template>
    <div ref="chart" :style="{ width, height }"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts'
  
  const props = defineProps({
    data: Array,
    width: { type: String, default: '100%' },
    height: { type: String, default: '300px' }
  })
  
  const chart = ref(null)
  let chartInstance = null
  
  const initChart = () => {
    chartInstance = echarts.init(chart.value)
    
    const option = {
      grid: { top: 20, right: 30, bottom: 30, left: 40 },
      xAxis: {
        type: 'category',
        data: props.data.map((_, i) => `${i * 10}s`),
        axisLabel: { color: '#666' }
      },
      yAxis: {
        type: 'value',
        axisLabel: { 
          formatter: '{value}%',
          color: '#666'
        }
      },
      series: [{
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: { color: 'rgba(103,194,58,0.1)' },
        lineStyle: { color: '#67c23a', width: 2 },
        data: props.data
      }],
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      }
    }
    
    chartInstance.setOption(option)
  }
  
  const updateChart = () => {
    if (!chartInstance) return
    
    chartInstance.setOption({
      xAxis: { data: props.data.map((_, i) => `${i * 10}s`) },
      series: [{ data: props.data }]
    })
  }
  
  const handleResize = () => {
    chartInstance?.resize()
  }
  
  onMounted(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize)
    chartInstance?.dispose()
  })
  
  watch(() => props.data, () => {
    updateChart()
  }, { deep: true })
  </script>