<template>
  <div ref="chartRef" :style="{ width: width, height: height }" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    default: '饼图'
  },
  // 图表宽度
  width: {
    type: String,
    default: '100%'
  },
  // 图表高度
  height: {
    type: String,
    default: '400px'
  },
  // 图表数据
  chartData: {
    type: Object,
    default: () => ({
      // 饼图数据
      seriesData: [
        {
          name: 'Category 1',
          value: 335,
          color: '#409EFF'
        },
        {
          name: 'Category 2',
          value: 310,
          color: '#67C23A'
        },
        {
          name: 'Category 3',
          value: 234,
          color: '#E6A23C'
        },
        {
          name: 'Category 4',
          value: 135,
          color: '#F56C6C'
        },
        {
          name: 'Category 5',
          value: 548,
          color: '#909399'
        }
      ]
    })
  },
  // 图表配置选项
  chartOptions: {
    type: Object,
    default: () => ({})
  },
  // 饼图半径
  radius: {
    type: Array,
    default: () => ['40%', '70%']
  }
});

const chartRef = ref(null);
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  // 销毁已存在的图表实例
  if (chartInstance) {
    chartInstance.dispose();
  }

  // 创建新的图表实例
  chartInstance = echarts.init(chartRef.value);

  // 设置图表配置
  updateChart();
};

// 更新图表
const updateChart = () => {
  if (!chartInstance) return;

  const option = {
    title: {
      text: props.title,
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: props.chartData.seriesData.map(item => item.name)
    },
    series: [
      {
        name: '数据统计',
        type: 'pie',
        radius: props.radius,
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.chartData.seriesData.map(item => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            color: item.color
          }
        }))
      }
    ],
    // 合并用户自定义配置
    ...props.chartOptions
  };

  chartInstance.setOption(option);
};

// 响应式更新图表
watch(() => [props.chartData, props.chartOptions, props.radius], () => {
  updateChart();
}, { deep: true });

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

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时销毁图表
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.chart-container {
  position: relative;
}
</style>
