<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>
      </el-tab-pane>
      <el-tab-pane label="表单组件" name="3">
        <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-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>
    </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>
    {{ 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 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_500c79d5_2a5a_4369_a37f_98a90f792547',
    'type': 'time',
    'dimensions': { 'width': 100, 'height': 100 },
    'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
    'handleBounds': {
      'source': [{
        'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
        'type': 'source',
        'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
        'position': 'right',
        'x': 97.00007501159526,
        'y': 47.00005927633669,
        'width': 6,
        'height': 6
      }],
      'target': [{
        'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
        'type': 'target',
        'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
        'position': 'left',
        'x': -2.9999932235447186,
        'y': 47.00005927633669,
        'width': 6,
        'height': 6
      }]
    },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
    'data': {
      'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
      'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
      'outputData': {}
    },
    'events': {},
    'name': 'time'
  },
  {
    'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
    'type': 'data',
    'dimensions': { 'width': 200, 'height': 50 },
    'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
    'handleBounds': {
      'source': [{
        'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
        'type': 'source',
        'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
        'position': 'right',
        'x': 197.00014324673523,
        'y': 22.000023835240277,
        'width': 6,
        'height': 6
      }],
      'target': [{
        'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
        'type': 'target',
        'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
        'position': 'left',
        'x': -2.9999932235447186,
        'y': 22.000023835240277,
        'width': 6,
        'height': 6
      }]
    },
    'selected': false,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
    'data': {
      'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
      '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]
      }
    },
    'events': {},
    'name': 'data'
  },
  {
    'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
    'type': 'line',
    'dimensions': { 'width': 300, 'height': 150 },
    'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
    'handleBounds': {
      'source': null,
      'target': [{
        'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
        'type': 'target',
        'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
        'position': 'left',
        'x': -2.9999932235447186,
        'y': 72.00005795281027,
        'width': 6,
        'height': 6
      }]
    },
    'selected': true,
    'dragging': false,
    'resizing': false,
    'initialized': false,
    'isParent': false,
    'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
    'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
    'events': {},
    'name': 'line'
  }
]);
const edges = ref([
  {
    'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547---data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
    'type': 'bezier',
    'source': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
    'target': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
    'sourceHandle': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
    'data': {},
    'events': {},
    'label': '',
    'animated': true,
    'markerEnd': 'arrowclosed',
    'style': { 'stroke': '#409EFF' },
    'sourceNode': {
      'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
      'type': 'time',
      'dimensions': { 'width': 100, 'height': 100 },
      'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
          'type': 'source',
          'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
          'position': 'right',
          'x': 97.00007501159526,
          'y': 47.00005927633669,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
          'type': 'target',
          'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
          'position': 'left',
          'x': -2.9999932235447186,
          'y': 47.00005927633669,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
      'data': {
        'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
        'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
        'outputData': {}
      },
      'events': {},
      'name': 'time'
    },
    'targetNode': {
      'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
      'type': 'data',
      'dimensions': { 'width': 200, 'height': 50 },
      'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
          'type': 'source',
          'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
          'position': 'right',
          'x': 197.00014324673523,
          'y': 22.000023835240277,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
          'type': 'target',
          'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
          'position': 'left',
          'x': -2.9999932235447186,
          'y': 22.000023835240277,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
      'data': {
        'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
        '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]
        }
      },
      'events': {},
      'name': 'data'
    },
    'sourceX': 209.65092573994195,
    'sourceY': 89.36775361373512,
    'targetX': 465.3004654920516,
    'targetY': -226.0727972656771
  },
  {
    'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818---line_77194e11_6df2_4e80_b9d7_816dac933f62',
    'type': 'bezier',
    'source': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
    'target': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
    'sourceHandle': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
    'data': {},
    'events': {},
    'label': '',
    'animated': true,
    'markerEnd': 'arrowclosed',
    'style': { 'stroke': '#409EFF' },
    'sourceNode': {
      'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
      'type': 'data',
      'dimensions': { 'width': 200, 'height': 50 },
      'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
      'handleBounds': {
        'source': [{
          'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
          'type': 'source',
          'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
          'position': 'right',
          'x': 197.00014324673523,
          'y': 22.000023835240277,
          'width': 6,
          'height': 6
        }],
        'target': [{
          'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
          'type': 'target',
          'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
          'position': 'left',
          'x': -2.9999932235447186,
          'y': 22.000023835240277,
          'width': 6,
          'height': 6
        }]
      },
      'selected': false,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
      'data': {
        'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
        '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]
        }
      },
      'events': {},
      'name': 'data'
    },
    'targetNode': {
      'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
      'type': 'line',
      'dimensions': { 'width': 300, 'height': 150 },
      'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
      'handleBounds': {
        'source': null,
        'target': [{
          'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
          'type': 'target',
          'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
          'position': 'left',
          'x': -2.9999932235447186,
          'y': 72.00005795281027,
          'width': 6,
          'height': 6
        }]
      },
      'selected': true,
      'dragging': false,
      'resizing': false,
      'initialized': false,
      'isParent': false,
      'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
      'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
      'events': {},
      'name': 'line'
    },
    'sourceX': 671.3006019623316,
    'sourceY': -226.0727972656771,
    'targetX': 91.76924869599506,
    'targetY': 291.4175696300251
  }
]);
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)) {
      console.log('v.data.outputData', v.data.outputData);
      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>
