<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'

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 props = defineProps({
  operInfo: {
    type: Object,
    require: true,
    default: {}
  }
})
const info = reactive({
  nodes: [],
  opers: [],
  edges: [],
})
const emit = defineEmits(["nodeClick"]);
const flow = ref()
let lf = ref(null)
const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  isSilentMode: true,
  grid: {
    size: 10,
    visible: false,
    type: 'mesh',
    config: {
      color: '#DCDCDC',
    }
  },
  keyboard: { enabled: false },
  style: themeApprove,
  plugins: [AiNodeExtension, Menu]
};
const showFlow = (o) => {
  info.opers = o.operator_list;
  info.edges = o.operator_node_data.edges || [];
  info.nodes = o.operator_node_data.nodes || [];

  let data = { nodes: info.nodes, edges: info.edges };
  lf.value.render(data)
}

defineExpose({
  showFlow,
})
const initEvent = (lf) => {
  lf.on("element:click", node => {
    emit("nodeClick", node.data);
  });
  lf.on("blank:click",d=>{
    emit("nodeClick", {});
  });
}
onMounted(() => {
  const logicFlow = new LogicFlow({
    ...config,
    container: flow.value
  })
  initEvent(logicFlow);
  lf.value = logicFlow
  window.lf = lf;
});
</script>
<style scoped lang='scss'>
.flow-demo1 {
  height: 100%;
  overflow: hidden;

  padding: 20px 0px 10px;

  .viewport {
    height: 100%;
    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>