<template>
  <div class="content"
       ref="contentRef"
       :style='`width:${area?.width || "100%"};height:${area?.height || "100%"};background-image:url(${area?.bg})`'>
    <div v-for="(i,k) in nodes" class="node"
         :style="{zIndex:k,left: (i.position?.x / (parseFloat(area?.width)|| 1920))*100 +'%',top: (i.position?.y / (parseFloat(area?.height) || 1080))*100 +'%'}">

      <template v-if="i.type === 'customBoard'">
        <CustomBoardNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                         :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
      </template>
      <template v-if="i.type === 'customData'">
        <CustomDataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                        v-bind="i"></CustomDataNode>
      </template>
      <template v-if="i.type === 'staticData'">
        <StaticDataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                        v-bind="i"></StaticDataNode>
      </template>
      <template v-if="i.type === 'line'">
        <LineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                  v-bind="i"></LineNode>
      </template>
      <template v-if="i.type === 'multiLines'">
        <MultiLinesNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                        v-bind="i"></MultiLinesNode>
      </template>
      <template v-if="i.type === 'curve'">
        <CurveNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                   v-bind="i"></CurveNode>
      </template>
      <template v-if="i.type === 'multiCurves'">
        <MultiCurvesNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                         :inputData=getInputData(i.id) v-bind="i"></MultiCurvesNode>
      </template>
      <template v-if="i.type === 'bar'">
        <BarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                 v-bind="i"></BarNode>
      </template>
      <template v-if="i.type === 'backgroundBar'">
        <BackgroundBarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                           :inputData=getInputData(i.id) v-bind="i"></BackgroundBarNode>
      </template>
      <template v-if="i.type === 'multiBars'">
        <MultiBarsNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                       v-bind="i"></MultiBarsNode>
      </template>
      <template v-if="i.type === 'data'">
        <DataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                  v-bind="i"></DataNode>
      </template>
      <template v-if="i.type === 'inputNode'">
        <InputNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                   v-bind="i"></InputNode>
      </template>
      <template v-if="i.type === 'buttonNode'">
        <ButtonNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                    v-bind="i"></ButtonNode>
      </template>
      <template v-if="i.type === 'selectNode'">
        <SelectNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                    v-bind="i"></SelectNode>
      </template>
      <template v-if="i.type === 'time'">
        <TimeNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                  v-bind="i"></TimeNode>
      </template>
      <template v-if="i.type === 'map'">
        <MapNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                 v-bind="i"></MapNode>
      </template>
      <template v-if="i.type === 'text'">
        <TextNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                  v-bind="i"></TextNode>
      </template>
      <template v-if="i.type === 'img'">
        <ImgNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                 v-bind="i"></ImgNode>
      </template>
      <template v-if="i.type === 'icon'">
        <IconNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                  v-bind="i"></IconNode>
      </template>
      <template v-if="i.type === 'video'">
        <VideoNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                   v-bind="i"></VideoNode>
      </template>
      <template v-if="i.type === 'timeline'">
        <TimelineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                      v-bind="i"></TimelineNode>
      </template>
      <template v-if="i.type === 'pie'">
        <PieNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                 v-bind="i"></PieNode>
      </template>
      <template v-if="i.type === 'nightingaleRoseDiagram'">
        <NightingaleRoseDiagramNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                                    :inputData=getInputData(i.id)
                                    v-bind="i"></NightingaleRoseDiagramNode>
      </template>
      <template v-if="i.type === 'carousel'">
        <CarouselNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                      v-bind="i"></CarouselNode>
      </template>
      <template v-if="i.type === 'table'">
        <TableNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                   v-bind="i"></TableNode>
      </template>
      <template v-if="i.type === 'scrollTable'">
        <ScrollTableNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                         :inputData=getInputData(i.id) v-bind="i"></ScrollTableNode>
      </template>
      <template v-if="i.type === 'background'">
        <BackgroundNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                        v-bind="i"></BackgroundNode>
      </template>
      <template v-if="i.type === 'pagination'">
        <PaginationNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                        v-bind="i"></PaginationNode>
      </template>
      <template v-if="i.type === 'annular'">
        <AnnularNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                     v-bind="i"></AnnularNode>
      </template>
      <template v-if="i.type === 'dashboard'">
        <DashboardNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                       v-bind="i"></DashboardNode>
      </template>
      <template v-if="i.type === 'radar'">
        <RadarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                   v-bind="i"></RadarNode>
      </template>
      <template v-if="i.type === 'lineBar'">
        <LineBarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
                     v-bind="i"></LineBarNode>
      </template>
      <template v-if="i.type === 'digitalFlop'">
        <DigitalFlopNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                         :inputData=getInputData(i.id) v-bind="i"></DigitalFlopNode>
      </template>

    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid';
import AreaNode from './nodes/other/areaNode.vue';

import BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
import PaginationNode from '@/views/boardGenerate/nodes/form/paginationNode.vue';

import AnnularNode from '@/views/boardGenerate/nodes/board/annularNode.vue';
import DashboardNode from '@/views/boardGenerate/nodes/board/dashboardNode.vue';
import RadarNode from '@/views/boardGenerate/nodes/board/radarNode.vue';

import LineBarNode from '@/views/boardGenerate/nodes/board/lineBarNode.vue';
import DigitalFlopNode from '@/views/boardGenerate/nodes/form/digitalFlopNode.vue';

import TimeNode from './nodes/form/timeNode.vue';
import DataNode from './nodes/data/dataNode.vue';
import LineNode from './nodes/board/lineNode.vue';
import MultiLinesNode from './nodes/board/multiLinesNode.vue';
import CurveNode from './nodes/board/curveNode.vue';
import MultiCurvesNode from './nodes/board/multiCurvesNode.vue';
import BarNode from './nodes/board/barNode.vue';
import BackgroundBarNode from './nodes/board/backgroundBarNode.vue';
import MultiBarsNode from './nodes/board/multiBarsNode.vue';
import InputNode from './nodes/form/inputNode.vue';
import ButtonNode from './nodes/form/buttonNode.vue';
import SelectNode from './nodes/form/selectNode.vue';
import MapNode from './nodes/form/mapNode.vue';
import CustomBoardNode from './nodes/board/customBoardNode.vue';
import CustomDataNode from './nodes/data/customDataNode.vue';
import TextNode from './nodes/form/textNode.vue';
import ImgNode from './nodes/form/imgNode.vue';
import IconNode from './nodes/form/iconNode.vue';
import VideoNode from './nodes/form/videoNode.vue';
import TimelineNode from './nodes/form/timelineNode.vue';
import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
import NightingaleRoseDiagramNode from './nodes/board/nightingaleRoseDiagramNode.vue';
import CarouselNode from './nodes/board/carouselNode.vue';
import StaticDataNode from './nodes/data/staticDataNode.vue';
import TableNode from './nodes/form/tableNode.vue';
import ScrollTableNode from './nodes/form/scrollTableNode.vue';
import { getBoardApi } from '@/views/boardGenerate/api/boardList';

const router = useRouter();

const contentRef = ref();

const nodes = ref([]);
const edges = ref([]);
const area = ref({});
const ratioWidth = ref(1);
const ratioHeight = ref(1);
const getInputData = (e) => {
  let outputData = {};
  let nodeIds = edges.value.map(v => {
    if (v.target === e) {
      return v.source;
    }
  });
  nodes.value.forEach(v => {
    if (nodeIds.includes(v.id)) {
      outputData = {
        ...outputData,
        ...v.data.outputData
      };
    }
  });
  return outputData;
};
onMounted(async () => {
  await getBoardApi(router.currentRoute.value.query.id)
    .then((res) => {
      let data = res.data;
      nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.sort((a, b) => a.fieldOne - b.fieldOne).map(e => {
        let data = {};
        let savaField = ['customData', 'options'];
        let dataContent = JSON.parse(e.dataContent) || {};
        Object.keys(dataContent).forEach((key) => {
          if (savaField.includes(key)) {
            data[key] = dataContent[key];
          } else {
            if (Array.isArray(dataContent[key])) {
              data[key] = [];
            } else if (dataContent[key] && typeof dataContent[key] === 'object' && !Array.isArray(dataContent[key])) {
              data[key] = {};
            } else {
              data[key] = null;
            }
          }
        });
        return {
          id: e.pagePointId,
          name: e.pagePointName,
          dimensions: {
            width: e.width,
            height: e.height
          },
          position: {
            x: e.posX,
            y: e.posY
          },
          type: e.pointType,
          data: JSON.parse(e.dataContent)
        };
      }) : [{
        id: `area_${uuidv4().replaceAll('-', '_')}`,
        name: 'area',
        type: 'area',
        position: {
          x: 0,
          y: 0
        },
        data: {}
      }];
      edges.value = data.designPageEdgesList.map(e => {
        return {
          id: e.pageEdgesId,
          source: e.sourceNodeId,
          target: e.targetNodeId,
          type: e.edgeType,
          targetHandle: e.targetHandleId,
          sourceHandle: e.sourceHandleId
        };
      }) || [];
      area.value = JSON.parse(data.customContent) || {};
      console.log('area.value', area.value);
      if (!area.value.width) {
        const { offsetWidth } = contentRef.value;
        console.log('offsetWidth', offsetWidth);
        ratioWidth.value = offsetWidth / 1920;
      }
      if (!area.value.height) {
        const { offsetHeight } = contentRef.value;
        ratioHeight.value = offsetHeight / 1080;
      }
    });
});
</script>
<style lang="less" scoped>
.content {
  position: absolute;
  overflow: hidden;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.node {
  position: absolute;
}


</style>
<style>
.el-notification {
  display: none !important;
}

</style>
