<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'NetworkChart',
  data() {
    return {
      chart: null,
      staticData: {
        nodes: [
          { id: "1", name: "中心节点", symbolSize: 45, category: 0 },
          { id: "2", name: "技术部", symbolSize: 28, category: 1 },
          { id: "3", name: "市场部", symbolSize: 32, category: 2 },
          { id: "4", name: "研发A组", symbolSize: 18, category: 3 },
          { id: "5", name: "研发B组", symbolSize: 22, category: 3 },
          { id: "6", name: "华东区", symbolSize: 26, category: 4 },
          { id: "7", name: "华南区", symbolSize: 24, category: 4 },
          { id: "8", name: "数据中心", symbolSize: 35, category: 5 },
          { id: "9", name: "云服务", symbolSize: 30, category: 5 },
          { id: "10", name: "客户端", symbolSize: 20, category: 6 },
          { id: "11", name: "移动端", symbolSize: 25, category: 6 },
          { id: "12", name: "Web端", symbolSize: 22, category: 6 }
        ],
        links: [
          { source: "1", target: "2" },
          { source: "1", target: "3" },
          { source: "2", target: "4" },
          { source: "2", target: "5" },
          { source: "3", target: "6" },
          { source: "3", target: "7" },
          { source: "1", target: "8" },
          { source: "8", target: "9" },
          { source: "9", target: "10" },
          { source: "9", target: "11" },
          { source: "9", target: "12" },
          { source: "4", target: "10" },
          { source: "5", target: "11" },
          { source: "6", target: "12" },
          { source: "7", target: "10" }
        ],
        categories: [
          { name: "总部" },
          { name: "技术部门" },
          { name: "市场部门" },
          { name: "研发团队" },
          { name: "大区" },
          { name: "基础服务" },
          { name: "终端平台" }
        ]
      }
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      
      // 动态计算标签显示条件
      this.staticData.nodes.forEach(node => {
        node.label = { 
          show: node.symbolSize > 20,
          fontSize: Math.sqrt(node.symbolSize) * 2
        };
      });

      this.setChartOption(this.staticData);
    },
    setChartOption(graph) {
      const option = {
        // title: {
        //   text: '企业架构关系图',
        //   subtext: '静态数据示例',
        //   top: 20,
        //   left: 'center'
        // },
        tooltip: {},
        legend: {
          data: graph.categories.map(a => a.name),
          // orient: 'vertical',
          right: 10,
          top: 10
        },
        animationDuration: 1500,
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 200,
            edgeLength: 100
          },
          data: graph.nodes,
          links: graph.links,
          categories: graph.categories,
          roam: true,
          label: {
            position: 'right',
            formatter: '{b}',
            color: '#666'
          },
          lineStyle: {
            color: 'source',
            curveness: 0.1
          },
          emphasis: {
            focus: 'adjacency',
            label: {
              show: true,
              fontWeight: 'bold'
            }
          },
          // itemStyle: {
          //   color: (params) => {
          //     const colors = [
          //       '#5470c6', '#91cc75', '#fac858', 
          //       '#ee6666', '#73c0de', '#3ba272', 
          //       '#fc8452'
          //     ];
          //     return colors[params.data.category % colors.length];
          //   }
          // }
        }]
      };
      this.chart.setOption(option);
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart.dispose();
  }
};
</script>
