<template>
  <div ref="chartRef" style="width: 100%; height: 350px;"></div>
</template>

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

const props = defineProps({
  data: {
    type: Array as any,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  }
});

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

const initChart = () => {
  if (!chartRef.value || props.data.length === 0) return;
  if (!chart) {
    chart = echarts.init(chartRef.value);
  }

  // 颜色配置：蓝、绿、黄
  const colors = ['#409EFF', '#67C23A', '#E6A23C'];
  const isOppFunnel = props.title.includes('商机');

  const funnelData = props.data.map((item: any, index: number) => ({
    name: item.label,
    // 视觉比例处理：100, 70, 40
    value: 100 - index * 30,
    realValue: item.value,
    unit: item.unit || '',
    itemStyle: {
      color: colors[index % colors.length]
    }
  }));

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return `${params.data.name}: ${params.data.realValue}${isOppFunnel ? '万' : params.data.unit}`;
      }
    },
    series: [
      {
        name: props.title,
        type: 'funnel',
        left: '10%',
        right: isOppFunnel ? '35%' : '10%',
        top: 20,
        bottom: 20,
        width: isOppFunnel ? '55%' : '80%',
        minSize: '30%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside',
          formatter: (params: any) => {
            if (isOppFunnel) {
              return `${params.data.name}: ${params.data.realValue}万`;
            } else {
              return `${params.data.name}: ${params.data.realValue}${params.data.unit}`;
            }
          },
          color: '#fff',
          fontSize: 12
        },
        itemStyle: {
          borderWidth: 0
        },
        data: funnelData
      },
      // 仅商机漏斗显示的右侧外部标签
      {
        type: 'funnel',
        left: '10%',
        right: '35%',
        top: 20,
        bottom: 20,
        width: '55%',
        minSize: '30%',
        maxSize: '100%',
        sort: 'descending',
        label: {
          show: isOppFunnel,
          position: 'right',
          formatter: (params: any) => {
            return `{name|${params.data.name}}\n{value|${params.data.unit}}`;
          },
          rich: {
            name: { color: '#666', fontSize: 11, align: 'left', padding: [0, 0, 4, 10] },
            value: { color: '#333', fontSize: 12, fontWeight: 'bold', align: 'left', padding: [0, 0, 0, 10] }
          }
        },
        labelLine: {
          show: isOppFunnel,
          length: 40,
          lineStyle: { color: '#ddd', width: 1 }
        },
        data: funnelData,
        z: 1
      }
    ]
  };

  chart.setOption(option);
};

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

watch(() => props.data, () => {
  initChart();
}, { deep: true });
</script>
