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

<script lang='ts' 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'
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=>{    
    nodeData=data.data;
    showProp.value=true
    nodePropKey.value++
    doUpdateState()
  });
  lf.on("node:delete",data=>{
    if(data.data.text.value=="目标绘图"){
      ElMessage.error("目标绘图节点不能删除");      
      setTimeout(() => {
            lf.undo();
          }, 400);
      return;
    }
    doUpdateState()
  });
  lf.on("node:contextmenu",(d,e,p)=>{
    if(d.data.text.value=="目标绘图"){
      setTimeout(()=>{
        document.querySelector(".lf-menu").style.display="none";
      },0)
    }
  });
}
const doEdit=(n)=>{
    debugger
}
const doUpdateState=()=>{  
  //nodePanel.value.updateNode(lf.value.getGraphData());
    emit("updateNode",lf.value.getGraphData())
}
defineExpose({
  doEdit,    
})
onMounted(() => {
    const logicFlow = new LogicFlow({
        ...config,
        container: flow.value
    })
    lf.value = logicFlow
    RegisteMenu(logicFlow)
    initEvent(logicFlow);
    emit("initLf",lf);
    window.lf = lf;
    logicFlow.render({
    nodes: [
     /* {
        id: 'node_1',
        type: 'ai-node',
        x: 150,
        y: 40,
        fill:'#409effaa',
        text: '图像缩放',
        properties:{
          node:201
        }
      },
      {
        id: 'node_2',
        type: 'ai-node',
        x: 150,
        y: 540,
        fill:'#3CB371',
        text: '目标绘图',
        properties:{
          node:900
        }
      }*/
    ],
    edges: [
      
    ]
  })
  doUpdateState();
});
</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);

        .el-card__body {
            height: 100%;
            padding: 4px;
        }

        margin: 0px 12px;
    }

    .node-panel {
        width: 240px;

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

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