<template>
  <div class="flow-demo1">
    <div ref="flow" class="viewport" id="flowMain" />
  </div>
</template>

<script setup>
import LogicFlow from '@logicflow/core';
// 引入整体背景的样式
import '@logicflow/core/dist/style/index.css';
import { Menu } from "@logicflow/extension";
import AiNodeExtension from '@/components/flow/index'
import RegisteMenu from '@/components/flow/menu.js'
import OperatorApi from '@/api/operator'
const emit = defineEmits(["initLf", "updateNode", "nodeClick"])
const themeApprove = {
  rect: { // 矩形样式
    radius: 8,
    stroke: '#3CB371'
  },
  circle: {
    r: 25,
    stroke: '#FF6347'
  },
  polygon: {
    stroke: '#6495ED',
  },
  polyline: {
    strokeWidth: 1,
    stroke: '#6495ED'
  },
  edgeText: {
    background: {
      fill: 'white',
    },
  },
}

const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  grid: {
    size: 10,
    visible: true,
    type: 'mesh',
    config: {
      color: '#DCDCDC',
    }
  },
  keyboard: { enabled: true },
  style: themeApprove,
  plugins: [AiNodeExtension, Menu]
};
const flow = ref()
let lf = ref(null)
let showProp = ref(false)
let nodeData = reactive(null)
let nodePropKey = ref(1)
const initEvent = (lf) => {
  lf.on("blank:click", node => {
    emit("nodeClick", null)
  });
  lf.on("element:click", node => {
    nodeData = node.data
    showProp.value = true
    nodePropKey.value++
    emit("nodeClick", node)
  });
  lf.on("node:dnd-add", data => {
    //OperatorApi.findOne(data.data.properties.data.id).then(res => {
    //  data.data.properties.data.parameters = res.data.data.parameters;
      nodeData = data.data;
      showProp.value = true
      nodePropKey.value++
      doUpdateState()
    // });
  });
  lf.on("anchor:dragend", (a, b, c) => {
    updateEdges(a, b, c);
  });
  lf.on("connection:not-allowed", (a, b, c) => {
    if (a.msg == "不允许添加连线") {
      ElMessage.error("开始结点只能连接结束节点!");
    } else {
      ElMessage.error(a.msg);
    }
  });
  lf.on("node:delete", data => {
    if (data.data.text.value == "目标绘图") {
      ElMessage.error("目标绘图节点不能删除");
      setTimeout(() => {
        lf.undo();
      }, 400);
      return;
    }
    doUpdateState()
  });
  lf.on("node:contextmenu", (d) => {
    if (d.data.text.value == "目标绘图") {
      setTimeout(() => {
        document.querySelector(".lf-menu").style.display = "none";
      }, 0)
    }
  });
}
const updateEdges = (a, b, c) => {
  let edges = lf.value.getGraphData().edges.filter(d => d.sourceNodeId == a.edgeModel.sourceNodeId && d.targetNodeId == a.edgeModel.targetNodeId);
  if (edges.length > 0) {
    //edges[0].properties.edgeModel = a.edgeModel
    lf.value.setProperties(edges[0].id, {
      sourceAnchorId: a.edgeModel.sourceAnchorId.split("_")[0],
      targetAnchorId: a.edgeModel.targetAnchorId.split("_")[0],
    })
  }

}
const doEdit = (n) => {
}
const doUpdateState = () => {
  //nodePanel.value.updateNode(lf.value.getGraphData());
  emit("updateNode", lf.value.getGraphData())
}

const getFlowData = () => {
  return lf.value.getGraphData();
}
onMounted(() => {
  const logicFlow = new LogicFlow({
    ...config,
    container: flow.value
  })
  lf.value = logicFlow
  logicFlow.setDefaultEdgeType("ai-link");
  RegisteMenu(logicFlow)
  initEvent(logicFlow);
  emit("initLf", lf);
  window.lf = lf;
  logicFlow.render({
    nodes: [],
    edges: []
  })
  doUpdateState();
});
const updateNode = (info, node) => {
  lf.value.setProperties(node.data.id, {
    data: info
  })
}
const showFlow = d => {
  let info = d.operator_node_data
  let data = { nodes: info.nodes, edges: info.edges };
  lf.value.render(data)
  setTimeout(() => {
    doUpdateState();
  }, 400)
}
defineExpose({
  doEdit,
  getFlowData,
  updateNode, showFlow
})
</script>
<style scoped lang='scss'>
.flow-demo1 {
  height: 100%;
  overflow: hidden;
  padding: 0px;

  .viewport {
    height: 600px;
    overflow: hidden;
  }

  .custom-anchor {
    stroke: #999;
    stroke-width: 1;
    fill: #d9d9d9;
    cursor: crosshair;
    rx: 3;
    ry: 3;
  }

  .custom-anchor:hover {
    fill: #ff7f0e;
    stroke: #ff7f0e;
  }

  .flow-card {
    height: 80%;
    width: calc(100% - 450px);
    margin: 0px 12px;
    .el-card__body {
      height: 100%;
      padding: 4px;
    }
    
  }

  .node-panel {
    width: 240px;

    .el-tabs__item {
      padding: 0px 10px !important;
    }
  }

  .card-prop {
    height: 300px;
    width: 200px;
    min-width: 200px;
  }
}
</style>