<template>
  <div class="flow-demo1">
    <div style="display: flex;height:100%">
      <NodePanel :lf="lf" ref="nodePanel" class="node-panel"/>
      <el-card  class="flow-card">
        <div ref="flow" class="viewport" id="flowMain" @click="hideProp"/>
      </el-card>
      <el-card  v-if="showProp"  :key="nodePropKey" class="card-prop">
          <template #header>节点属性</template>
          <div>
            节点ID:{{nodeData.properties.node }}
          </div>
          <div>
            节点名称:{{nodeData.text.value }}
          </div>
        </el-card>
    </div>
    
  </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 NodePanel from './nodePanel.vue'
const themeApprove = {
  rect: { // 矩形样式
    radius: 8,
    stroke: '#3CB371'
  },
  circle: {
    r: 25,
    stroke: '#FF6347'
  },
  polygon: {
    stroke: '#6495ED',
  },
  polyline: {
    strokeWidth: 1,
    stroke: '#3CB371'
  },
  edgeText: {
    background: {
      fill: 'white',
    },
  },
}
let showProp=ref(false)
let nodeData=reactive(null)
const nodePanel=ref()
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 nodePropKey=ref(1)
const hideProp=(e)=>{
  if(e.target.classList.contains("lf-drag-able")){
    showProp.value=false
  }
}
const initEvent=(lf)=>{
  lf.on("element:click",node=>{
    nodeData=node.data
    showProp.value=true
    nodePropKey.value++
    console.log("-->",nodeData)
  });
  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 doUpdateState=()=>{  
  nodePanel.value.updateNode(lf.value.getGraphData());
}
onMounted(() => {
  const logicFlow = new LogicFlow({
    ...config,
    container: flow.value
  })
  lf.value = logicFlow
  RegisteMenu(logicFlow)
  initEvent(logicFlow);
  window.lf=lf
  logicFlow.render({
    nodes: [
      {
        id: 'node_1',
        type: 'ai-node',
        x: 150,
        y: 20,
        fill:'#409effaa',
        text: '图像缩放',
        properties:{
          node:201
        }
      },
      {
        id: 'node_2',
        type: 'ai-node',
        x: 150,
        y: 80,
        fill:'#50e904',
        text: '目标绘图',
        properties:{
          node:900
        }
      }
    ],
    edges: [
      
    ]
  })
  doUpdateState();
});
</script>
<style lang='scss'>
.flow-demo1 {
  height: 100%;
  overflow: hidden;
  padding:0px 12px;
  .viewport {
    height: 100%;
    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>