<script setup lang="ts">
import {ref, onMounted, watch} from 'vue';

import type {Node, Edge} from '@vue-flow/core';
import {HJMethodName, HJNodeData} from './types/comTypes';
import DragData from "../src/leftDrags/test/dragData.vue"
import WorkFlowDrag from '../src/leftDrags/workflow/dragData.vue'
import Infomation from './information/index.vue'
import {CircleCloseFilled} from '@element-plus/icons-vue'

import {initialEdges, initialNodes} from './utils/index'

import HJFlow from './hjflow/index.vue'

defineOptions({
  name: 'JXQFlow'
})

const nodes = ref<HJNodeData[]>([]);
const edges = ref<Edge[]>([]);


onMounted(() => {
  // nodes.value = initialNodes;
  // edges.value = initialEdges;
});

watch(nodes, (newVal, oldVal) => {
  console.log('nodes change', newVal, oldVal);
});

watch(edges, (newVal, oldVal) => {
  console.log('edges change', newVal, oldVal);
});

// vue 的相关操作
const onNodeOperation = (name: HJMethodName, node: HJNodeData) : void => {
  console.log('onNodeOperation', name, node);
}

// ======= 信息展示 =======
const infoVisible = ref(false)
const doubleCNode = ref<HJNodeData | null>(null) //双击的节点数据
const closeInfo = () => {
  infoVisible.value = false
  doubleCNode.value = null
}
</script>

<template>

  <div v-if="nodes.length > 0"> {{ nodes[0]?.jsonData ?? "==" }}</div>
  <div class="dnd-flow out-box">
    <WorkFlowDrag></WorkFlowDrag>
    <HJFlow v-model:nodes-data="nodes" v-model:edges-data="edges" @hjMethod="onNodeOperation"></HJFlow>
    <!--    双击node节点展示的弹窗-->
    <el-drawer v-model="infoVisible" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false"
               :append-to-body="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">编辑信息</h4>
        <el-button type="danger" @click="closeInfo">
          <el-icon class="el-icon--left">
            <CircleCloseFilled/>
          </el-icon>
          Close
        </el-button>
      </template>

      <Infomation></Infomation>
    </el-drawer>
  </div>

</template>

<style scoped lang="less">

.out-box {
  width: 100%;
  height: 80vh;
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
}

.vue-flow-box {
  flex: 1;
  flex-shrink: 0;
  height: 100%;
  border: 3px solid red;
}
</style>

<!--<style>-->
<!--.vue-flow__node {-->
<!--  display: inline-block !important;-->
<!--}-->
<!--</style>-->
