<template>
  <RelationGraph style="width: 100%; height: 100%" ref="graphRef" :options="graphOptionsH" :on-node-click="onNodeClick"
    :on-line-click="onLineClick">
    <template #node="{ node }">
      <div class="custom-node" :style="{
        backgroundColor: node.color || 'var(--color-primary-50)',
      }">
        <!-- 在这里自由控制文字样式 -->
        <span :style="{
          color: node.fontColor || '#ffffff',
          fontSize: node.customFontSize || '24px',  // 可以从数据中读取
          fontWeight: 'normal',
          textAlign: 'center',
          wordBreak: 'break-word',
          padding: '0 8px'
        }">
          {{ node.text }}
        </span>
      </div>
    </template>
  </RelationGraph>
</template>

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

const graphRef = ref(null);

const graphOptionsH = {
  layout: {
    layoutName: "tree",
    // min_per_width: 40,
    // max_per_width: 70,
    min_per_height: 'auto',
  },
  defaultLineMarker: {
    markerWidth: 12,
    markerHeight: 12,
    refX: 6,
    refY: 6,
    data: "M2,2 L10,6 L2,10 L6,6 L2,2"
  },
  defaultNodeShape: 1,
  defaultNodeWidth: 35,
  defaultLineShape: 4,
  defaultJunctionPoint: "tb",
  defaultNodeBorderWidth: 2,
  defaultNodeBorderColor: 'var(--color-primary-100)',
  defaultLineColor: "var(--color-primary-50)",
  defaultNodeColor: "var(--color-primary-50)",
  defaultNodeFontColor: 'var(--text-primary-90-color)',   // 默认文字颜色：深灰色
  // defaultNodeHeight: 'auto'
};

const graphOptionsV = {
  layouts: [
    {
      // label: "中心",
      layoutName: "tree",
      // layoutClassName: "seeks-layout-center",
      // defaultJunctionPoint: "border",
      // defaultNodeShape: 0,
      // defaultLineShape: 1,
      from: "left",
      // max_per_width: "300",
      // min_per_height: 35,
      max_per_width: 'auto',
    }
  ],
  defaultLineMarker: {
    markerWidth: 12,
    markerHeight: 12,
    refX: 6,
    refY: 6,
    data: "M2,2 L10,6 L2,10 L6,6 L2,2"
  },
  defaultNodeShape: 1,
  defaultNodeWidth: 150,
  // defaultNodeHeight: 35,
  defaultLineShape: 4,
  defaultJunctionPoint: "lr",
  defaultNodeBorderWidth: 2,
  defaultLineColor: "var(--color-primary-50)",
  defaultNodeColor: "var(--color-primary-50)",
  defaultNodeFontColor: 'var(--bg-white-100)',   // 默认文字颜色：深灰色
};

const props = defineProps({
  isVerticalChart: {
    type: Boolean,
    default: false
  },
  graphData: {
    type: Object,
    default: {
      rootId: "a",
      nodes: [
        { id: "a", text: "a" },
        { id: "b", text: "b" },
        { id: "b1", text: "b1" },
        { id: "b1-1", text: "b1-1" },
        { id: "b1-2", text: "b1-2" },
        { id: "b1-3", text: "b1-3" },
        { id: "b1-4", text: "b1-4" },
        { id: "b1-5", text: "b1-5" },
        { id: "b1-6", text: "b1-6" },
        { id: "b2", text: "b2" },
        { id: "b2-1", text: "b2-1" },
        { id: "b2-2", text: "b2-2" },
        { id: "b2-3", text: "b2-3" },
        { id: "b2-4", text: "b2-4" },
        { id: "b3", text: "b3" },
        { id: "b3-1", text: "b3-1" },
        { id: "b3-2", text: "b3-2" },
        { id: "b3-3", text: "b3-3" },
        { id: "b3-4", text: "b3-4" },
        { id: "b3-5", text: "b3-5" },
        { id: "b3-6", text: "b3-6" },
        { id: "b3-7", text: "b3-7" },
        { id: "b4", text: "b4" },
        { id: "b4-1", text: "b4-1" },
        { id: "b4-2", text: "b4-2" },
        { id: "b4-3", text: "b4-3" },
        { id: "b4-4", text: "b4-4" },
        { id: "b4-5", text: "b4-5" },
        { id: "b4-6", text: "b4-6" },
        { id: "b4-7", text: "b4-7" },
        { id: "b4-8", text: "b4-8" },
        { id: "b4-9", text: "b4-9" },
        { id: "b5", text: "b5" },
        { id: "b5-1", text: "b5-1" },
        { id: "b5-2", text: "b5-2" },
        { id: "b5-3", text: "b5-3" },
        { id: "b5-4", text: "b5-4" },
        { id: "b6", text: "b6" },
        { id: "b6-1", text: "b6-1" },
        { id: "b6-2", text: "b6-2" },
        { id: "b6-3", text: "b6-3" },
        { id: "b6-4", text: "b6-4" },
        { id: "b6-5", text: "b6-5" },
        { id: "c", text: "c" },
        { id: "c1", text: "c1" },
        { id: "c1-1", text: "c1-1" },
        { id: "c1-2", text: "c1-2" },
        { id: "c1-3", text: "c1-3" },
        { id: "c1-4", text: "c1-4" },
        { id: "c1-5", text: "c1-5" },
        { id: "c1-6", text: "c1-6" },
        { id: "c1-7", text: "c1-7" },
        { id: "c2", text: "c2" },
        { id: "c2-1", text: "c2-1" },
        { id: "c2-2", text: "c2-2" },
        { id: "c3", text: "c3" },
        { id: "c3-1", text: "c3-1" },
        { id: "c3-2", text: "c3-2" },
        { id: "c3-3", text: "c3-3" },
        { id: "d", text: "d" },
        { id: "d1", text: "d1" },
        { id: "d1-1", text: "d1-1" },
        { id: "d1-2", text: "d1-2" },
        { id: "d1-3", text: "d1-3" },
        { id: "d1-4", text: "d1-4" },
        { id: "d1-5", text: "d1-5" },
        { id: "d1-6", text: "d1-6" },
        { id: "d1-7", text: "d1-7" },
        { id: "d1-8", text: "d1-8" },
        { id: "d2", text: "d2" },
        { id: "d2-1", text: "d2-1" },
        { id: "d2-2", text: "d2-2" },
        { id: "d3", text: "d3" },
        { id: "d3-1", text: "d3-1" },
        { id: "d3-2", text: "d3-2" },
        { id: "d3-3", text: "d3-3" },
        { id: "d3-4", text: "d3-4" },
        { id: "d3-5", text: "d3-5" },
        { id: "d4", text: "d4" },
        { id: "d4-1", text: "d4-1" },
        { id: "d4-2", text: "d4-2" },
        { id: "d4-3", text: "d4-3" },
        { id: "d4-4", text: "d4-4" },
        { id: "d4-5", text: "d4-5" },
        { id: "d4-6", text: "d4-6" },
        { id: "e", text: "e" },
        { id: "e1", text: "e1" },
        { id: "e1-1", text: "e1-1" },
        { id: "e1-2", text: "e1-2" },
        { id: "e1-3", text: "e1-3" },
        { id: "e1-4", text: "e1-4" },
        { id: "e1-5", text: "e1-5" },
        { id: "e1-6", text: "e1-6" },
        { id: "e2", text: "e2" },
        { id: "e2-1", text: "e2-1" },
        { id: "e2-2", text: "e2-2" },
        { id: "e2-3", text: "e2-3" },
        { id: "e2-4", text: "e2-4" },
        { id: "e2-5", text: "e2-5" },
        { id: "e2-6", text: "e2-6" },
        { id: "e2-7", text: "e2-7" },
        { id: "e2-8", text: "e2-8" },
        { id: "e2-9", text: "e2-9" }
      ],
      lines: [
        { from: "a", to: "b" },
        { from: "b", to: "b1" },
        { from: "b1", to: "b1-1" },
        { from: "b1", to: "b1-2" },
        { from: "b1", to: "b1-3" },
        { from: "b1", to: "b1-4" },
        { from: "b1", to: "b1-5" },
        { from: "b1", to: "b1-6" },
        { from: "b", to: "b2" },
        { from: "b2", to: "b2-1" },
        { from: "b2", to: "b2-2" },
        { from: "b2", to: "b2-3" },
        { from: "b2", to: "b2-4" },
        { from: "b", to: "b3" },
        { from: "b3", to: "b3-1" },
        { from: "b3", to: "b3-2" },
        { from: "b3", to: "b3-3" },
        { from: "b3", to: "b3-4" },
        { from: "b3", to: "b3-5" },
        { from: "b3", to: "b3-6" },
        { from: "b3", to: "b3-7" },
        { from: "b", to: "b4" },
        { from: "b4", to: "b4-1" },
        { from: "b4", to: "b4-2" },
        { from: "b4", to: "b4-3" },
        { from: "b4", to: "b4-4" },
        { from: "b4", to: "b4-5" },
        { from: "b4", to: "b4-6" },
        { from: "b4", to: "b4-7" },
        { from: "b4", to: "b4-8" },
        { from: "b4", to: "b4-9" },
        { from: "b", to: "b5" },
        { from: "b5", to: "b5-1" },
        { from: "b5", to: "b5-2" },
        { from: "b5", to: "b5-3" },
        { from: "b5", to: "b5-4" },
        { from: "b", to: "b6" },
        { from: "b6", to: "b6-1" },
        { from: "b6", to: "b6-2" },
        { from: "b6", to: "b6-3" },
        { from: "b6", to: "b6-4" },
        { from: "b6", to: "b6-5" },
        { from: "a", to: "c" },
        { from: "c", to: "c1" },
        { from: "c1", to: "c1-1" },
        { from: "c1", to: "c1-2" },
        { from: "c1", to: "c1-3" },
        { from: "c1", to: "c1-4" },
        { from: "c1", to: "c1-5" },
        { from: "c1", to: "c1-6" },
        { from: "c1", to: "c1-7" },
        { from: "c", to: "c2" },
        { from: "c2", to: "c2-1" },
        { from: "c2", to: "c2-2" },
        { from: "c", to: "c3" },
        { from: "c3", to: "c3-1" },
        { from: "c3", to: "c3-2" },
        { from: "c3", to: "c3-3" },
        { from: "a", to: "d" },
        { from: "d", to: "d1" },
        { from: "d1", to: "d1-1" },
        { from: "d1", to: "d1-2" },
        { from: "d1", to: "d1-3" },
        { from: "d1", to: "d1-4" },
        { from: "d1", to: "d1-5" },
        { from: "d1", to: "d1-6" },
        { from: "d1", to: "d1-7" },
        { from: "d1", to: "d1-8" },
        { from: "d", to: "d2" },
        { from: "d2", to: "d2-1" },
        { from: "d2", to: "d2-2" },
        { from: "d", to: "d3" },
        { from: "d3", to: "d3-1" },
        { from: "d3", to: "d3-2" },
        { from: "d3", to: "d3-3" },
        { from: "d3", to: "d3-4" },
        { from: "d3", to: "d3-5" },
        { from: "d", to: "d4" },
        { from: "d4", to: "d4-1" },
        { from: "d4", to: "d4-2" },
        { from: "d4", to: "d4-3" },
        { from: "d4", to: "d4-4" },
        { from: "d4", to: "d4-5" },
        { from: "d4", to: "d4-6" },
        { from: "a", to: "e" },
        { from: "e", to: "e1" },
        { from: "e1", to: "e1-1" },
        { from: "e1", to: "e1-2" },
        { from: "e1", to: "e1-3" },
        { from: "e1", to: "e1-4" },
        { from: "e1", to: "e1-5" },
        { from: "e1", to: "e1-6" },
        { from: "e", to: "e2" },
        { from: "e2", to: "e2-1" },
        { from: "e2", to: "e2-2" },
        { from: "e2", to: "e2-3" },
        { from: "e2", to: "e2-4" },
        { from: "e2", to: "e2-5" },
        { from: "e2", to: "e2-6" },
        { from: "e2", to: "e2-7" },
        { from: "e2", to: "e2-8" },
        { from: "e2", to: "e2-9" }
      ]
    }
  }
});

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


const showHTree = async () => {
  const __graph_json_data = props.graphData;

  const graphInstance = graphRef.value?.getInstance();
  if (graphInstance) {
    await graphInstance.setOptions(graphOptionsH);
    await graphInstance.setJsonData(__graph_json_data);
    await graphInstance.moveToCenter();
    // await graphInstance.zoomToFit();
    await graphInstance.setZoom(35);
  }
};

const showVTree = async () => {
  const __graph_json_data = props.graphData;

  const graphInstance = graphRef.value?.getInstance();
  if (graphInstance) {
    await graphInstance.setOptions(graphOptionsV);
    await graphInstance.setJsonData(__graph_json_data);
    await graphInstance.moveToCenter();
    await graphInstance.zoomToFit();
  }
};

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

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

watch(
  () => props.isVerticalChart,
  val => {
    if (val) {
      showVTree();
    } else {
      showHTree();
    }
  }
);

onMounted(() => {
  if (props.isVerticalChart) {
    showVTree();
  } else {
    showHTree();
  }
});
</script>

<style lang="scss" scoped>
:deep(.relation-graph) {
  .c-node-text {
    padding: 0px;
    place-items: center;
    justify-content: center;
  }
}

.c-my-panel {
  width: 350px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 10px;
  z-index: 800;
  padding: 10px;
  background-color: rgba(239, 239, 239, 0.86);
  border: #eeeeee solid 1px;
  overflow: hidden;

  .c-option-name {
    color: #666666;
    font-size: 14px;
    line-height: 40px;
  }
}

.custom-node {
  // width: 100%;
  // height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
