<template>
  <div id="vue-g6-editor">
    <el-row>
      <el-col :span="24">
        <!-- <header>vue-g6-editor</header> -->
      </el-col>
    </el-row>
    <!-- 工具栏 -->
    <el-row>
      <el-col :span="24">
        <div id="toolbar">
          <!-- <font-awesome-icon icon="fa fa-history" />
          <font-awesome-icon icon="heart" />
          <font-awesome-icon icon="clock" />
          <font-awesome-icon icon="clock" style="color: #476151" />
          <i
            class="el-icon-edit"
            data-command="save"
            title="保存"
            @click="submitForm"
            >保存</i
          > -->
          <!-- <font-awesome-icon icon="heart" /> -->
          <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
          <font-awesome-icon
            data-command="save"
            class="command fa fa-floppy-o"
            icon="command far far fa-copy"
            title="保存"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-reply-all"
            title="历史数据"
            @click="readHistoryData"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            class="fa fa-hdd-o"
            icon="fas fa-file"
            title="上传数据"
            @click="readUploadData"
          ></font-awesome-icon>
          <font-awesome-icon
            icon="fas fa-download"
            style="margin-left: 10px"
            title="另存为文件"
            @click="saveAsFile"
            >文件</font-awesome-icon
          >
          <!-- <FontAwesomeIcon icon="fas fa-image" /> -->

          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-image"
            title="另存为图片"
            @click="openSaveAsImageDialog"
          ></font-awesome-icon>

          <font-awesome-icon
            style="margin-left: 10px"
            data-command="undo"
            icon="fas fa-undo"
            class="command fa fa-undo"
            title="撤销"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="redo"
            class="command fa fa-repeat"
            icon="fas fa-repeat"
            title="重做"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="delete"
            class="command fa fa-trash-o"
            icon="fas fa-trash-alt"
            title="删除"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="zoomOut"
            class="command fa fa-search-minus"
            icon="fas fa-search-minus"
            title="缩小"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="zoomIn"
            icon="fas fa-search-plus"
            class="command fa fa-search-plus"
            title="放大"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-eraser"
            data-command="clear"
            class="command fa fa-eraser"
            title="清除画布"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-arrow-up"
            data-command="toFront"
            class="command fa fa-arrow-up"
            title="提升层级"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-arrow-down"
            data-command="toBack"
            class="command fa fa-arrow-down"
            title="下降层级"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-check-square"
            data-command="selectAll"
            class="command fa fa-check-square-o"
            title="全选"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="far fa-copy"
            data-command="copy"
            class="command fa fa-files-o"
            title="复制"
          ></font-awesome-icon>

          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-clone"
            data-command="paste"
            class="command fa fa-clipboard"
            title="粘贴"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-expand"
            data-command="autoZoom"
            class="command fa fa-expand"
            title="实际大小"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-compress"
            data-command="resetZoom"
            class="command fa fa-compress"
            title="适应页面"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-object-group"
            data-command="addGroup"
            class="command fa fa-object-group"
            title="组合"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-object-ungroup"
            data-command="unGroup"
            class="command fa fa-object-ungroup"
            title="取消组合"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-crop"
            data-command="multiSelect"
            class="command fa fa fa-crop"
            title="多选"
          ></font-awesome-icon>
        </div>
      </el-col>
    </el-row>
    <!-- 元素面板 + 画布 + 属性栏 -->
    <el-row>
      <!-- 元素面板 -->
      <el-col :span="2">
        <div id="itempannel">
          <!-- 开始节点 -->
          <div
            id="startNode"
            class="getItem"
            data-type="node"
            data-shape="flow-circle"
            data-size="72*72"
            data-label="开始节点"
            data-color="#FA8C16"
            data-nodeType="startNode"
          >
            <img draggable="false" :src="startNodeSVGUrl" alt srcset />
          </div>
          <!-- 常规节点 -->
          <div
            id="regularNode"
            class="getItem"
            data-type="node"
            data-size="100*50"
            data-label="常规节点"
            data-color="#1890ff"
          >
            <img draggable="false" :src="regularNodeSVGUrl" alt srcset />
          </div>

          <!-- 条件节点 -->
          <div
            id="judgeNode"
            class="getItem"
            data-type="node"
            data-shape="flow-rhombus"
            data-size="80*80"
            data-label="条件节点"
            data-color="#13C2C2"
          >
            <img draggable="false" :src="conditionNodeSVGUrl" />
          </div>
          <!-- 自定义节点 -->
          <div
            class="getItem"
            data-type="node"
            data-shape="customNode"
            data-size="80*48"
            data-labeltitle=""
            data-labelconcent=""
            data-color="#722ED1"
          >
            <img draggable="false" :src="nNodeSVGUrl" />
          </div>

          <!-- 结束节点 -->
          <div
            id="endNode"
            class="getItem"
            data-type="node"
            data-shape="flow-circle"
            data-size="80*80"
            data-label="结束节点"
            data-color="#FA8C16"
            data-nodeType="endNode"
          >
            <img draggable="false" :src="endNodeSVGUrl" />
          </div>
        </div>
      </el-col>
      <!-- 画布 -->
      <el-col :span="18">
        <el-col :span="24">
          <div id="page"></div>
        </el-col>
      </el-col>
      <!-- 属性栏 -->
      <el-col :span="4">
        <section class="right-part">
          <div id="detailpannel">
            <!-- 节点属性栏 -->
            <div
              id="nodeAttributeBar"
              class="pannel"
              data-status="node-selected"
            >
              <div class="title">节点属性</div>
              <div class="main">
                <el-form
                  :model="nodeAttributeForm"
                  label-position="top"
                  label-width="80px"
                >
                  <el-form-item label="节点文本" v-if="type != 'customNode'">
                    <el-input
                      v-model="nodeAttributeForm.label"
                      @change="saveNodeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="标题" v-if="type == 'customNode'">
                    <el-input
                      class="bold-input"
                      v-model="nodeAttributeForm.labeltitle"
                      @change="saveNodeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="内容" v-if="type == 'customNode'">
                    <el-input
                      type="textarea"
                      v-model="nodeAttributeForm.labelconcent"
                      @change="saveNodeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="宽度">
                    <el-input
                      v-model="nodeAttributeForm.width"
                      @change="saveNodeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="高度">
                    <el-input
                      v-model="nodeAttributeForm.height"
                      @change="saveNodeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="颜色">
                    <el-color-picker
                      v-model="nodeAttributeForm.color"
                      @change="saveNodeAttribute"
                    ></el-color-picker>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <!-- 边属性栏 -->
            <div
              id="edgeAttributeBar"
              class="pannel"
              data-status="edge-selected"
            >
              <div class="title">边属性</div>
              <div class="main">
                <el-form
                  :model="edgeAttributeForm"
                  label-position="top"
                  label-width="80px"
                >
                  <el-form-item label="边文本">
                    <el-input
                      v-model="edgeAttributeForm.label"
                      @change="saveEdgeAttribute"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="关键字">
                    <el-input
                      type="textarea"
                      v-model="edgeAttributeForm.keyword"
                      @change="saveEdgeAttribute"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="边文本">
                    <el-select
                      v-model="edgeAttributeForm.shape"
                      @change="saveEdgeAttribute"
                    >
                      <el-option
                        label="流程图折线"
                        value="flow-polyline"
                      ></el-option>
                      <el-option
                        label="流程图圆⻆折线"
                        value="flow-polyline-round"
                      ></el-option>
                      <el-option
                        label="流程图曲线"
                        value="flow-smooth"
                      ></el-option>
                    </el-select>
                  </el-form-item> -->
                </el-form>
              </div>
            </div>
            <div
              id="groupAttributeBar"
              class="pannel"
              data-status="group-selected"
            >
              <div class="title">群组属性栏</div>
            </div>
            <div
              id="canvasAttributeBar"
              class="pannel"
              data-status="canvas-selected"
            >
              <div class="title">画布属性栏</div>
              <div class="main">
                <el-form label-width="80px" label-position="right">
                  <el-form-item label="网格对齐">
                    <el-checkbox
                      v-model="canvasAttributeForm.grid"
                      @change="toggleGridShowStatus"
                    ></el-checkbox>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div
              id="multiAttributeBar"
              class="pannel"
              data-status="multi-selected"
            >
              <div class="title">多选时属性栏</div>
            </div>
          </div>
          <!-- 缩略图 -->
          <div id="minimap">
            <div class="title">缩略图</div>
          </div>
        </section>
      </el-col>
    </el-row>
    <!-- 弹窗 -->
    <article>
      <!-- 下载图片 -->
      <section class="save-as-image-dialog">
        <el-dialog
          title="生成图片"
          :visible.sync="saveAsImageDialogVisible"
          width="360px"
        >
          <el-form label-width="100px" label-position="top">
            <el-form-item label="图片格式">
              <el-select v-model="saveAsImageFormat">
                <el-option label="jpg" value="jpg">
                  <span style="float: left">jpg</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    >白色背景</span
                  >
                </el-option>
                <!-- <el-option label="png" value="png">
                  <span style="float: left">png</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    >透明背景</span
                  >
                </el-option> -->
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="saveAsImageDialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="saveAsImage">确 定</el-button>
          </span>
        </el-dialog>
      </section>
    </article>
    <!-- 右键菜单 -->
    <section>
      <div id="contextmenu">
        <div data-status="node-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="edge-selected" class="menu">
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="group-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="unGroup" class="command">取消组合</el-button>
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="canvas-selected" class="menu">
          <el-button data-command="undo" class="command">撤销</el-button>
          <el-button data-command="redo" class="command disable"
            >重做</el-button
          >
        </div>
        <div data-status="multi-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="addGroup" class="command">组合</el-button>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import G6Editor from "@antv/g6-editor";
import mixin from "../mianview/mixin";
import { insertScriptEdgeNode, selectScriptEdgeNode, uploadScriptInfo, edit } from "@/api/system/preview";
import Cookies from 'js-cookie'
import { construct } from "netflix-conductor-json-tree/dist/index";

export default {
  name: "VueG6Editor",
  mixins: [mixin],
  data() {
    return {
      type: '',
      state: {
        edgeTextColor: '#000' // 默认为黑色
      },
      form: {
        scriptInfoId: null,
        flowScheme: null,
        nodes: [],
        edges: [],
      },
      // 节点属性表单
      nodeAttributeForm: {
        // title:"",
        // contont:"",
        labeltitle: "",
        label: "",
        labelconcent: "",
        width: "",
        height: ""
      },
      // 节点属性表单
      edgeAttributeForm: {
        keyword: '',
        label: ""
      },
      // 画布属性栏表单
      canvasAttributeForm: {
        grid: true,
        cell: 20
      },
      // SVG节点图片URL地址
      startNodeSVGUrl: require("../mianview/start-node.svg"),
      endNodeSVGUrl: require("../mianview/end-node.svg"),
      regularNodeSVGUrl: require("../mianview/regular-node.svg"),
      conditionNodeSVGUrl: require("../mianview/condition-node.svg"),
      nNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
      // modelNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
      // 编辑器
      editor: null,
      saveAsImageDialogVisible: false,
      saveAsImageFormat: "jpg"
    };
  },
  watch: {
    nodeAttributeForm: {
      handler(newVal, oldVal) {
        if (newVal.labeltitle || newVal.labelconcent) {
          this.$set(this.nodeAttributeForm, 'labelconcent', newVal.labelconcent)
          this.$set(this.nodeAttributeForm, 'labeltitle', newVal.labeltitle)
          this.nodeAttributeForm.label = newVal.labeltitle + '\n' + newVal.labelconcent;
        } else {
          this.nodeAttributeForm.label = newVal.label
        }
        // console.log('obj发生了变化', newVal, oldVal)
      },

      deep: true
    }
  },
  mounted() {
    this.initG6Editor();
    this.getlist()

    this.form.edges.forEach(e => {
      if (e.keyword) {
        // e.label=e.label
        e.label = {
          text: e.label,
          fill: 'red'
        }

      }

    })
    // this.editor.getCurrentPage().save()
    // this.editor.getCurrentPage().read(this.form);
  },
  created() {

  },

  methods: {
    getlist() {
      selectScriptEdgeNode(Cookies.get('id')).then(res => {
        this.form = JSON.parse(res.data.flowScheme)
        this.form = JSON.parse(res.data.flowScheme)
        console.log(this.form)
        this.form.nodes.forEach(e => {
          if (e.label) {
            if (e.label.split('\n').shift() && e.label.split('\n').slice(1).join('\n')) {
              //   e.labeltitle =  e.label .split('\n').shift()
              //  e.labelconcent = e.label.split('\n').slice(1).join('\n')
              // e.label= `<p>${e.label.split('\n').shift()}</p>`+'\n'+ e.label.split('\n').slice(1).join('\n')
              // console.log(e.label, 'e.la')
              // e.label={ // 关键形样式（优先级高于color）
              //   fontSize: 14,
              //   fontWeight:800,
              //   text:e.label,

              // }
            }
          }
        })
        this.editor.getCurrentPage().read(this.form);
        console.log(this.form, 'this.form')

      })
    },

    // 初始化
    initG6Editor() {
      const _this = this;
      const editor = new G6Editor();
      this.editor = editor;
      G6Editor.track(false);
      const Command = G6Editor.Command;
      // 注册新命令save
      Command.registerCommand("save", {
        // 禁止保存命令进入队列
        queue: false,
        // 命令是否可用
        enable: (editor) => {
          return true;
        },
        // 正向命令
        execute(editor) {
          let needSaveData = editor.getCurrentPage().save();
          let newObj = JSON.parse(JSON.stringify(needSaveData))
          newObj.scriptInfoId = Cookies.get('id')
          newObj.flowScheme = JSON.stringify(needSaveData)
          newObj.edges.forEach(e => {
            if (e.keyword) {
              // e.label=e.label
              e.label = e.label.text
            }
            e.code = e.id
            delete e.id
          })
          newObj.nodes.forEach(e => {
            e.code = e.id
            delete e.id
          })
          console.log(newObj, 'newObj');

          // return
          insertScriptEdgeNode(newObj).then(res => {
            if (res.code == 200) {
              _this.$message.success("数据保存成功");
              _this.getlist()
            } else {
              _this.$modal.msgError(res.msg);
            }

          })

          let testcs = JSON.stringify(needSaveData)
          let test = JSON.parse(testcs)
          console.log(testcs, 'JSON.stringify(needSaveData)');
          console.log(test, 'test');
          // localStorage.setItem("flowData", JSON.stringify(needSaveData));
          _this.save(needSaveData);

        },
        // 反向命令
        back(editor) {
          console.log("反向命令");
        },
        // 快捷键：Ctrl + S
        shortcutCodes: [
          ["metaKey", "s"],
          ["ctrlKey", "s"]
        ]
      });
      // 画布
      const flow = new G6Editor.Flow({
        graph: {
          container: "page"
        },
        align: {
          line: {
            // 对齐线颜色
            stroke: "#FA8C16",
            // 对齐线粗细
            lineWidth: 1
          },
          // 开启全方位对齐
          item: true,
          // 网格对齐
          grid: true
        },
        grid: {
          // 网孔尺寸
          cell: 18
        },
        shortcut: {
          // 开启自定义命令保存的快捷键
          save: true
        }
      });
      window.flow = flow;

      // 设置边
      flow.getGraph().edge({
        shape: "flow-polyline"
      });

      // 元素面板栏
      const itempannel = new G6Editor.Itempannel({
        container: "itempannel"
      });
      // 工具栏
      const toolbar = new G6Editor.Toolbar({
        container: "toolbar"
      });
      // 属性栏
      const detailpannel = new G6Editor.Detailpannel({
        container: "detailpannel"
      });
      // 缩略图
      let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
      minimapWidth = Number(minimapWidth.replace(/px$/, ""));
      const minimap = new G6Editor.Minimap({
        container: "minimap",
        width: minimapWidth,
        height: 200
      });
      // 右键菜单
      const contextmenu = new G6Editor.Contextmenu({
        container: "contextmenu"
      });
      // 挂载以上组件到Editor
      editor.add(flow);
      editor.add(itempannel);
      editor.add(toolbar);
      editor.add(detailpannel);
      editor.add(minimap);
      editor.add(contextmenu);
      // 挂载到window，方便调试
      window.editor = editor;
      // 获取当前画布
      const currentPage = editor.getCurrentPage();
      currentPage.on("afterchange", (e) => {
        if (e.action === "add") {
          if (e.model.nodetype === "startNode" || e.model.nodetype === "endNode") {
            let nodes = this.editor.getCurrentPage().getNodes();
            for (const item of nodes) {
              if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) {
                this.editor.getCurrentPage().remove(e.item);
                this.$message.warning("只能有一个开始节点或结束节点");
              }
            }
          }
        }
      });
      // 监听（选择对象后）事件
      currentPage.on("afteritemselected", (ev) => {
        console.log("打印所选对象属性", ev.item);
        console.log("打印所选对象数据模型", ev.item.model);
        const selectedItemDataModel = ev.item.model
        // 如果选择的对象是节点
        if (ev.item.isNode) {
          this.type = selectedItemDataModel.shape
          if (selectedItemDataModel.label && selectedItemDataModel.labelconcent == '' && selectedItemDataModel.labeltitle == '') {
            if (selectedItemDataModel.label.split('\n').shift() && selectedItemDataModel.label.split('\n').slice(1).join('\n')) {
              // this.nodeAttributeForm.labeltitle = `<h2>${selectedItemDataModel.label.split('\n').shift()}</h2>`
              this.nodeAttributeForm.labeltitle = selectedItemDataModel.label.split('\n').shift()
              this.nodeAttributeForm.labelconcent = selectedItemDataModel.label.split('\n').slice(1).join('\n')
            } else if (selectedItemDataModel.label.split('\n').shift()) {
              this.nodeAttributeForm.label = selectedItemDataModel.label.split('\n').shift();
            }
          } else {
            this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
            this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
          }
          if (!this.nodeAttributeForm.labelconcent && !this.nodeAttributeForm.labeltitle) {
            this.nodeAttributeForm.label = selectedItemDataModel.label;
          }
          // this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
          // this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;

          this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
          this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
          this.nodeAttributeForm.color = selectedItemDataModel.color;
        }
        // 如果选择的对象是边
        if (ev.item.isEdge) {
          ev.item.graph.edge({
            shape: "flow-polyline-round"
          });
          let newObj = JSON.parse(JSON.stringify(selectedItemDataModel))
          if (newObj.keyword) {
            this.edgeAttributeForm.label = newObj.label.text;
          } else {
            this.edgeAttributeForm.label = selectedItemDataModel.label;
          }
          this.edgeAttributeForm.shape = selectedItemDataModel.shape;
          this.edgeAttributeForm.keyword = selectedItemDataModel.keyword;
        }
      });
      // 监听（删除后）事件
      currentPage.on("afterdelete", (ev) => { });
    },
    // 打开保存为图片弹窗
    openSaveAsImageDialog() {
      this.saveAsImageDialogVisible = true;
    },
    // 开启/关闭网格对齐
    toggleGridShowStatus(value) {
      if (value) {
        this.editor.getCurrentPage().showGrid();
      } else {
        this.editor.getCurrentPage().hideGrid();
      }
    },

    // 将data:image/png;base64,格式的Base64字符串转换为File对象
    base64ToFile(base64Data, filename) {
      const now = new Date();
      const nowdata = now.toTimeString().split(' ')[0]; // 获取时分秒
      console.log(nowdata,'nowdata')
      const nowdatanew=nowdata.replace(/:/g, '-')
      // this.attributeName.replace(/:/g, '-');
      const name = Cookies.get('username')
      // 将base64的数据类型前缀去掉（如果有必要）
      const base64Regex = /^data:([^;]+);base64,/;
      const matches = base64Data.match(base64Regex);
      // const mimeType = matches ? matches[1] : '';
      const mimeType = 'image/jpg';
      const base64String = base64Data.replace(base64Regex, ''); // 获取去掉前缀的base64字符串
      // 将base64字符串转换为二进制数据
      const binaryString = atob(base64String);
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      // 将二进制数据转换为Blob对象
      const blob = new Blob([bytes], { type: mimeType });
      // 创建File对象
      const file = new File([blob], nowdatanew+name + '.jpg', { type: mimeType });
      return file;
    },

    // 保存为图片
    saveAsImage() {
      let newCanvas;
      if (this.saveAsImageFormat === "jpg") {
        let canvas = this.editor.getCurrentPage().saveImage();
        newCanvas = document.createElement("canvas");
        newCanvas.width = canvas.width;
        newCanvas.height = canvas.height;
        let newContext = newCanvas.getContext("2d");
        newContext.fillStyle = "#fff";
        newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);
        newContext.drawImage(canvas, 0, 0);
      }
      if (this.saveAsImageFormat === "png") {
        newCanvas = this.editor.getCurrentPage().saveImage();
      }
      let imageDataURL = newCanvas.toDataURL();
      console.log(imageDataURL, 'imageDataURL')
      const file = this.base64ToFile(imageDataURL);
      console.log(file, '0000000000')
      // return
      let formDatanew = new FormData();
      formDatanew.append("file", file);
      console.log(formDatanew, 'formDatanew')
      uploadScriptInfo(formDatanew).then(response => {
        if (response.code == 200) {
          var obj={
            id:Cookies.get('id'),
            scriptFilePath:response.imgUrl
          }

          edit(obj).then(response => {
            if (response.code == 200) {

            }
          });
        }
      });
      // return file;
      let downloadLink = document.createElement("a");
      downloadLink.download = "图片.jpg";
      downloadLink.href = imageDataURL;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      this.saveAsImageDialogVisible = false;
    },

    // 保存为文件
    saveAsFile() {
      let sub = this.editor.getCurrentPage().save()
      console.log(sub, 'sub')
      let jsonString = JSON.stringify(this.editor.getCurrentPage().save());
      let blob = new Blob([jsonString]);
      let blobURL = URL.createObjectURL(blob);
      let downloadLink = document.createElement("a");
      downloadLink.download = "数据.json";
      downloadLink.href = blobURL;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      URL.revokeObjectURL(blobURL);
      document.body.removeChild(downloadLink);
    },
    // 读取历史数据
    readHistoryData() {
      let stringData = localStorage.getItem("flowData");
      if (stringData === "" || stringData === "{}" || stringData === null) {
        this.$message.warning("无历史数据");
        return;
      }
      let jsonData = JSON.parse(stringData);
      this.editor.getCurrentPage().read(jsonData);
    },
    // 读取上传数据
    readUploadData() {
      let uploadButton = document.createElement("input");
      uploadButton.setAttribute("type", "file");
      uploadButton.setAttribute("accept", ".json");
      uploadButton.addEventListener("change", (e) => {
        console.dir(uploadButton);
        let file = uploadButton.files[0];
        let fileReader = new FileReader();
        fileReader.onload = (event) => {
          console.log(event);
          let text = JSON.parse(event.target.result);
          console.log(text);
          this.editor.getCurrentPage().read(text);
        };
        fileReader.readAsText(file);
      });
      uploadButton.click();
    },
    //
    save(source) {
      let edges = source.edges;
      let nodes = source.nodes;
      console.log(construct);
      let res = construct(source);
      console.log(JSON.stringify(res, null, 2));
    }
  }
};
</script>

<style lang="less" scoped>
.bold-input ::v-deep .el-input__inner {
  font-weight: bold;
}
@import url("../mianview/index.less");
</style>
