<script setup>
import { onMounted, shallowRef } from "vue"
import { JsvMindMap, useFocusHub } from "jsview";
import Item from "./Item.vue";
import { data } from "./data"

const provideData = () => {
  return data;
};

const focusHub = useFocusHub();
const widgetRef = shallowRef();

const lineColor = {
  0: "#ff0000",
  1: "#00ff00",
  2: "#0000ff",
  3: "#007788",
  4: "#007788",
  5: "#007788",
};
const formatNode = (item, depth) => {
  return {
    left: item.left,
    top: item.top,
    width: 50,
    height: 50,
    childrenList: item.children,
    moveType: item.moveType ?? "layer",
    id: item.id,
    lineStyle: {
      backgroundColor: lineColor[depth],
      lineWidth: 3,
    },
    enableTap: true,
  };
};
const onEdge = (info) => {
  console.log("onEdge ", info);
};

function onMove(pos) {
  console.log("onMove", pos)
}

const componentName = "mindMapDemo";
onMounted(() => {
  focusHub.setFocus(componentName);
  widgetRef.value?.setSensor(onMove)
})
</script>

<template>
  <jsv-mind-map
    ref="widgetRef"
    :name="componentName"
    :left="200"
    :top="100"
    :width="500"
    :height="500"
    :formatNode="formatNode"
    :provideData="provideData"
    :onEdge="onEdge"
    :touchFlag="1"
  >
    <template v-slot="{ data, onAction, handler }">
      <item :data="data" :onAction="onAction" :handler="handler"></item>
    </template>
    <template #background>
      <div
        :style="{
          width: 1920,
          height: 1920,
          backgroundColor: '#aa0000aa',
        }"
      ></div>
    </template>
  </jsv-mind-map>
</template>
