<template>
  <div>
    <div class="center" ref="centerRef">
      <div
        class="flow"
        :style="{
          transform: `scale(${scaleX}, ${scaleY})`,
          transformOrigin: 'left top'
        }"
      >
        <div
          style="position: absolute"
          v-for="i in nodes"
          :style="{
            left: (getAbsolutePosition(i.id).x / 960) * 100 + '%',
            top: (getAbsolutePosition(i.id).y / 540) * 100 + '%'
          }"
        >
          <CircuitComponentNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'circuitComponent'" />
          <LineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'line'" />
        </div>
      </div>
      <div class="textFlow">
        <div
          style="position: absolute"
          v-for="i in nodes.filter((e) => ['text1', 'deviceDataList'].includes(e.type))"
          :style="{
            left: (getAbsolutePosition(i.id).x / 960) * 100 + '%',
            top: (getAbsolutePosition(i.id).y / 540) * 100 + '%'
          }"
        >
          <TextNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'text1'" />
          <DeviceDataListNode
            :pNode="findNode(i.parentNodeId)"
            :ratioWidth="ratioWidth"
            :ratioHeight="ratioHeight"
            v-bind="i"
            :is-view="true"
            v-if="i.type === 'deviceDataList'"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CircuitComponentNode from './nodes/circuitComponent.vue';
import LineNode from './nodes/line.vue';
import TextNode from './nodes/text.vue';
import DeviceDataListNode from './nodes/deviceDataList.vue';

const nodes = ref([]);
const centerRef = ref(null);
const ratioWidth = ref(1);
const ratioHeight = ref(1);
const scaleX = ref(1);
const scaleY = ref(1);
const getAbsolutePosition = (id) => {
  const node = nodes.value.find((n) => n.id === id);
  if (!node) return { x: 0, y: 0 };

  let x = node.position.x;
  let y = node.position.y;

  let parentId = node.parentNode;

  while (parentId) {
    const parent = nodes.value.find((n) => n.id === parentId);
    if (!parent) break;

    x += parent.position.x;
    y += parent.position.y;

    parentId = parent.parentNode;
  }

  return { x, y };
};
const findNode = (id) => {
  return nodes.value.find((n) => n.id === id) || {};
};
onMounted(() => {
  nodes.value = JSON.parse(localStorage.getItem('NODES') || '[]');
  const rect = centerRef.value.getBoundingClientRect();
  scaleX.value = rect.width / 960;
  scaleY.value = rect.height / 540;

  // const { offsetWidth, offsetHeight } = centerRef.value;
  // ratioWidth.value = offsetWidth / 960;
  // ratioHeight.value = offsetHeight / 540;
});
</script>
<style lang="scss" scoped>
.center {
  width: 1000px;
  height: 400px;
  position: absolute;
}

.flow {
  position: absolute;
  width: 960px;
  height: 540px;
}

.textFlow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>
