<template>
  <div class="leftPanel">
    <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
      <el-tab-pane label="图表组件" name="1">
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          折线
        </el-card>
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'customBoard')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          自定义图表1
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="数据源" name="2">
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          设备数据
        </el-card>
        <template v-for="i in customData">
          <el-card style="width: 80px" shadow="never" :draggable="true"
                   @dragstart="onDragStart($event, 'customData',i)"
                   :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                   :body-style="{padding:'4px 0'}">
            <template #header>
              <StarFilled />
            </template>
            {{ i.name }}
          </el-card>
        </template>
      </el-tab-pane>
      <el-tab-pane label="表单组件" name="3">
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          映射
        </el-card>
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          输入框
        </el-card>
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          时间
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="content" @drop="onDrop">
    <VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
             default-marker-color="#409EFF"
             @connect="logEvent('connect', $event)"
             @node-click="logEvent('click', $event)"
             @node-contextMenu="logEvent('contextmenu', $event)"
             @dragover="onDragOver"
    >
      <Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />

      <template #node-area="areaNodeProps">
        <AreaNode v-bind="areaNodeProps"></AreaNode>
      </template>
      <template #node-customBoard="customBoardNodeProps">
        <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
                         @resize="resize"></CustomBoardNode>
      </template>
      <template #node-customData="customDataNodeProps">
        <CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
                        @resize="resize"></CustomDataNode>
      </template>
      <template #node-line="lineNodeProps">
        <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
                  @resize="resize"></LineNode>
      </template>
      <template #node-data="dataNodeProps">
        <DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
                  @resize="resize"></DataNode>
      </template>
      <template #node-inputNode="inputNodeProps">
        <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
                   @resize="resize"></InputNode>
      </template>
      <template #node-time="timeNodeProps">
        <TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
                  @resize="resize"></TimeNode>
      </template>
      <template #node-map="mapNodeProps">
        <MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
                 @resize="resize"></MapNode>
      </template>
    </VueFlow>
  </div>
  <div class="rightPanel">
    <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm">
      <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
        <el-input v-model="nodeAttrForm.field" />
      </el-form-item>
      <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
        <el-input v-model="nodeAttrForm.startTimeId" />
      </el-form-item>
      <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
        <el-input v-model="nodeAttrForm.endTimeId" />
      </el-form-item>
      <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
        <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
          <el-table-column label="源字段" min-width="120">
            <template #default="scope">
              <el-input v-model="scope.row.source" style="width: 100%" />
            </template>
          </el-table-column>
          <el-table-column label="映射字段" min-width="120">
            <template #default="scope">
              <el-input v-model="scope.row.target" style="width: 100%" />
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
          添加映射
        </el-button>
      </el-form-item>
    </el-form>
    {{ nodes }}
    <br />
    ---
    <br />
    {{ edges }}
  </div>
</template>
<script setup lang="ts">
import { v4 as uuidv4 } from 'uuid';
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { StarFilled } from '@element-plus/icons-vue';
import LineNode from './nodes/board/lineNode.vue';
import CustomBoardNode from './nodes/board/customBoardNode.vue';
import DataNode from './nodes/data/dataNode.vue';
import CustomDataNode from './nodes/data/customDataNode.vue';
import MapNode from './nodes/form/mapNode.vue';
import InputNode from './nodes/form/inputNode.vue';
import TimeNode from './nodes/form/timeNode.vue';
import AreaNode from './nodes/other/areaNode.vue';
import tool from './tool';

// 获取tool文件提供的方法
const { onDragStart, onDrop, onDragOver } = tool();


// flow内置方法
const {
  addEdges
} = useVueFlow();

const leftPanelState = ref('1');
const areaId = `area_${uuidv4().replaceAll('-', '_')}`;
// const nodes = ref([{
//   id: areaId,
//   name: 'area',
//   type: 'area',
//   position: {
//     x: 0,
//     y: 0
//   },
//   data: { label: areaId }
// }]);
// const edges = ref([]);
const nodes = ref([
  {
    'id': 'area_474cfc79_4011_495e_9fb3_5e268ad09cfe',
    'type': 'area',
    'dimensions': { 'width': 1910, 'height': 970 },
    'computedPosition': { 'x': 0, 'y': 0, 'z': 0 },
    'handleBounds': { 'source': null, 'target': null },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 0, 'y': 0 },
    'data': { 'label': 'area_474cfc79_4011_495e_9fb3_5e268ad09cfe' },
    'events': {},
    'name': 'area'
  }, {
    'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
    'type': 'time',
    'dimensions': { 'width': 100, 'height': 100 },
    'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
    'handleBounds': {
      'source': [{
        'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
        'type': 'source',
        'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
        'position': 'right',
        'x': 97,
        'y': 47,
        'width': 6,
        'height': 6
      }],
      'target': [{
        'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
        'type': 'target',
        'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
        'position': 'left',
        'x': -3,
        'y': 47,
        'width': 6,
        'height': 6
      }]
    },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
    'data': {
      'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
      'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
      'outputData': {}
    },
    'events': {},
    'name': 'time'
  }, {
    'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
    'type': 'customData',
    'dimensions': { 'width': 100, 'height': 100 },
    'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
    'handleBounds': {
      'source': [{
        'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
        'type': 'source',
        'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
        'position': 'right',
        'x': 97,
        'y': 47,
        'width': 6,
        'height': 6
      }],
      'target': [{
        'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
        'type': 'target',
        'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
        'position': 'left',
        'x': -3,
        'y': 47,
        'width': 6,
        'height': 6
      }]
    },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
    'data': {
      'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
      'options': {},
      'outputData': {
        'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
        'value': [20, 30, 40]
      },
      'customData': {
        'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
        'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
          'name': 'value',
          'remark': '值',
          'tier': 'data,map%value'
        }],
        'name': '测试2',
        'url': 'http://localhost:3000/test/getDevice',
        'method': 'post'
      }
    },
    'events': {},
    'name': 'customData'
  }, {
    'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
    'type': 'map',
    'dimensions': { 'width': 100, 'height': 30 },
    'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
    'handleBounds': {
      'source': [{
        'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
        'type': 'source',
        'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
        'position': 'right',
        'x': 97,
        'y': 12,
        'width': 6,
        'height': 6
      }],
      'target': [{
        'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
        'type': 'target',
        'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
        'position': 'left',
        'x': -3,
        'y': 12,
        'width': 6,
        'height': 6
      }]
    },
    'selected': true,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
    'data': {
      'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
      'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
      'outputData': {
        'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
        'value': [20, 30, 40]
      }
    },
    'events': {},
    'name': 'map'
  }, {
    'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
    'type': 'line',
    'dimensions': { 'width': 300, 'height': 150 },
    'computedPosition': { 'x': 144.31114508758668, 'y': 202.1298087493107, 'z': 0 },
    'handleBounds': {
      'source': null,
      'target': [{
        'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772.-t',
        'type': 'target',
        'nodeId': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
        'position': 'left',
        'x': -3,
        'y': 71.99951171875,
        'width': 6,
        'height': 6
      }]
    },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 144.31114508758668, 'y': 202.1298087493107 },
    'data': { 'label': 'line_650b8add_cbce_402a_a8e5_2c5769526772', 'options': {}, 'outputData': {} },
    'events': {},
    'name': 'line'
  }]);
const edges = ref([
  {
    'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b---customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
    'type': 'bezier',
    'source': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
    'target': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
    'sourceHandle': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
    'data': {},
    'events': {},
    'label': '',
    'animated': true,
    'markerEnd': 'arrowclosed',
    'style': { 'stroke': '#409EFF' },
    'sourceNode': {
      'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
      'type': 'time',
      'dimensions': { 'width': 100, 'height': 100 },
      'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
          'type': 'source',
          'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
          'position': 'right',
          'x': 97,
          'y': 47,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
          'type': 'target',
          'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
          'position': 'left',
          'x': -3,
          'y': 47,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
      'data': {
        'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
        'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
        'outputData': {}
      },
      'events': {},
      'name': 'time'
    },
    'targetNode': {
      'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
      'type': 'customData',
      'dimensions': { 'width': 100, 'height': 100 },
      'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
          'type': 'source',
          'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
          'position': 'right',
          'x': 97,
          'y': 47,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
          'type': 'target',
          'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
          'position': 'left',
          'x': -3,
          'y': 47,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
      'data': {
        'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
        'options': {},
        'outputData': {
          'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
          'value': [20, 30, 40]
        },
        'customData': {
          'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
          'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
            'name': 'value',
            'remark': '值',
            'tier': 'data,map%value'
          }],
          'name': '测试2',
          'url': 'http://localhost:3000/test/getDevice',
          'method': 'post'
        }
      },
      'events': {},
      'name': 'customData'
    },
    'sourceX': 133.66721629102227,
    'sourceY': 71.42467239549998,
    'targetX': 199.86901500385937,
    'targetY': -115.53728049272314
  }, {
    'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699---map_54688bd0_db73_4f96_be55_c72beb0b33d3',
    'type': 'bezier',
    'source': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
    'target': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
    'sourceHandle': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
    'data': {},
    'events': {},
    'label': '',
    'animated': true,
    'markerEnd': 'arrowclosed',
    'style': { 'stroke': '#409EFF' },
    'sourceNode': {
      'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
      'type': 'customData',
      'dimensions': { 'width': 100, 'height': 100 },
      'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
          'type': 'source',
          'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
          'position': 'right',
          'x': 97,
          'y': 47,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
          'type': 'target',
          'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
          'position': 'left',
          'x': -3,
          'y': 47,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
      'data': {
        'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
        'options': {},
        'outputData': {
          'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
          'value': [20, 30, 40]
        },
        'customData': {
          'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
          'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
            'name': 'value',
            'remark': '值',
            'tier': 'data,map%value'
          }],
          'name': '测试2',
          'url': 'http://localhost:3000/test/getDevice',
          'method': 'post'
        }
      },
      'events': {},
      'name': 'customData'
    },
    'targetNode': {
      'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
      'type': 'map',
      'dimensions': { 'width': 100, 'height': 30 },
      'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
      'handleBounds': {
        'source': [{
          'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
          'type': 'source',
          'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
          'position': 'right',
          'x': 97,
          'y': 12,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
          'type': 'target',
          'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
          'position': 'left',
          'x': -3,
          'y': 12,
          'width': 6,
          'height': 6
        }]
      },
      'selected': true,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
      'data': {
        'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
        'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
        'outputData': {
          'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
          'value': [20, 30, 40]
        }
      },
      'events': {},
      'name': 'map'
    },
    'sourceX': 305.8690150038594,
    'sourceY': -115.53728049272314,
    'targetX': 381.9109165002872,
    'targetY': -73.45647535459605
  }, {
    'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3---line_650b8add_cbce_402a_a8e5_2c5769526772',
    'type': 'bezier',
    'source': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
    'target': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
    'sourceHandle': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
    'data': {},
    'events': {},
    'label': '',
    'animated': true,
    'markerEnd': 'arrowclosed',
    'style': { 'stroke': '#409EFF' },
    'sourceNode': {
      'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
      'type': 'map',
      'dimensions': { 'width': 100, 'height': 30 },
      'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
      'handleBounds': {
        'source': [{
          'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
          'type': 'source',
          'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
          'position': 'right',
          'x': 97,
          'y': 12,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
          'type': 'target',
          'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
          'position': 'left',
          'x': -3,
          'y': 12,
          'width': 6,
          'height': 6
        }]
      },
      'selected': true,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
      'data': {
        'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
        'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
        'outputData': {
          'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
          'value': [20, 30, 40]
        }
      },
      'events': {},
      'name': 'map'
    },
    'targetNode': {
      'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
      'type': 'line',
      'dimensions': { 'width': 300, 'height': 150 },
      'computedPosition': { 'x': 144.31114508758668, 'y': 202.1298087493107, 'z': 0 },
      'handleBounds': {
        'source': null,
        'target': [{
          'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772.-t',
          'type': 'target',
          'nodeId': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
          'position': 'left',
          'x': -3,
          'y': 71.99951171875,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 144.31114508758668, 'y': 202.1298087493107 },
      'data': { 'label': 'line_650b8add_cbce_402a_a8e5_2c5769526772', 'options': {}, 'outputData': {} },
      'events': {},
      'name': 'line'
    },
    'sourceX': 487.9109165002872,
    'sourceY': -73.45647535459605,
    'targetX': 141.31114508758668,
    'targetY': 277.1293204680607
  }]);
const customData = ref([]);
onMounted(() => {
  customData.value = JSON.parse(localStorage.getItem('DATANODE') || '[]');
});
const nodeAttrForm = ref({});
const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'connect':
      console.log('connect');
      if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
        addEdges({
          id: `${event.source}---${event.target}`,
          source: event.source,
          target: event.target,
          type: 'bezier',
          animated: true,
          markerEnd: MarkerType.ArrowClosed,
          sourceHandle: event.sourceHandle,
          style: { stroke: '#409EFF' }
        });
      }
      break;
    case 'click':
      console.log('click', event);
      nodeAttrForm.value = event.node.data.options;
      break;
    case 'contextmenu':
      console.log('contextmenu', event);
  }
};
const resize = (e, id) => {
  nodes.value.forEach((item) => {
    if (item.selected && item.id !== id) {
      item.dimensions = {
        width: e.params.width,
        height: e.params.height
      };
    }
  });
};
const getInputData = (e) => {
  let outputData = {};
  let nodeIds = edges.value.map(v => {
    if (v.target === e) {
      return v.source;
    }
  });
  nodes.value.forEach(v => {
    if (nodeIds.includes(v.id)) {
      outputData = {
        ...outputData,
        ...v.data.outputData
      };
    }
  });
  return outputData;
};
</script>
<style lang="less" scoped>
:deep(.vue-flow__node-area) {
  z-index: 0 !important;
  pointer-events: none !important;
}

.leftPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  border-right: 1px solid #409EFF;
}

.content {
  position: absolute;
  top: 0;
  left: 320px;
  width: calc(100% - 320px - 320px);
  height: 100%;
}

.rightPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  border-left: 1px solid #409EFF;
}
</style>
