<template>
  <div class="graph-component">
    <img :src="title" alt="" class="title" />

    <CommunityNode
      v-if="curComponent == 'CommunityNode'"
      @click:node="handleClickNode"
      @click:edge="handleClickEdge"
    ></CommunityNode>
    <DetailNode
      v-else
      @click:goback="handleClickGoBack"
      :detailNode="curSelectedGroup"
    ></DetailNode>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue"
import CommunityNode from "./communityNode.vue"
import DetailNode from "./detailNode.vue"
import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
const socialGroupsStore = useSocialGroupsStore()
const curComponent = ref("CommunityNode")
const curSelectedGroup = ref(null)
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
})

const handleClickNode = async (nodeInfo) => {
  const data = await socialGroupsStore.initGraphCommunityDetailNode([nodeInfo.id])
  console.log(data);
  curSelectedGroup.value = data
  curComponent.value = "detailNode"
}

const handleClickEdge = async (edgeInfo) => {
  curComponent.value = "detailNode"
  const data = await socialGroupsStore.initGraphCommunityDetailNode([
    edgeInfo.source,
    edgeInfo.target
  ])
  curSelectedGroup.value = data
}

const handleClickGoBack = (currentComponentName) => {
  curComponent.value = currentComponentName
  console.log(currentComponentName)
}
</script>

<style scoped lang="less">
.graph-component {
  width: 100%;
  height: 100%;
  position: relative;
  .title {
    margin: 0 auto;
  }
  .graph-container {
    width: 100%;
    height: 93%;
  }
}
</style>
