<template>
  <div style="width: 100%; height: 100vh">
    <div class="top">
      <el-button type="primary" @click="restoration">复位</el-button>
      <el-button type="primary">保存</el-button>
      <el-button type="info" @click="setPageData">设置</el-button>
    </div>
    <div class="left">
      <el-divider content-position="left">基础</el-divider>
      <el-card
        class="moduleCard1"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'line', {})"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 1px; background-color: #0002"
          ></div>
        </template>
        <div class="moduleText">线</div>
      </el-card>
      <el-card
        class="moduleCard1"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'text1', {})"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <div style="text-align: center; line-height: 50px">文字</div>
        </template>
        <div class="moduleText">文字</div>
      </el-card>
      <el-divider content-position="left">元件</el-divider>
      <el-card
        class="moduleCard"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'circuitComponent', { type: 1 })"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <el-image style="width: 100%; height: 100%" :src="img1" fit="contain" />
        </template>
        <div class="moduleText">元件1</div>
      </el-card>
      <el-card
        class="moduleCard"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'circuitComponent', { type: 2 })"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <el-image style="width: 100%; height: 100%" :src="img2" fit="contain" />
        </template>
        <div class="moduleText">元件2</div>
      </el-card>
    </div>
    <div class="right" ref="rightRef" @drop="onDrop">
      <VueFlow
        class="flow"
        id="flowA"
        :min-zoom="0.01"
        ref="flowRef"
        :zoom-on-double-click="false"
        :snapToGrid="isSnapToGrid"
        :panOnDrag="false"
        :autoPanSpeed="0"
        :snapGrid="[10, 10]"
        v-model:nodes="nodes"
        v-model:edges="edges"
        fit-view-on-init
        default-marker-color="#409EFF"
        @node-click="logEvent('click', $event)"
        @pane-click="logEvent('paneClick', $event)"
        @node-drag-start="logEvent('nodeDrag', $event)"
        @node-contextMenu="logEvent('contextmenu', $event)"
        @node-double-click="logEvent('dblclick', $event)"
        @dragover="onDragOver"
      >
        <Background
          :size="1"
          :gap="20"
          :pattern-color="nodes.find((e) => (e.type = 'area'))?.data.style.patternColor || '#0000'"
          :style="`background-color: ${nodes.find((e) => (e.type = 'area'))?.data.style.backgroundColor}`"
        />

        <template #node-area="props">
          <AreaNode
            v-bind="props"
            :pageData="{ width: '960px', height: '540px', bgColor: nodes.find((e) => (e.type = 'area'))?.data.style.backgroundColor }"
          ></AreaNode>
        </template>
        <template #node-circuitComponent="props">
          <CircuitComponentNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
        </template>
        <template #node-deviceDataList="props">
          <DeviceDataListNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" :nodes="nodes" />
        </template>
        <template #node-line="props">
          <LineNode :monitorType="monitorType" v-bind="props" />
        </template>
        <template #node-text1="props">
          <TextNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
        </template>
      </VueFlow>
    </div>

    <el-dialog draggable v-model="nodeOptionVisible" title="节点配置" width="500">
      <el-form :model="nodeData">
        <el-form-item label="网络地址" label-width="120px" v-if="[].includes(nodeType)">
          <el-input v-model="nodeData.network" autocomplete="off" />
        </el-form-item>
        <el-form-item label="节点id" label-width="120px" v-if="['circuitComponent', 'text1'].includes(nodeType)">
          <el-input v-model="nodeData.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="节点内容" label-width="120px" v-if="['text1'].includes(nodeType)">
          <el-input v-model="nodeData.value" autocomplete="off" />
        </el-form-item>
        <el-form-item label="参数展示" label-width="120px" v-if="['circuitComponent'].includes(nodeType)">
          <el-select multiple v-model="nodeData.infos" placeholder="选择">
            <el-option
              :key="key"
              :label="monitorType.find((e) => e.value === key)?.label"
              :value="key"
              v-for="(value, key) in deviceData.find((e) => e.id === nodeData.id)?.options"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="nodeOptionVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog draggable v-model="pageDataVisible" title="页面配置" width="500">
      <el-form :model="pageData">
        <el-form-item label="背景颜色" label-width="120px">
          <el-color-picker v-model="pageData.backgroundColor" show-alpha />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pageDataVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :modal="false" :modal-penetrable="true" draggable v-model="nodeStyleVisible" title="节点样式配置" width="500">
      <el-form :model="nodeStyle">
        <el-form-item label="对齐方式" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'align')">
          <el-select v-model="nodeStyle.align" placeholder="Select">
            <el-option label="左对齐" value="left" />
            <el-option label="居中" value="center" />
            <el-option label="右对齐" value="right" />
          </el-select>
        </el-form-item>
        <el-form-item label="冒号居中" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'isColonCentered')">
          <el-switch v-model="nodeStyle.isColonCentered" />
        </el-form-item>
        <el-form-item label="左右比例" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'ratio') && nodeStyle.isColonCentered">
          <el-slider v-model="nodeStyle.ratio" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color')">
          <el-color-picker v-model="nodeStyle.color" show-alpha />
        </el-form-item>
        <el-form-item label="文字颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color1')">
          <el-color-picker v-model="nodeStyle.color1" show-alpha />
        </el-form-item>
        <el-form-item label="数值颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color2')">
          <el-color-picker v-model="nodeStyle.color2" show-alpha />
        </el-form-item>
        <el-form-item label="是否允许换行" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'whiteSpace')">
          <el-switch v-model="nodeStyle.whiteSpace" active-value="normal" inactive-value="nowrap" />
        </el-form-item>
        <el-form-item label="线类型" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'lineType')">
          <el-select v-model="nodeStyle.lineType" placeholder="Select">
            <el-option label="横线" :value="0" />
            <el-option label="竖线" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="宽度" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'width')">
          <el-input-number v-model="nodeStyle.width" :min="1" />
        </el-form-item>
        <el-form-item label="旋转角度" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'rotate')">
          <el-input-number v-model="nodeStyle.rotate" :min="-360" :max="360" />
        </el-form-item>
        <el-form-item label="旋转中心" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'transformOrigin1')">
          <el-select v-model="nodeStyle.transformOrigin1" placeholder="Select" style="width: calc(50% - 20px); margin-right: 20px">
            <el-option label="左" value="left" />
            <el-option label="中" value="center" />
            <el-option label="右" value="right" />
          </el-select>
          <el-select v-model="nodeStyle.transformOrigin2" placeholder="Select" style="width: calc(50% - 20px)">
            <el-option label="上" value="top" />
            <el-option label="中" value="center" />
            <el-option label="下" value="bottom" />
          </el-select>
        </el-form-item>
        <el-form-item label="字体大小" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'fontSize')">
          <el-slider v-model="nodeStyle.fontSize" :min="6" :max="40" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="nodeStyleVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { v4 as uuidv4 } from 'uuid';
import img1 from '@/assets/electronicComponents/1.png';
import img2 from '@/assets/electronicComponents/2.png';
import AreaNode from './nodes/area.vue';
import CircuitComponentNode from './nodes/circuitComponent.vue';
import DeviceDataListNode from './nodes/deviceDataList.vue';
import LineNode from './nodes/line.vue';
import TextNode from './nodes/text.vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import tool from './tool.js';
import { getIotEnvMonitorLatestAll } from '@/api/ems/report/recordIotenvInstant/index.ts';

const rightRef = ref();
const flowRef = ref();

const pid = ref(`area_${uuidv4().replaceAll('-', '_')}`);
const nodes = ref([
  {
    id: pid.value,
    class: 'no-click',
    name: 'area',
    type: 'area',
    position: {
      x: 0,
      y: 0
    },
    selectable: false,
    draggable: false,
    data: {
      style: {
        backgroundColor: '#fff'
      }
    }
  }
]);
const edges = ref([]);
const isSnapToGrid = ref(true);
const nodeOptionVisible = ref(false);
const nodeStyleVisible = ref(false);
const pageDataVisible = ref(false);
const nodeType = ref('');
const nodeData = ref({});
const nodeStyle = ref({});
const pageData = ref({});
const deviceData = ref([
  {
    id: 'test-1',
    options: {
      tem: 30,
      a: 10,
      v: 20
    }
  },
  {
    id: 'test-2',
    options: {
      tem: 20,
      a: 20,
      v: 10
    }
  }
]);

const monitorType = ref([
  { label: '温度', value: 'temperature' },
  { label: '湿度', value: 'humidity' },
  { label: '照度', value: 'illuminance' },
  { label: '噪声', value: 'noise' },
  { label: '硫化氢浓度', value: 'concentration' },
  { label: '振动速度', value: 'vibrationSpeed' },
  { label: '振动位移', value: 'vibrationDisplacement' },
  { label: '振动加速度', value: 'vibrationAcceleration' },
  { label: '振动温度', value: 'vibrationTemp' }
]);

const { onDragStart, onDrop, onDragOver } = tool();
const { addEdges, updateNode, removeNodes, addNodes, onNodesChange } = useVueFlow({ id: 'flowA' });
const transformData = (arr) => {
  const exclude = ['collectTime', 'objid', 'monitorCode', 'monitorId', 'monitorType'];

  return arr.map((item) => {
    const options = {};

    Object.keys(item).forEach((key) => {
      if (!exclude.includes(key)) {
        options[key] = item[key];
      }
    });

    return {
      id: item.monitorCode,
      options
    };
  });
};

/*
[
    {
        "id": "6",
        "options": {
            "monitorName": "666",
            "energyName": "未知",
            "temperature": null,
            "humidity": null,
            "illuminance": null,
            "noise": null,
            "concentration": null,
            "vibrationSpeed": null,
            "vibrationDisplacement": null,
            "vibrationAcceleration": null,
            "vibrationTemp": null,
            "recodeTime": null
        }
    },
    {
        "id": "T0001",
        "options": {
            "monitorName": "温度",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "H0001",
        "options": {
            "monitorName": "温湿度",
            "energyName": "温湿度",
            "temperature": null,
            "humidity": null,
            "recodeTime": null
        }
    },
    {
        "id": "Z0001",
        "options": {
            "monitorName": "振动",
            "energyName": "振动",
            "vibrationSpeed": null,
            "vibrationDisplacement": null,
            "vibrationAcceleration": null,
            "vibrationTemp": null,
            "recodeTime": null
        }
    },
    {
        "id": "N0001",
        "options": {
            "monitorName": "噪声",
            "energyName": "噪声",
            "noise": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0001_1900",
        "options": {
            "monitorName": "LCC81交换机箱",
            "energyName": "温度",
            "temperature": "20.5000",
            "recodeTime": "2026-04-09 14:54:09"
        }
    },
    {
        "id": "E0001_1400",
        "options": {
            "monitorName": "LCC24网关箱",
            "energyName": "温度",
            "temperature": "19.3700",
            "recodeTime": "2026-04-09 14:54:09"
        }
    },
    {
        "id": "E0001_2100",
        "options": {
            "monitorName": "CCC02主控柜",
            "energyName": "温度",
            "temperature": "18.8100",
            "recodeTime": "2026-04-09 14:54:10"
        }
    },
    {
        "id": "E0001_0400",
        "options": {
            "monitorName": "VSB",
            "energyName": "温度",
            "temperature": "20.1200",
            "recodeTime": "2026-04-09 14:54:10"
        }
    },
    {
        "id": "E0001_2200",
        "options": {
            "monitorName": "7.47.01",
            "energyName": "温度",
            "temperature": "45.1800",
            "recodeTime": "2026-04-09 14:54:10"
        }
    },
    {
        "id": "E0001_0700",
        "options": {
            "monitorName": "7.49.01",
            "energyName": "温度",
            "temperature": "18.8700",
            "recodeTime": "2026-04-09 14:54:10"
        }
    },
    {
        "id": "E0002_1100",
        "options": {
            "monitorName": "LCC23网关箱",
            "energyName": "温度",
            "temperature": "20.6200",
            "recodeTime": "2026-04-09 14:54:37"
        }
    },
    {
        "id": "E0002_1800",
        "options": {
            "monitorName": "7.41.04",
            "energyName": "温度",
            "temperature": "18.7500",
            "recodeTime": "2026-04-09 14:53:46"
        }
    },
    {
        "id": "E0002_2400",
        "options": {
            "monitorName": "7.41.03",
            "energyName": "温度",
            "temperature": "18.4300",
            "recodeTime": "2026-04-09 14:53:46"
        }
    },
    {
        "id": "E0003_2700",
        "options": {
            "monitorName": "7.35.01",
            "energyName": "温度",
            "temperature": "19.0000",
            "recodeTime": "2026-04-09 14:48:24"
        }
    },
    {
        "id": "E0003_2900",
        "options": {
            "monitorName": "7.35.02",
            "energyName": "温度",
            "temperature": "19.0000",
            "recodeTime": "2026-04-09 14:48:25"
        }
    },
    {
        "id": "E0004_0800",
        "options": {
            "monitorName": "0007+CCC01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0004_0500",
        "options": {
            "monitorName": "7.31.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0005_0300",
        "options": {
            "monitorName": "转盘TT",
            "energyName": "温度",
            "temperature": "23.7500",
            "recodeTime": "2026-04-09 14:54:31"
        }
    },
    {
        "id": "E0006_0600",
        "options": {
            "monitorName": "7.49.5",
            "energyName": "温度",
            "temperature": "16.2500",
            "recodeTime": "2026-04-09 14:54:14"
        }
    },
    {
        "id": "E0007_3100",
        "options": {
            "monitorName": "7.53.01",
            "energyName": "温度",
            "temperature": "31.2500",
            "recodeTime": "2026-04-09 14:53:03"
        }
    },
    {
        "id": "E0007_2800",
        "options": {
            "monitorName": "7.53.03",
            "energyName": "温度",
            "temperature": "47.0000",
            "recodeTime": "2026-04-09 14:53:05"
        }
    },
    {
        "id": "E0014_1600",
        "options": {
            "monitorName": "LCC21网关箱",
            "energyName": "温度",
            "temperature": "23.5000",
            "recodeTime": "2026-04-09 12:55:03"
        }
    },
    {
        "id": "E0014_2500",
        "options": {
            "monitorName": "LCC22网关箱",
            "energyName": "温度",
            "temperature": "25.8100",
            "recodeTime": "2026-04-09 14:09:59"
        }
    },
    {
        "id": "E0014_2300",
        "options": {
            "monitorName": "KO7柜台控制器",
            "energyName": "温度",
            "temperature": "24.2500",
            "recodeTime": "2026-04-09 12:55:04"
        }
    },
    {
        "id": "E0014_1200",
        "options": {
            "monitorName": "KO9柜台控制器",
            "energyName": "温度",
            "temperature": "24.5600",
            "recodeTime": "2026-04-09 14:09:59"
        }
    },
    {
        "id": "E0014_1300",
        "options": {
            "monitorName": "KO1柜台控制器",
            "energyName": "温度",
            "temperature": "23.8700",
            "recodeTime": "2026-04-09 12:55:02"
        }
    },
    {
        "id": "E0014_3200",
        "options": {
            "monitorName": "KO3柜台控制器",
            "energyName": "温度",
            "temperature": "24.0600",
            "recodeTime": "2026-04-09 14:09:59"
        }
    },
    {
        "id": "E0013_2000",
        "options": {
            "monitorName": "7.17.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_1700",
        "options": {
            "monitorName": "7.19.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_2600",
        "options": {
            "monitorName": "7.21.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_1000",
        "options": {
            "monitorName": "7.25.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_3300",
        "options": {
            "monitorName": "7.29.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_1500",
        "options": {
            "monitorName": "7.23.3",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_0900",
        "options": {
            "monitorName": "7.23.04",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0013_3000",
        "options": {
            "monitorName": "7.27.01",
            "energyName": "温度",
            "temperature": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0012_4300",
        "options": {
            "monitorName": "0033+CCC01",
            "energyName": "温湿度",
            "temperature": "18.7900",
            "humidity": "58.1300",
            "recodeTime": "2026-04-09 14:54:25"
        }
    },
    {
        "id": "E0004_3800",
        "options": {
            "monitorName": "7.31.15",
            "energyName": "振动",
            "vibrationSpeed": null,
            "vibrationDisplacement": null,
            "vibrationAcceleration": null,
            "vibrationTemp": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0004_3400",
        "options": {
            "monitorName": "7.31.9",
            "energyName": "振动",
            "vibrationSpeed": null,
            "vibrationDisplacement": null,
            "vibrationAcceleration": null,
            "vibrationTemp": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0004_3600",
        "options": {
            "monitorName": "7.31.1",
            "energyName": "振动",
            "vibrationSpeed": null,
            "vibrationDisplacement": null,
            "vibrationAcceleration": null,
            "vibrationTemp": null,
            "recodeTime": null
        }
    },
    {
        "id": "E0015_4400",
        "options": {
            "monitorName": "7.15.01",
            "energyName": "振动",
            "vibrationSpeed": "1.2000",
            "vibrationDisplacement": "1.2000",
            "vibrationAcceleration": "4.6000",
            "vibrationTemp": "25.8000",
            "recodeTime": "2026-04-09 14:53:56"
        }
    },
    {
        "id": "E0014_3700",
        "options": {
            "monitorName": "7.35.03",
            "energyName": "振动",
            "vibrationSpeed": "0.5000",
            "vibrationDisplacement": "0.4000",
            "vibrationAcceleration": "2.8000",
            "vibrationTemp": "35.7000",
            "recodeTime": "2026-04-09 12:54:15"
        }
    },
    {
        "id": "E0014_0200",
        "options": {
            "monitorName": "7.15.03",
            "energyName": "温度",
            "temperature": "36.8100",
            "recodeTime": "2026-04-09 14:09:59"
        }
    },
    {
        "id": "E0014_0100",
        "options": {
            "monitorName": "7.15.01温度",
            "energyName": "温度",
            "temperature": "37.4300",
            "recodeTime": "2026-04-09 12:55:05"
        }
    },
    {
        "id": "E0008_4100",
        "options": {
            "monitorName": "BF 29.69.1导入口",
            "energyName": "噪声",
            "noise": "62.7000",
            "recodeTime": "2026-04-09 14:54:07"
        }
    },
    {
        "id": "E0009_4200",
        "options": {
            "monitorName": "BF 23.11.1导入口",
            "energyName": "噪声",
            "noise": "69.5000",
            "recodeTime": "2026-04-09 14:54:33"
        }
    },
    {
        "id": "E0010_4000",
        "options": {
            "monitorName": "BF 21.12.4导入口",
            "energyName": "噪声",
            "noise": "91.5000",
            "recodeTime": "2026-04-09 14:53:53"
        }
    },
    {
        "id": "E0011_3900",
        "options": {
            "monitorName": "BF 26.51.1导入口",
            "energyName": "噪声",
            "noise": "78.7000",
            "recodeTime": "2026-04-09 14:54:27"
        }
    }
]
*/
const getDeviceData = () => {
  getIotEnvMonitorLatestAll().then((res) => {
    console.log(transformData(res.data));
    deviceData.value = transformData(res.data);
    //collectTime objid monitorCode monitorId monitorType
  });
};
const getParentNode = (id) => {
  let node = nodes.value.find((e) => e.id === id);
  if (node.parentNode) {
    node = nodes.value.find((e) => e.id === node.parentNode);
  }
  return node;
};
const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'paneClick':
      break;
    case 'click':
      break;
    case 'nodeDrag':
      break;
    case 'dblclick':
      event.event.preventDefault();
      nodeStyleVisible.value = true;
      nodeType.value = event.node.type;
      nodeStyle.value = event.node.data.style;
      break;
    case 'contextmenu':
      event.event.preventDefault();
      nodeOptionVisible.value = true;
      let node = getParentNode(event.node.id);
      nodeType.value = node.type;
      nodeData.value = node.data.options;
      break;
  }
};
onNodesChange((changes) => {
  changes.forEach((e) => {
    if (e.type === 'remove') {
      const ids = nodes.value.filter((node) => node.parentNode === e.id).map((node) => node.id);
      removeNodes(ids);
    }
  });
});
const setPageData = () => {
  pageDataVisible.value = true;
  pageData.value = nodes.value.find((e) => (e.type = 'area'))?.data.style;
};
onMounted(() => {
  getDeviceData();
  let scale = 0;
  const width = window.innerWidth - 220;
  rightRef.value.style.width = width + 'px';
  rightRef.value.style.height = (width * 540) / 960 + 'px';
  scale = width / 960;

  flowRef.value.onInit(() => {
    flowRef.value.setTransform({
      x: 0,
      y: 0,
      zoom: scale
    });
  });
  nextTick(() => {
    let NODES = JSON.parse(localStorage.getItem('NODES') || '[]');
    if (NODES.length > 0) {
      nodes.value = NODES;
    }
  });
});

const restoration = () => {
  let scale = 0;
  const width = window.innerWidth - 220;
  rightRef.value.style.width = width + 'px';
  rightRef.value.style.height = (width * 540) / 960 + 'px';
  scale = width / 960;

  flowRef.value.setTransform({
    x: 0,
    y: 0,
    zoom: scale
  });
};
watch(
  nodes,
  () => {
    if (nodes.value.length > 1) {
      localStorage.setItem('NODES', JSON.stringify(nodes.value));
    }
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding-right: 20px;
}

.left {
  display: inline-block;
  width: 200px;
  height: calc(100% - 50px);
  vertical-align: top;

  .moduleCard1 {
    width: calc(50% - 4px);
    display: inline-block;
    height: 100px;

    :deep(.el-card__header) {
      width: 100%;
      height: 50px;
      position: relative;
      padding: 0 !important;
    }

    :deep(.el-card__body) {
      padding: 0 20px 0 20px !important;

      .moduleText {
        line-height: 50px;
        text-align: center;
      }
    }
  }
  .moduleCard {
    width: calc(50% - 4px);
    display: inline-block;
    height: 150px;

    :deep(.el-card__header) {
      width: 100%;
      height: 100px;
      position: relative;
    }

    :deep(.el-card__body) {
      padding: 0 20px 0 20px !important;

      .moduleText {
        line-height: 50px;
        text-align: center;
      }
    }
  }
}

.right {
  display: inline-block;
  position: absolute;
  left: 200px;
}

:deep(.el-divider__text) {
  background-color: #f5f7fb;
}
</style>
<style>
.no-click {
  pointer-events: none !important;
}
</style>