<script setup lang="ts">
import { computed } from 'vue';
import { useECharts, CHART_COLORS } from '@/composables/useECharts';

const props = defineProps<{
  byCategory: Record<string, { totalRevenue: number }>;
}>();

const CATEGORY_LABELS: Record<string, string> = {
  cash_cow: '现金牛',
  efficiency_tool: '效能工具',
  moat: '资本护城河',
  composite: '复合型',
  uncategorized: '未打标',
};

function fmtCurrency(n: number): string {
  if (n >= 10000) return `¥${(n / 10000).toFixed(1)}万`;
  return `¥${Math.round(n).toLocaleString()}`;
}

const total = computed(() =>
  Object.values(props.byCategory).reduce((s, v) => s + (v.totalRevenue > 0 ? v.totalRevenue : 0), 0)
);

const option = computed(() => {
  const data = Object.entries(props.byCategory)
    .filter(([, v]) => v.totalRevenue > 0)
    .map(([k, v]) => ({ name: CATEGORY_LABELS[k] || k, value: Math.round(v.totalRevenue) }));

  return {
    color: CHART_COLORS,
    textStyle: { fontFamily: "'Geist', 'PingFang SC', sans-serif", color: '#4d5258' },
    tooltip: {
      trigger: 'item',
      backgroundColor: '#ffffff',
      borderColor: '#dfe2e6',
      borderWidth: 1,
      textStyle: { color: '#2d3033', fontSize: 12 },
      extraCssText: 'box-shadow: 0 8px 24px rgba(34,40,42,0.06); border-radius: 10px; padding: 8px 12px;',
      formatter: (params: any) => `
        <div style="font-weight:600;margin-bottom:4px">${params.name}</div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:13px">¥${params.value.toLocaleString()} <span style="color:#7a8085">(${params.percent}%)</span></div>
      `,
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      left: 'center',
      itemGap: 18,
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      textStyle: { fontSize: 12, color: '#4d5258' },
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '38%',
        style: {
          text: '总产出',
          fill: '#7a8085',
          fontSize: 11,
          fontFamily: "'Geist', 'PingFang SC', sans-serif",
          fontWeight: 500,
        },
      },
      {
        type: 'text',
        left: 'center',
        top: '46%',
        style: {
          text: fmtCurrency(total.value),
          fill: '#2d3033',
          fontSize: 22,
          fontWeight: 600,
          fontFamily: "'JetBrains Mono', monospace",
        },
      },
    ],
    series: [{
      type: 'pie',
      radius: ['58%', '78%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderColor: '#ffffff',
        borderWidth: 2,
      },
      label: { show: false },
      labelLine: { show: false },
      emphasis: {
        scale: true,
        scaleSize: 6,
        itemStyle: {
          shadowBlur: 12,
          shadowColor: 'rgba(0,0,0,0.10)',
        },
      },
      data,
    }],
  };
});

const { chartRef } = useECharts(option);
</script>

<template>
  <div ref="chartRef" class="revenue-pie"></div>
</template>

<style scoped>
.revenue-pie { width: 100%; height: 320px; }
</style>
