<template>
  <div class="funding-source-container">
    <div class="chart-header">
      <CardTitle title="经费来源" />
      <div class="header-icons">
        <el-icon><Coin /></el-icon>
        <el-icon><Download /></el-icon>
        <el-icon><Star /></el-icon>
      </div>
    </div>

    <div class="chart-body">
      <div class="stats-panel">
        <div class="stat-card total-card">
          <div class="label">总计</div>
          <div class="value">4.358亿美元</div>
        </div>

        <div class="stat-card govt-card">
          <div class="label">政府部门</div>
          <div class="value">3.271亿美元</div>
        </div>

        <div class="stat-card other-card">
          <div class="label">其他机构</div>
          <div class="value">1.087亿美元</div>
        </div>
      </div>

      <div class="chart-panel" ref="chartRef"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import { Coin, Download, Star } from '@element-plus/icons-vue';
import CardTitle from '@/components/CardTitle.vue';

// 1. 模拟数据
// 注意：为了还原图表，这里的数据是凑出来的近似值，确保比例看起来像截图
const chartData = [
  // 右侧数据 (通常从12点顺时针开始)
  { value: 7830, name: '美国国土安全部', percent: '21%' },
  { value: 7290, name: '美国办公室国防部长和...', percent: '21%' },
  { value: 6740, name: '美国卫生与公众服务部...', percent: '18%' },
  { value: 4840, name: '美国空军', percent: '18%' },
  { value: 3880, name: '美国陆军', percent: '16%' },
  { value: 3520, name: '捐款', percent: '16%' },
  
  // 左侧数据
  { value: 3110, name: '基金', percent: '14%' },
  { value: 2905, name: '大学', percent: '12%' },
  { value: 2840, name: '私营部门', percent: '12%' },
  { value: 2400, name: '州和地方政府机构', percent: '12%' },
  { value: 2130, name: '其他非营利组织', percent: '11%' },
  { value: 2060, name: '非美国政府机构和国际...', percent: '8%' },
  { value: 1850, name: '其他联邦机构', percent: '8%' },
  { value: 1200, name: '其他', percent: '8%' },
];

// 颜色盘 (从截图吸取的近似色)
const colorPalette = [
  '#8cbbf1', // 浅蓝
  '#a5d67d', // 浅绿
  '#f6c469', // 橙黄
  '#fdf27e', // 黄色
  '#94e6d6', // 青绿
  '#6b85ef', // 深蓝紫
  '#d3d7fd', // 极浅蓝
  '#d9f3b2', // 极浅绿
  '#eb7d7d', // 红
  '#a28ee3', // 紫
  '#f4a678', // 橙
  '#6ba7f5', // 蓝
  '#f5a8a8', // 浅红
];

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

const initChart = () => {
  if (!chartRef.value) return;

  myChart = echarts.init(chartRef.value);

  const option = {
    color: colorPalette,
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}万 ({d}%)'
    },
    series: [
      {
        name: '经费来源',
        type: 'pie',
        radius: ['45%', '60%'], // 环形图半径
        center: ['50%', '50%'], // 居中
        data: chartData,
        // 标签配置
        label: {
          show: true,
          position: 'outside',
          formatter: function (params) {
            // 这里的逻辑是为了模仿截图：右边的文字名字在右侧，左边的文字名字在左侧
            // 简单的判断逻辑：基于 ECharts 内部计算的 label 角度，或者根据数据索引
            // 这里我们构建一个富文本结构
            return `{name|${params.name}}\n{val|${params.value}万}  {pct|${params.data.percent}}`;
          },
          // 关键配置：使用 edge 对齐方式让标签像表格一样排列在两侧
          alignTo: 'edge', 
          edgeDistance: 10, // 距离容器边缘的距离
          minMargin: 5,
          lineHeight: 20,
          rich: {
            name: {
              fontSize: 13,
              fontWeight: 'bold',
              color: '#333',
              padding: [0, 5]
            },
            val: {
              fontSize: 12,
              color: '#666'
            },
            pct: {
              fontSize: 12,
              color: '#666',
              padding: [0, 5]
            }
          }
        },
        // 引导线配置
        labelLine: {
          length: 15,
          length2: 60, // 第二段线长一点，以便连接到边缘
          maxSurfaceAngle: 80
        },
        // 每一项的样式
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        }
      }
    ]
  };

  myChart.setOption(option);
};

// 响应式处理
const resizeHandler = () => {
  if (myChart) {
    myChart.resize();
  }
};

onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener('resize', resizeHandler);
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler);
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.funding-source-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

  // 头部样式
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title-wrapper {
      display: flex;
      align-items: center;
      
      .blue-bar {
        width: 4px;
        height: 18px;
        background-color: #409eff; // Element Plus Primary Blue
        margin-right: 8px;
        border-radius: 2px;
      }

      .title-text {
        font-size: 18px;
        font-weight: 700;
        color: #303133;
      }
    }

    .header-icons {
      display: flex;
      gap: 15px;
      color: #909399;
      cursor: pointer;
      
      .el-icon {
        font-size: 18px;
        &:hover {
          color: #409eff;
        }
      }
    }
  }

  // 主体布局
  .chart-body {
    display: flex;
    flex-direction: row;
    height: 450px; // 固定一个高度给图表展示

    // 左侧统计面板
    .stats-panel {
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      flex-shrink: 0;

      .stat-card {
        padding: 15px;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .label {
          font-size: 14px;
        }

        .value {
          font-size: 20px;
          font-weight: 800;
        }

        // 不同卡片的特定样式
        &.total-card {
          background-color: #eef6ff; // 浅蓝背景
          .label { color: #409eff; }
          .value { color: #185ebd; }
        }

        &.govt-card {
          background-color: #fff2f2; // 浅红背景
          .label { color: #f56c6c; }
          .value { color: #c43e3e; }
        }

        &.other-card {
          background-color: #f0f9eb; // 浅绿背景
          .label { color: #67c23a; }
          .value { color: #3a8e1e; }
        }
      }
    }

    // 右侧图表区域
    .chart-panel {
      flex: 1;
      min-width: 0; // 防止 flex 子项溢出
      height: 100%;
    }
  }
}

// 移动端适配微调
@media (max-width: 768px) {
  .chart-body {
    flex-direction: column !important;
    height: auto !important;
    
    .stats-panel {
      width: 100% !important;
      flex-direction: row !important;
      overflow-x: auto;
      padding-bottom: 10px;
    }

    .chart-panel {
      height: 400px !important;
    }
  }
}
</style>