<template>
  <div class="echarts-report">
    <h2>{{ title }}</h2>
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps<{
  title: string;
  chartType: 'line' | 'bar' | 'pie' | 'radar';
  data: any;
}>();

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

const initChart = () => {
  if (!chartRef.value) return;
  
  chart = echarts.init(chartRef.value);
  updateChart();
};

const updateChart = () => {
  if (!chart) return;
  
  let option: echarts.EChartsOption = {};
  
  switch (props.chartType) {
    case 'line':
      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: props.data.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: props.data.series
      };
      break;
    case 'bar':
      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: props.data.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: props.data.series
      };
      break;
    case 'pie':
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: props.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      break;
    case 'radar':
      option = {
        tooltip: {},
        radar: {
          indicator: props.data.indicator
        },
        series: [
          {
            type: 'radar',
            data: props.data.series
          }
        ]
      };
      break;
  }
  
  chart.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => {
    chart?.resize();
  });
});

watch(
  () => [props.data, props.chartType],
  () => {
    updateChart();
  },
  { deep: true }
);
</script>

<style scoped>
.echarts-report {
  width: 100%;
  margin-bottom: 20px;
}

.echarts-report h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.chart-container {
  width: 100%;
  height: 400px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
</style>