<template>
  <VueFlow :nodes="nodes" :edges="edges" :default-viewport="{ zoom: 0.75, position: { x: 0, y: 0 } }" :min-zoom="0.2" :max-zoom="4" :default-edge-options="{ type: 'smoothstep' }" @connect="nodeConnect" @node-drag-stop="fnMoveNode" @edge-double-click="fnDeleteEdge" @node-double-click="fnViewDiagramData">
    <template #node-custom="node">
      <CustomNode :node="node" @openSetup="fnOpenSetupModal" @removeNode="fnDeleteNode" />
    </template>
    <MiniMap />
    <Controls />
    <Background pattern-color="#aaa" :gap="8" />
  </VueFlow>
  <!-- 노드 셋업 모달 -->
  <DatabaseConnection v-if="selectNode.node_type === 'DB_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" />
  <apiConnection v-if="selectNode.node_type === 'API_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" />
  <fileSelectDiagram v-if="selectNode.node_type === 'FILE_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :mode="'fileRead'" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" />
  <datasetSelecter v-if="selectNode.node_type === 'DATASET_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" />
  <DataFilter v-if="selectNode.node_type === 'DATA_FILTER'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" />
  <datasetUpdate v-if="selectNode.node_type === 'DATASET_UPDATE'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" />
  <EhojoConnection v-if="selectNode.node_type === 'EHOJO_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" />
</template>
<script>
import CustomNode from "./CustomNode.vue";
// vue-flow api (삭제시 동작 안함)
import { Background } from "@vue-flow/background";
import { Panel, VueFlow } from "@vue-flow/core";
import { MiniMap } from "@vue-flow/minimap";
import { Controls } from "@vue-flow/controls";
//
import DatabaseConnection from "../../component/connection/itm/databaseConnection.vue";
import apiConnection from "../../component/connection/itm/apiConnection.vue";
import datasetSelecter from "../../component/connection/itm/datasetSelecter.vue";
import datasetUpdate from "../../component/connection/itm/datasetUpdate.vue";
import fileSelectDiagram from "../../component/connection/itm/fileSelectDiagram.vue";
import DataFilter from "../../component/connection/itm/dataFilter.vue";
import EhojoConnection from "../../component/connection/EhojoConnection.vue";

export default {
  components: {
    CustomNode,
    // vue-flow api (삭제시 동작 안함)
    Background,
    Panel,
    VueFlow,
    MiniMap,
    Controls,
    //
    DatabaseConnection,
    apiConnection,
    datasetSelecter,
    datasetUpdate,
    fileSelectDiagram,
    DataFilter,
    EhojoConnection
  },
  props: {
    nodes: Array,
    edges: Array,
  },
  data() {
    return {
      // 다이어그램 로그 화면 여부(true:열림/false:닫힘)
      isLogListView: false,

      // 노드 추가
      isAddModalOpen: false, // 노드 추가 모달 열림 여부(true:열림/false:닫힘)
      originalNodeTypeList: [],
      nodeTypeList: [],
      selectItem: "DB_READ", // 노드 추가값 (기본:DB_READ)

      // 노드 수정
      isSetupModalOpen: false, // 노드 설정 모달 열림 여부(true:열림/false:닫힘)
      selectNode: {}, // 선택된 노드
    };
  },
  methods: {
    // 노드 위치 변경
    fnMoveNode(moveNode) {
      let nodeId = moveNode.node.id;
      for (let node of this.nodes) {
        if (node.id == nodeId) {
          node.position.x = moveNode.node.position.x;
          node.center_x = moveNode.node.position.x;
          node.position.y = moveNode.node.position.y;
          node.center_y = moveNode.node.position.y;
        }
      }
    },

    // 선을 연결하면 뜨는 이벤트
    nodeConnect(event) {
      let edge = {};
      edge.id = Date.now().toString();
      edge.edge_id = edge.id;
      edge.source = event.source; // 시작노드
      edge.target = event.target; // 끝 노드
      this.edges.push(edge);
    },

    // 엣지 삭제
    fnDeleteEdge(event) {
      let edgeId = event.edge.id;
      let edges = this.edges.filter((edge) => edge.id !== edgeId);
      this.$emit("changeDiagram", this.nodes, edges);
    },

    // 노드 설정 모달 열기
    fnOpenSetupModal(nodeId) {
      for (let node of this.nodes) {
        if (node.id == nodeId) {
          this.selectNode = node;
        }
      }
      this.isSetupModalOpen = true;
    },
    // 노드 설정 저장 후 닫기
    fnUpdateSetup(jobItem) {
      for (let node of this.nodes) {
        if (node.id == jobItem.id) {
          node = jobItem;
        }
      }
      this.fnCloseSetupModal();
    },
    // 노드 설정 모달 닫기
    fnCloseSetupModal() {
      this.selectNode = {}; // 초기화
      this.isSetupModalOpen = false;
    },

    // 노드 삭제
    fnDeleteNode(nodeId) {
      let nodes = this.nodes.filter((node) => node.id !== nodeId);
      let edges = this.edges.filter(
        (edge) => edge.source !== nodeId && edge.target !== nodeId
      );
      this.$emit("changeDiagram", nodes, edges);
    },
  },
};
</script>