<template>
  <RelationGraph style="width: 100%; height: 100%;" ref="graphRef" :options="graphOptions" @node-click="onNodeClick"
    @line-click="onLineClick" />
</template>

<script setup>
import { defineComponent, ref, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
// import type { RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RGOptions, RelationGraphComponent } from 'relation-graph-vue3';

const graphRef = ref(null);
const graphOptions = {
  debug: true,
  defaultNodeBorderWidth: 0,
  defaultNodeColor: 'var(--color-primary-50)',
  defaultNodeFontColor: 'var(--text-primary-80-color)',
  allowSwitchLineShape: true,
  allowSwitchJunctionPoint: true,
  defaultLineShape: 1,
  distance_coefficient: 1,
  layouts: [
    {
      layoutName: 'center',
      // 👇 关键参数：控制各层级之间的距离（值越大，连线越长，节点间距越大）
      distance_coefficient: 1.8,  // 默认值通常是 1.0，可以调到 1.5-3.0
      // 👇 层级间的垂直间距
      levelDistance: 80,          // 单位：像素，默认约 80-100
      // 👇 同一层级内节点之间的水平间距
      nodeDistance: 100            // 单位：像素，默认约 100
    }
  ],
  defaultJunctionPoint: 'border',
  // defaultNodeWidth: 120,   // 全局默认节点宽度
  // defaultNodeHeight: 120,   // 全局默认节点高度
};


const showGraph = async () => {
  const __graph_json_data = props.graphData;
  const graphInstance = graphRef.value?.getInstance();
  if (graphInstance) {
    await graphInstance.setJsonData(__graph_json_data);
    await graphInstance.moveToCenter();
    // await graphInstance.zoomToFit();
    await graphInstance.setZoom(65);
  }
};

const emit = defineEmits(['nodeClick', 'lineClick'])

const onNodeClick = (nodeObject, $event) => {
  console.log('onNodeClick:', nodeObject);
  emit('nodeClick', nodeObject)
};

const onLineClick = (lineObject, linkObject, $event) => {
  console.log('onLineClick:', lineObject);
  emit('lineClick', lineObject)
};

const props = defineProps({
  graphData: {
    type: Object,
    default: {
      rootId: '2',
      nodes: [
        { id: '1', text: 'Node-1' },
        { id: '2', text: 'Node-2' },
        { id: '3', text: 'Node-3' },
        { id: '4', text: 'Node-4' },
        { id: '6', text: 'Node-6' },
        { id: '7', text: 'Node-7' },
        { id: '8', text: 'Node-8' },
        { id: '9', text: 'Node-9' },
        { id: '71', text: 'Node-71' },
        { id: '72', text: 'Node-72' },
        { id: '73', text: 'Node-73' },
        { id: '81', text: 'Node-81' },
        { id: '82', text: 'Node-82' },
        { id: '83', text: 'Node-83' },
        { id: '84', text: 'Node-84' },
        { id: '85', text: 'Node-85' },
        { id: '91', text: 'Node-91' },
        { id: '92', text: 'Node-82' },
        { id: '51', text: 'Node-51' },
        { id: '52', text: 'Node-52' },
        { id: '53', text: 'Node-53' },
        { id: '54', text: 'Node-54' },
        { id: '55', text: 'Node-55' },
        { id: '5', text: 'Node-5' }
      ],
      lines: [
        { from: '7', to: '71', text: 'Investment' },
        { from: '7', to: '72', text: 'Investment' },
        { from: '7', to: '73', text: 'Investment' },
        { from: '8', to: '81', text: 'Investment' },
        { from: '8', to: '82', text: 'Investment' },
        { from: '8', to: '83', text: 'Investment' },
        { from: '8', to: '84', text: 'Investment' },
        { from: '8', to: '85', text: 'Investment' },
        { from: '9', to: '91', text: 'Investment' },
        { from: '9', to: '92', text: 'Investment' },
        { from: '5', to: '51', text: 'Investment1' },
        { from: '5', to: '52', text: 'Investment' },
        { from: '5', to: '53', text: 'Investment3' },
        { from: '5', to: '54', text: 'Investment4' },
        { from: '5', to: '55', text: 'Investment' },
        { from: '1', to: '2', text: 'Investment' },
        { from: '3', to: '1', text: 'Executive' },
        { from: '4', to: '2', text: 'Executive' },
        { from: '6', to: '2', text: 'Executive' },
        { from: '7', to: '2', text: 'Executive' },
        { from: '8', to: '2', text: 'Executive' },
        { from: '9', to: '2', text: 'Executive' },
        { from: '1', to: '5', text: 'Investment' }
      ]
    }
  }
})

onMounted(() => {
  showGraph();
});
</script>

<style scoped lang="scss"></style>
