<template>
  <div class="flow-editor">
    <div class="toolbar">
      <el-button-group>
        <el-button size="small" @click="downloadImage">导出图片</el-button>
        <el-button size="small" @click="saveData">保存数据</el-button>
        <el-button size="small" @click="clearGraph">清空画布</el-button>
        <el-button size="small" @click="undo">撤销</el-button>
        <el-button size="small" @click="redo">重做</el-button>
      </el-button-group>
    </div>
    <div class="bpmn-example-container">
      <div class="dnd-panel"></div>
      <div ref="logicContainer" class="viewport" />
    </div>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import { DndPanel, Control, Menu, SelectionSelect } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
/* import { StartNode, StartNodeModel } from "./nodes/StartNode";
import { EndNode, EndNodeModel } from "./nodes/EndNode"; */

export default {
  data() {
    return {
      lf: null,
      config: {
        stopScrollGraph: false,
        stopZoomGraph: false,
        metaKeyMultipleSelected: true,
        grid: {
          size: 10,
          type: "dot",
        },
        keyboard: {
          enabled: true,
        },
        snapline: true,
        background: {
          color: "#f7f9ff",
        },
        nodeTextEdit: true,
        edgeTextEdit: true,
        plugins: [DndPanel, Control, Menu, SelectionSelect]
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initLogicFlow();
      }, 500);
    });
  },
  methods: {
    initLogicFlow() {
      try {
        const container = this.$refs.logicContainer;
        if (!container) {
          throw new Error('找不到画布容器元素');
        }

        this.lf = new LogicFlow({
          container: container,
          ...this.config,
          pluginOptions: {
            dndPanel: {
              enable: true,
              container: '#dnd-panel'
            }
          }
        });
        console.log("flow",this.lf);
        this.registerNode();
        this.lf.render();
        this.initDndPanel();
        console.log('LogicFlow和插件初始化成功');
        
      } catch (error) {
        console.error('LogicFlow初始化失败:', error);
      }
    },
    
    initDndPanel() {
      try {
        if (!this.lf) {
          throw new Error('LogicFlow实例未创建');
        }
        console.log(this.lf);
        const dndPanel = this.lf.extension.dndPanel;
        if (!dndPanel) {
          throw new Error('DndPanel插件未正确加载');
        }

        dndPanel.setPatternItems([
          {
            label: '开始节点',
            type: 'start',
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVDhPY2AYNKCoqIgTiOcD8X8gBgFkOQZSDDwPxH+B+D8Qg8B9IP4MxLNhgkgG/gNiEAAZtBaI1wPxByA+DsT3gPgWEF8C4t1AbAnEbDADQRjEwQVABlEKQAY+ggpjA8+BeDkQGwGxGhA/hSrBBj4B8SwgVgViYySsjST3FYjPAjE/ELMiYTmomZ+A+AcQXwBiNiRsDjXzH9RQOAAZxoWEQeAzEP8G4mtAzIuEdaFmwg2kBEANfQPEF4GYDwmDXPsbauZqICbJUFIww+C2/QBif2ocCQBT+3tCYGwpmwAAAABJRU5ErkJggg==',
            properties: {}
          },
          {
            label: '结束节点',
            type: 'end',
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVDhPY2AYNKCoqIgTiOcD8X8gBgFkOQZSDDwPxH+B+D8Qg8B9IP4MxLNhgkgG/gNiEAAZtBaI1wPxByA+DsT3gPgWEF8C4t1AbAnEbDADQRjEwQVABlEKQAY+ggpjA8+BeDkQGwGxGhA/hSrBBj4B8SwgVgViYySsjST3FYjPAjE/ELMiYTmomZ+A+AcQXwBiNiRsDjXzH9RQOAAZxoWEQeAzEP8G4mtAzIuEdaFmwg2kBEANfQPEF4GYDwmDXPsbauZqICbJUFIww+C2/QBif2ocCQBT+3tCYGwpmwAAAABJRU5ErkJggg==',
            properties: {}
          },
          {
            label: '普通节点',
            type: 'rect',
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAsSURBVDhPY2AYBaOA5gDIpxN5/x/CwQKQJUYBPWLYqIGjBo4aOGrg4DUQAPo5DuFWOqnJAAAAAElFTkSuQmCC',
            properties: {}
          },
          {
            label: '判断节点',
            type: 'diamond',
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA7SURBVDhPY2AYBaOAKMDIyPgfi4QYEhsrIC6Q/v//j1UBshyyHF6ArIBxNFBHA3U0UEcDdTRQRwN1GAAAWsMsD2BZkH8AAAAASUVORK5CYII=',
            properties: {}
          }
        ]);

        console.log('DndPanel初始化成功');
        
      } catch (error) {
        console.error('DndPanel初始化失败:', error);
      }
    },
    registerNode() {
      try {
        if (!this.lf) {
          throw new Error('LogicFlow实例未创建');
        }

        const nodeTypes = [
          { type: 'start', view: StartNode, model: StartNodeModel },
          { type: 'end', view: EndNode, model: EndNodeModel }
        ];

        nodeTypes.forEach(({ type, view, model }) => {
          this.lf.register({
            type,
            view,
            model
          });
        });

        console.log('节点注册成功');
        
      } catch (error) {
        console.error('节点注册失败:', error);
      }
    },
    downloadImage() {
      this.lf.getSnapshot();
    },
    saveData() {
      const data = this.lf.getGraphData();
      console.log("流程数据", data);
    },
    clearGraph() {
      this.lf.clearData();
    },
    undo() {
      this.lf.undo();
    },
    redo() {
      this.lf.redo();
    },
  },
  beforeDestroy() {
    if (this.lf) {
      this.lf.dispose();
      this.lf = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.flow-editor {
  width: 100%;
  height: 100%;
}

.bpmn-example-container {
  height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  background: #fff;
  display: flex;
  
  .viewport {
    flex: 1;
    height: 100%;
  }

  .dnd-panel {
    width: 200px;
    height: 100%;
    border-right: 1px solid #e8e8e8;
    background: #f8f8f8;
    padding: 10px;
    box-sizing: border-box;
  }
}

.toolbar {
  padding: 8px;
  border-bottom: 1px solid #e8e8e8;
}

#dnd-panel {
  width: 200px;
  height: 100%;
  position: relative;
  background: #f8f8f8;
  border-right: 1px solid #e8e8e8;
  z-index: 999;
  overflow: visible;
}

:deep(.lf-dnd-panel) {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  
  .lf-dnd-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: move;
    
    &:hover {
      background: #e6f7ff;
      border-color: #1890ff;
    }
    
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }
}

.node-start,
.node-end,
.node-rect,
.node-diamond {
  cursor: move;
  
  &:hover {
    background: #e6f7ff;
  }
}
</style>