<script setup lang="ts">
import { ref, onMounted } from "vue";
import LogicFlow from "@logicflow/core";
import { process, record } from "./_mock";
import Legends from "./cnps/legend.vue";
import { NormalTask, ProcessTask, FinishTask, Dashe } from "./tasks";
import { createProcessData } from "./utils/createProcessData";
import { Tooltip } from "./utils/tooltip";
import "@logicflow/core/dist/style/index.css";
import "./style.css";

import type { ProcessNode } from "./types/process";

LogicFlow.use(Tooltip);

const props = defineProps<{
  convert?: (value: any) => any;
}>();

const containerRef = ref<HTMLElement | null>(null);
const lf = ref<LogicFlow | null>(null);

function createLogicFlowInstance() {
  const lf = new LogicFlow({
    container: containerRef.value! as any,
    stopZoomGraph: true,
    stopScrollGraph: true,
    stopMoveGraph: true,
    isSilentMode: true,
    grid: false
  });

  lf.register(NormalTask);
  lf.register(ProcessTask);
  lf.register(FinishTask);
  lf.register(Dashe);

  return lf;
}

onMounted(() => {
  const { convert } = props;
  lf.value = createLogicFlowInstance();
  const data = createProcessData(
    process.data.list as ProcessNode[],
    record.data
  );
  lf.value.render(convert ? convert(data) : data);
});
</script>

<template>
  <div class="lf___container" ref="containerRef">
    <Legends />
  </div>
</template>

<style scoped>
.lf___container {
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container > .lf {
  width: 100%;
  height: 100%;
}
</style>
