<template>
	<div class="graph-chart-wrapper" id="graph"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watch } from "vue";
import setChart from "@/utils/setChart";
import getGraphChart from "./graphChart";

const emits = defineEmits(["handleClickNode"]);
const props = defineProps({
	nodes: {
		type: Array,
		default: []
	},
	links: {
		type: Array,
		default: []
	},
	layoutType: {
		type: String,
		default: "force"
	},
	width: {
		type: String,
		default: "force"
	},
	height: {
		type: String,
		default: "force"
	}
});

let chart = null;
onMounted(() => {
	const graph = getGraphChart(props.nodes, props.links, props.layoutType);
	chart = setChart(graph, "graph");
	chart.on("click", event => {
		emits("handleClickNode", event);
	});
});

onBeforeUnmount(() => {
	chart.off("click");
	chart.dispose();
});

watch(
	() => [props.nodes, props.links],
	() => {
		if (chart) {
			const graph = getGraphChart(props.nodes, props.links, props.layoutType);
			chart.setOption(graph, true);
		}
	},
	{ deep: true }
);
</script>

<style lang="scss" scoped>
.graph-chart-wrapper {
	width: 100%;
	height: 100%;
	// width: 800px;
	// height: 500px;
}
</style>
