<template>
    <div style="width: 100%; max-height: 600px; overflow: auto;padding-bottom: 10px;" class="content">
        <div style="height:600px;position: relative;">
            <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
                :on-line-click="onLineClick" />
        </div>
    </div>
</template>

<script>
import RelationGraph from 'relation-graph'

export default {
    props: ['Json'],
    components: {
        RelationGraph,
    },
    data() {
        return {
            graphOptions: {
                allowSwitchLineShape: true,
                zoomToFitWhenRefresh: true,
                moveToCenterWhenRefresh: true,
                // allowSwitchJunctionPoint: true,
                defaultJunctionPoint: 'border',
                // backgroundImage: "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png",
                backgroundImageNoRepeat: true,
                useAnimationWhenRefresh: true,
                defaultNodeBorderWidth: 5,
                defaultNodeColor: "#0C7FF6",
                defaultNodeBorderColor: "#0C7FF6",
                defaultLineShape: 5,
                hideNodeContentByZoom: true,
                layouts: [
                    {
                        label: "中心",
                        layoutName: "center",
                        centerOffset_x: 0,
                        centerOffset_y: 0,
                        distanceCoefficient: 1
                    }
                ]
            }
        }
    },
    mounted() {
        this.showSeeksGraph()
    },
    watch: {
        Json: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.Json = newValue
                this.showSeeksGraph()
            }
        }
    },
    methods: {
        showSeeksGraph() {
            const __graph_json_data = this.Json
            // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                // Called when the relation-graph is completed 
            })
        },
        onNodeClick(nodeObject, $event) {
            console.log('onNodeClick:', nodeObject)
        },
        onLineClick(lineObject, $event) {
            console.log('onLineClick:', lineObject)
        }
    }
}

</script>

<style>

</style>