<template>
  <div class="leftPanel">
    <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
      <el-tab-pane label="图表组件" name="1">
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">折线</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">多折线</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">曲线</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'multiCurves')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">多曲线
          </div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">柱状图</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'multiBars')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">多柱状图
          </div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">饼图</div>
        </el-card>
        <template v-for="i in customBoard">
          <el-card class="moduleCard" shadow="never" :draggable="true"
                   @dragstart="onDragStart($event, 'customBoard',i)"
                   :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                   :body-style="{padding:'4px 0'}">
            <template #header>
              <StarFilled />
            </template>
            <div class="moduleText">{{ i.name }}</div>
          </el-card>
        </template>
      </el-tab-pane>
      <el-tab-pane label="数据源" name="2">
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">映射</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'staticData')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">静态数据</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">设备数据</div>
        </el-card>
        <template v-for="i in customData">
          <el-card class="moduleCard" shadow="never" :draggable="true"
                   @dragstart="onDragStart($event, 'customData',i)"
                   :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                   :body-style="{padding:'4px 0'}">
            <template #header>
              <StarFilled />
            </template>
            <div class="moduleText">{{ i.name }}</div>
          </el-card>
        </template>
      </el-tab-pane>
      <el-tab-pane label="表单组件" name="3">
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">文字</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">输入框</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">时间</div>
        </el-card>
        <el-card class="moduleCard" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          <div class="moduleText">图片</div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="content" @drop="onDrop">
    <div class="pageSetting">
      <span class="pageTitle">{{ pageTitle }}</span>
      <div class="btns">
        <el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button>
        <el-button type="primary" text :icon="Check" @click="save">保存</el-button>
        <el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
      </div>
    </div>
    <div class="flowArea">
      <VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
               default-marker-color="#409EFF"
               @connect="logEvent('connect', $event)"
               @node-click="logEvent('click', $event)"
               @pane-click="logEvent('paneClick', $event)"
               @node-drag-start="logEvent('nodeDrag', $event)"
               @node-contextMenu="logEvent('contextmenu', $event)"
               @dragover="onDragOver"
      >
        <Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />

        <template #node-area="areaNodeProps">
          <AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
        </template>
        <template #node-customBoard="customBoardNodeProps">
          <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
                           @resize="resize"></CustomBoardNode>
        </template>
        <template #node-customData="customDataNodeProps">
          <CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
                          @resize="resize"></CustomDataNode>
        </template>
        <template #node-line="lineNodeProps">
          <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
                    @resize="resize"></LineNode>
        </template>
        <template #node-multiLines="multiLinesNodeProps">
          <MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
                          @resize="resize"></MultiLinesNode>
        </template>
        <template #node-curve="curveNodeProps">
          <CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
                     @resize="resize"></CurveNode>
        </template>
        <template #node-multiCurves="multiCurvesNodeProps">
          <MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
                           @resize="resize"></MultiCurvesNode>
        </template>
        <template #node-bar="barNodeProps">
          <BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
                   @resize="resize"></BarNode>
        </template>
        <template #node-multiBars="multiBarsNodeProps">
          <MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
                         @resize="resize"></MultiBarsNode>
        </template>
        <template #node-pie="pieNodeProps">
          <PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
                   @resize="resize"></PieNode>
        </template>
        <template #node-data="dataNodeProps">
          <DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
                    @resize="resize"></DataNode>
        </template>
        <template #node-text="textNodeProps">
          <TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
                    @resize="resize"></TextNode>
        </template>
        <template #node-img="imgNodeProps">
          <ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
                   @resize="resize"></ImgNode>
        </template>
        <template #node-inputNode="inputNodeProps">
          <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
                     @resize="resize"></InputNode>
        </template>
        <template #node-time="timeNodeProps">
          <TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
                    @resize="resize"></TimeNode>
        </template>
        <template #node-map="mapNodeProps">
          <MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
                   @resize="resize"></MapNode>
        </template>
        <template #node-staticData="staticDataNodeProps">
          <StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
                          @resize="resize"></StaticDataNode>
        </template>
      </VueFlow>
    </div>
  </div>
  <div class="rightPanel">
    <el-collapse>
      <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
        <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
          <el-form-item label="x">
            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
          </el-form-item>
          <el-form-item label="y">
            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
        <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
          <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
            <el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
          </el-form-item>
          <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
            <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
          </el-form-item>
          <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
            <el-date-picker
              v-model="nodeAttrForm.defaultTime"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 100%;height: 100%"
              :value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
              :format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
            />
          </el-form-item>
          <el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
            <el-input v-model="nodeAttrForm.format" style="width: 100%" />
          </el-form-item>
          <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
            <el-input v-model="nodeAttrForm.field" />
          </el-form-item>
          <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
            <el-input v-model="nodeAttrForm.startTimeId" />
          </el-form-item>
          <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
            <el-input v-model="nodeAttrForm.endTimeId" />
          </el-form-item>
          <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
            <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
              <el-table-column label="源字段" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.source" style="width: 100%" />
                </template>
              </el-table-column>
              <el-table-column label="映射字段" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.target" style="width: 100%" />
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
              添加映射
            </el-button>
          </el-form-item>
          <el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
            <el-input v-model="nodeAttrForm.text" style="width: 100%" />
          </el-form-item>
          <el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
            <el-select
              v-model="nodeAttrForm.align"
              placeholder="Select"
              style="width: 100%"
            >
              <el-option
                label="左对齐"
                value="left"
              />
              <el-option
                label="居中对齐"
                value="center"
              />
              <el-option
                label="右对齐"
                value="right"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
            <el-color-picker v-model="nodeAttrForm.color" show-alpha />
          </el-form-item>
          <el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
            <el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
          </el-form-item>
          <el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
            <el-input v-model="nodeAttrForm.title" style="width: 100%" />
          </el-form-item>
          <el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
            <el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
          </el-form-item>
          <el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
            <el-input-number
              v-model="nodeAttrForm.timeout"
              :min="1000"
              :step="1000"
              controls-position="right"
            />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
        <el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
          <el-form-item label="自定义内容" v-if="Object.keys(customDataForm).includes('option')">
            <el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
          </el-form-item>
          <el-form-item label="请求地址" v-if="Object.keys(customDataForm).includes('url')">
            <el-input v-model="customDataForm.url">
              <template #prepend>
                <el-select v-model="customDataForm.method" style="width: 100px">
                  <el-option label="get" value="get" />
                  <el-option label="post" value="post" />
                  <el-option label="socket" value="socket" />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
  <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
    <el-form :model="pageSettingForm">
      <el-form-item label="页面大小" label-width="80px">
        <el-input v-model="pageSettingForm.width" style="width: calc(50% - 10px)" autocomplete="off"
                  placeholder="缺省则为不限制" />
        <span style="width: 20px;text-align: center">
        X
        </span>
        <el-input v-model="pageSettingForm.height" style="width: calc(50% - 10px)" autocomplete="off"
                  placeholder="缺省则为不限制" />
      </el-form-item>
      <el-form-item label="页面背景" label-width="80px">
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :limit="1"
          accept=".jpg,.png"
          :before-upload="pageBgUploadSuccess"
        >
          <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="pageSettingVisible = false">取消</el-button>
        <el-button type="primary" @click="setPageData">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid';
import { Setting, Check, Close, Plus } from '@element-plus/icons-vue';
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { StarFilled } from '@element-plus/icons-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 MultiBarsNode from './nodes/board/multiBarsNode.vue';
import StaticDataNode from './nodes/data/staticDataNode.vue';
import CustomBoardNode from './nodes/board/customBoardNode.vue';
import PieNode from './nodes/board/pieNode.vue';
import DataNode from './nodes/data/dataNode.vue';
import CustomDataNode from './nodes/data/customDataNode.vue';
import MapNode from './nodes/form/mapNode.vue';
import InputNode from './nodes/form/inputNode.vue';
import TimeNode from './nodes/form/timeNode.vue';
import TextNode from './nodes/form/textNode.vue';
import ImgNode from './nodes/form/imgNode.vue';
import AreaNode from './nodes/other/areaNode.vue';
import tool from './tool';
import { getDataSourceList } from '@/views/boardGenerate/api/dataSource';
import { editBoardApi, getBoardApi, getBoardListApi } from '@/views/boardGenerate/api/boardList';

const router = useRouter();
// 获取自定义的方法
const { onDragStart, onDrop, onDragOver } = tool();


// flow内置方法
const {
  addEdges,
  updateNode
} = useVueFlow();

const pageSettingVisible = ref(false);
const pageSettingForm = ref({});
const pageTitle = ref('页面名称');
const leftPanelState = ref('1');
const pageData = ref({});
const nodes = ref([{
  id: `area_${uuidv4().replaceAll('-', '_')}`,
  name: 'area',
  type: 'area',
  position: {
    x: 0,
    y: 0
  },
  data: {}
}]);
const edges = ref([]);
const customData = ref([]);
const customBoard = ref([]);
const boardData = ref({});
onMounted(async () => {
  getDataSourceList({
    pageNum: 1,
    pageSize: 9999999
  })
    .then((res) => {
      customData.value = res.rows.map(e => {
        return {
          name: e.dataSourceName,
          url: e.requestUrl,
          method: e.requestMethod
        };
      });
    });
  customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
  await nextTick();

  getBoardApi(router.currentRoute.value.query.id)
    .then((res) => {
      let data = res.data;
      boardData.value = data;
      nodes.value = data.designPagePointList.map(e => {
        let data = {};
        let savaField = ['customData', 'options'];
        Object.keys(e.data).forEach((key) => {
          if (savaField.includes(key)) {
            data[key] = e.data[key];
          } else {
            if (Array.isArray(e.data[key])) {
              data[key] = [];
            } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
              data[key] = {};
            } else {
              data[key] = null;
            }

          }
        });
        return {
          id: e.pagePointId,
          name: e.pagePointName,
          dimensions: {
            width: e.dimensions.width,
            height: e.dimensions.height
          },
          position: {
            x: e.position.x,
            y: e.position.y
          },
          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
        };
      }) || [];
    });
  pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
});
const customDataForm = ref({});
const nodeAttrForm = ref({});
const nodeDataForm = ref({});
const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'connect':
      if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
        addEdges({
          id: `${event.source}---${event.target}`,
          source: event.source,
          target: event.target,
          type: 'bezier',
          animated: true,
          markerEnd: MarkerType.ArrowClosed,
          sourceHandle: event.sourceHandle,
          style: { stroke: '#409EFF' }
        });
      }
      break;
    case 'paneClick':
      nodeAttrForm.value = {};
      nodeDataForm.value = {};
      customDataForm.value = {};
      break;
    case 'click':
      nodeAttrForm.value = event.node.data.options;
      nodeDataForm.value = event.node;
      customDataForm.value = event.node.data.customData;
      console.log(event.node.data);
      break;
    case 'nodeDrag':
      if (event.nodes.length === 1) {
        nodeAttrForm.value = event.node.data.options;
        nodeDataForm.value = event.node;
        customDataForm.value = event.node.data.customData;
      } else {
        nodeAttrForm.value = {};
        nodeDataForm.value = {};
        customDataForm.value = {};
      }
      break;
    case 'contextmenu':
      console.log('contextmenu', event);
  }
};
const resize = (e, id) => {
  nodes.value.forEach((item) => {
    if (item.selected && item.id !== id) {
      item.dimensions = {
        width: e.params.width,
        height: e.params.height
      };
    }
  });
};
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;
};
const pageSetting = () => {
  pageSettingVisible.value = true;
  pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA'));
};
const save = () => {

  editBoardApi({
    ...boardData.value,
    designPageEdgesList: nodes.value.map(e => {
      let data = {};
      let savaField = ['customData', 'options'];
      Object.keys(e.data).forEach((key) => {
        if (savaField.includes(key)) {
          data[key] = e.data[key];
        } else {
          if (Array.isArray(e.data[key])) {
            data[key] = [];
          } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
            data[key] = {};
          } else {
            data[key] = null;
          }

        }
      });
      return {
        activeFlag: '1',
        pagePointId: e.id,
        pagePointName: e.name,
        width: e.dimensions.width,
        height: e.dimensions.height,
        posX: e.position.x,
        posY: e.position.y,
        pointType: e.type,
        dataContent: JSON.stringify(data)
      };
    }),
    designPagePointList: edges.value.map(e => {
      return {
        activeFlag: '1',
        pageEdgesId: e.id,
        sourceNodeId: e.source,
        targetNodeId: e.target,
        edgeType: e.type,
        targetHandleId: e.targetHandle,
        sourceHandleId: e.sourceHandle
      };
    })
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
  });
  // localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
  //   let data = {};
  //   let savaField = ['customData', 'options'];
  //   Object.keys(e.data).forEach((key) => {
  //     if (savaField.includes(key)) {
  //       data[key] = e.data[key];
  //     } else {
  //       if (Array.isArray(e.data[key])) {
  //         data[key] = [];
  //       } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
  //         data[key] = {};
  //       } else {
  //         data[key] = null;
  //       }
  //
  //     }
  //   });
  //   return {
  //     id: e.id,
  //     name: e.name,
  //     dimensions: e.dimensions,
  //     position: e.position,
  //     type: e.type,
  //     data: data
  //   };
  // })));
  // localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
  //   return {
  //     id: e.id,
  //     source: e.source,
  //     target: e.target,
  //     type: e.type,
  //     animated: e.animated,
  //     markerEnd: e.markerEnd,
  //     targetHandle: e.targetHandle,
  //     sourceHandle: e.sourceHandle,
  //     style: e.style
  //   };
  // })));
};
const clear = () => {
  nodes.value = [{
    id: `area_${uuidv4().replaceAll('-', '_')}`,
    name: 'area',
    type: 'area',
    position: {
      x: 0,
      y: 0
    },
    data: {}
  }];
  edges.value = [];

};
const pageBgUploadSuccess = (file) => {
  const getFileText = (file) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const fileContent = e.target.result;
      console.log(fileContent);
      pageSettingForm.value.bg = fileContent;
    };
    reader.readAsDataURL(file);
  };
  getFileText(file);
  return false;
};
const setPageData = () => {
  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
  localStorage.setItem('PAGEDATA', JSON.stringify(pageData.value));
  pageSettingVisible.value = false;
};
</script>
<style lang="less" scoped>
:deep(.vue-flow__node-area) {
  z-index: -1 !important;
  pointer-events: none !important;
}

:deep(.avatar-uploader) .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader) .el-upload:hover {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.moduleCard {
  width: 80px;
  vertical-align: top;

  :deep(.el-card__body) {
    height: 40px;
    padding: 0 !important;
  }

  .moduleText {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.leftPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  border-right: 1px solid #409EFF;
  overflow: auto;
}

.content {
  position: absolute;
  top: 0;
  left: 300px;
  width: calc(100% - 300px - 300px);
  height: 100%;

  .pageSetting {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #409EFF;
    position: relative;

    .pageTitle {
      line-height: 50px;
      margin-left: 8px;
    }

    .btns {
      position: absolute;
      right: 8px;
      display: inline-block;
      line-height: 50px;

      button {
        vertical-align: inherit;

      }
    }
  }

  .flowArea {
    width: 100%;
    height: calc(100% - 50px);
  }
}

.rightPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  border-left: 1px solid #409EFF;
  overflow: auto;
}

.avatar {
  width: 384px;
  height: 216px
}
</style>

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

</style>
