<script setup lang="ts">
import type { ZoomParamType } from '@logicflow/core';

import { onMounted, shallowRef, useTemplateRef } from 'vue';

import {
  MinusCircleOutlined,
  PlusCircleOutlined,
  ShrinkOutlined,
} from '@ant-design/icons-vue';
import LogicFlow from '@logicflow/core';

import Between from './model/between';
import End from './model/end';
import Parallel from './model/parallel';
import Serial from './model/serial';
import Skip from './model/skip';
import Start from './model/start';
import { json2LogicFlowJson } from './model/tool';

import '@logicflow/core/lib/style/index.css';

const props = withDefaults(defineProps<{ data?: object }>(), {
  data: () => ({}),
});

const container = useTemplateRef('container');
const lf = shallowRef<LogicFlow | null>(null);

function zoomViewport(zoom: ZoomParamType) {
  if (!lf.value) {
    return;
  }
  lf.value.zoom(zoom);
  // 将内容平移至画布中心
  lf.value.translateCenter();
}

onMounted(async () => {
  if (props.data && container.value) {
    const data = json2LogicFlowJson(props.data);
    lf.value = new LogicFlow({
      container: container.value,
      grid: false,
      isSilentMode: true,
      textEdit: false,
    });

    lf.value.register(Start);
    lf.value.register(Between);
    lf.value.register(Serial);
    lf.value.register(Parallel);
    lf.value.register(End);
    lf.value.register(Skip);

    lf.value.render(data);
    lf.value.translateCenter();
  }
});
</script>

<template>
  <div>
    <div class="flex items-center justify-between py-2">
      <div class="flex items-center gap-3">
        <a-button @click="zoomViewport(1)">
          <template #icon>
            <ShrinkOutlined />
          </template>
        </a-button>
        <a-button @click="zoomViewport(true)">
          <template #icon>
            <PlusCircleOutlined />
          </template>
        </a-button>
        <a-button @click="zoomViewport(false)">
          <template #icon>
            <MinusCircleOutlined />
          </template>
        </a-button>
      </div>
      <div class="flex items-center gap-3 font-semibold">
        <span class="rounded-md border border-[#000] px-2">未办理</span>
        <span
          class="rounded-md border border-dashed border-[#ffcd17] bg-[#fff8dc] px-2 dark:text-black"
        >
          待办理
        </span>
        <span
          class="rounded-md border border-[#9dff00] bg-[#f0ffd9] px-2 dark:text-black"
        >
          已完成
        </span>
      </div>
    </div>
    <!-- 容器区域 -->
    <div class="h-[500px] w-full border" ref="container"></div>
  </div>
</template>
