<template>
  <div class="boardGenerate">
    <div class="top">
      <!--      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>-->
      <div class="componentMenu">
        <el-popover
          :width="880"
          trigger="click"
          placement="bottom-start">
          <template #reference>
            <div style="margin-left: 20px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
                  fill="#ddd" p-id="10516"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <div>
            <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>
                <el-image style="width: 100%; height: 100%" :src="lineImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="multiLinesImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="curveImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="multiCurvesImg" fit="contain" />
              </template>
              <div class="moduleText">多曲线
              </div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'lineBar')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="lineBarImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="barImg" fit="contain" />
              </template>
              <div class="moduleText">柱状图</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'backgroundBar')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="backgroundBarImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="multiBarsImg" fit="contain" />
              </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>
                <el-image style="width: 100%; height: 100%" :src="pieImg" fit="contain" />
              </template>
              <div class="moduleText">饼图</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'annular')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="annularImg" fit="contain" />
              </template>
              <div class="moduleText">中空饼图</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'dashboard')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="dashboardImg" fit="contain" />
              </template>
              <div class="moduleText">仪表盘</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'radar')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="radarImg" fit="contain" />
              </template>
              <div class="moduleText">雷达图</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'nightingaleRoseDiagram')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="nightingaleRoseDiagramImg" fit="contain" />
              </template>
              <div class="moduleText">南丁格尔玫瑰图</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'carousel')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width: 100%; height: 100%" :src="carouselImg" fit="contain" />
              </template>
              <div class="moduleText">轮播图</div>
            </el-card>
          </div>
        </el-popover>
        <el-popover
          :width="620"
          trigger="click"
          placement="bottom-start">
          <template #reference>
            <div style="margin-left: 30px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M108.8 224v576C108.8 902.4 313.6 960 512 960s403.2-57.6 403.2-160v-576C915.2 12.8 108.8 12.8 108.8 224z m742.4 390.4c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V518.4C249.6 563.2 384 588.8 512 588.8s262.4-25.6 339.2-70.4v96z m0-300.8v108.8c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V313.6h6.4c6.4 6.4 12.8 12.8 19.2 12.8h6.4c12.8 6.4 19.2 6.4 32 12.8 19.2 12.8 32 12.8 44.8 19.2 70.4 19.2 147.2 25.6 230.4 25.6s160-6.4 230.4-25.6c12.8-6.4 25.6-6.4 38.4-12.8 12.8-6.4 25.6-6.4 32-12.8h6.4c12.8-6.4 19.2-12.8 32-19.2-6.4 0 0 0 0 0zM512 128c217.6 0 339.2 64 339.2 96S729.6 320 512 320 172.8 256 172.8 224 294.4 128 512 128z m0 768c-217.6 0-339.2-64-339.2-96V704c76.8 44.8 211.2 70.4 339.2 70.4s262.4-25.6 339.2-70.4v89.6c0 38.4-121.6 102.4-339.2 102.4z"
                  fill="#ddd" p-id="22021"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <div>

            <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>
                <div style="width: 100%;height: 100px;text-align: center">

                  <el-image style="width:80px;height: 80px;margin-top: 10px;" :src="mapImg" fit="contain" />
                </div>
              </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>
                <el-image style="width: 100%; height: 100%" :src="customizationRequestImg" fit="contain" />
              </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>-->
            <!--                <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />-->
            <!--              </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>
                  <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />
                </template>
                <div class="moduleText">{{ i.name }}</div>
              </el-card>
            </template>
          </div>
        </el-popover>
        <el-popover
          :width="620"
          trigger="click"
          placement="bottom-start"
        >
          <template #reference>
            <div style="margin-left: 30px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z"
                  fill="#ddd" p-id="23072"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <div>
            <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>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">文字</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'buttonNode')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain" />
                </div>
              </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>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">输入框</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'selectNode')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain" />
                </div>
              </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>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="timeImg" fit="contain" />
                </div>
              </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>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="imgImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">图片</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'icon')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="iconImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">图标</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'video')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="videoImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">视频</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'timeline')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="timelineImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">时间线</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'digitalFlop')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="digitalFlopImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">数字翻牌器</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'table')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
              </template>
              <div class="moduleText">普通表格</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'scrollTable')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">
                  <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">滚动表格</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'background')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="backgroundimg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">背景</div>
            </el-card>
            <el-card class="moduleCard" shadow="never" :draggable="true"
                     @dragstart="onDragStart($event, 'pagination')"
                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                     :body-style="{padding:'4px 0'}">
              <template #header>
                <div style="width: 100%;height: 100%;text-align: center">

                  <el-image style="width:50px;height: 50px;text-align: center" :src="backgroundimg" fit="contain" />
                </div>
              </template>
              <div class="moduleText">分页</div>
            </el-card>
          </div>
        </el-popover>
      </div>
      <div class="optionsMenu">
        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top"
                 @click="pageSetting">
          <Setting />
        </el-icon>
        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="save">
          <DocumentChecked />
        </el-icon>
        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="clear">
          <View />
        </el-icon>
      </div>
    </div>
    <div class="left">
      <div class="title">
        图层
      </div>
      <div class="levels">
        <el-dropdown
          style="min-width: 100%;display: inline-block"
          v-for="i in nodes.filter(e => e.type !== 'area').reverse()"
          :key="i.id"
          trigger="contextmenu"
          @command="nodeOperate">
          <div class="level" :class="{isSelect: i.selected}" @contextmenu.prevent @click="pitchOnNode(i)">
            <!--            <div class="isShow">-->
            <!--              <el-icon style="cursor: pointer" color="#fff" :size="16">-->
            <!--                <View />-->
            <!--              </el-icon>-->
            <!--            </div>-->
            <div class="isLock">
              <el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.draggable = !i.draggable">
                <Unlock v-if="i.draggable" />
                <Lock v-if="!i.draggable" />
              </el-icon>
            </div>
            <div class="icon">
              <svg viewBox="0 0 1024 1024" width="16" height="16" style="margin-left: 10px;">
                <path
                  d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
                  fill="#ddd"
                ></path>
              </svg>
            </div>
            <div class="boardName">
              <span style="display: inline-block;">{{ i.name }}</span>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{ type: 'toTop', node: i }">置顶</el-dropdown-item>
              <el-dropdown-item :command="{ type: 'toBottom', node: i }">置底</el-dropdown-item>
              <el-dropdown-item :command="{ type: 'moveUp', node: i }">上移一层</el-dropdown-item>
              <el-dropdown-item :command="{ type: 'moveDown', node: i }">下移一层</el-dropdown-item>
              <el-dropdown-item :command="{ type: 'copy', node: i }">复制</el-dropdown-item>
              <el-dropdown-item :command="{ type: 'del', node: i }">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="center" @drop="onDrop" v-loading="loading">
      <FlowRuler>
        <VueFlow
          :min-zoom="0.01"
          ref="flowRef"
          :snapToGrid="isSnapToGrid"
          :snapGrid="[10, 10]"
          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" @resize="(e) => handleResizeStop(e, areaNodeProps)" />
          </template>

          <template #node-customBoard="customBoardNodeProps">
            <CustomBoardNode v-bind="customBoardNodeProps" :inputData="getInputData(customBoardNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, customBoardNodeProps)" />
          </template>

          <template #node-customData="customDataNodeProps">
            <CustomDataNode v-bind="customDataNodeProps" :inputData="getInputData(customDataNodeProps.id)"
                            @resize="(e) => handleResizeStop(e, customDataNodeProps)" />
          </template>

          <template #node-line="lineNodeProps">
            <LineNode v-bind="lineNodeProps" :inputData="getInputData(lineNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, lineNodeProps)" />
          </template>

          <template #node-multiLines="multiLinesNodeProps">
            <MultiLinesNode v-bind="multiLinesNodeProps" :inputData="getInputData(multiLinesNodeProps.id)"
                            @resize="(e) => handleResizeStop(e, multiLinesNodeProps)" />
          </template>

          <template #node-curve="curveNodeProps">
            <CurveNode v-bind="curveNodeProps" :inputData="getInputData(curveNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, curveNodeProps)" />
          </template>

          <template #node-multiCurves="multiCurvesNodeProps">
            <MultiCurvesNode v-bind="multiCurvesNodeProps" :inputData="getInputData(multiCurvesNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, multiCurvesNodeProps)" />
          </template>

          <template #node-lineBar="lineBarNodeProps">
            <LineBarNode v-bind="lineBarNodeProps" :inputData="getInputData(lineBarNodeProps.id)"
                         @resize="(e) => handleResizeStop(e, lineBarNodeProps)" />
          </template>

          <template #node-bar="barNodeProps">
            <BarNode v-bind="barNodeProps" :inputData="getInputData(barNodeProps.id)"
                     @resize="(e) => handleResizeStop(e, barNodeProps)" />
          </template>

          <template #node-backgroundBar="backgroundBarNodeProps">
            <BackgroundBarNode v-bind="backgroundBarNodeProps" :inputData="getInputData(backgroundBarNodeProps.id)"
                               @resize="(e) => handleResizeStop(e, backgroundBarNodeProps)" />
          </template>

          <template #node-multiBars="multiBarsNodeProps">
            <MultiBarsNode v-bind="multiBarsNodeProps" :inputData="getInputData(multiBarsNodeProps.id)"
                           @resize="(e) => handleResizeStop(e, multiBarsNodeProps)" />
          </template>

          <template #node-pie="pieNodeProps">
            <PieNode v-bind="pieNodeProps" :inputData="getInputData(pieNodeProps.id)"
                     @resize="(e) => handleResizeStop(e, pieNodeProps)" />
          </template>

          <template #node-annular="annularNodeProps">
            <AnnularNode v-bind="annularNodeProps" :inputData="getInputData(annularNodeProps.id)"
                         @resize="(e) => handleResizeStop(e, annularNodeProps)" />
          </template>

          <template #node-radar="radarNodeProps">
            <RadarNode v-bind="radarNodeProps" :inputData="getInputData(radarNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, radarNodeProps)" />
          </template>

          <template #node-dashboard="dashboardNodeProps">
            <DashboardNode v-bind="dashboardNodeProps" :inputData="getInputData(dashboardNodeProps.id)"
                           @resize="(e) => handleResizeStop(e, dashboardNodeProps)" />
          </template>

          <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
            <NightingaleRoseDiagramNode v-bind="nightingaleRoseDiagramNodeProps"
                                        :inputData="getInputData(nightingaleRoseDiagramNodeProps.id)"
                                        @resize="(e) => handleResizeStop(e, nightingaleRoseDiagramNodeProps)" />
          </template>

          <template #node-carousel="carouselNodeProps">
            <CarouselNode v-bind="carouselNodeProps" :inputData="getInputData(carouselNodeProps.id)"
                          @resize="(e) => handleResizeStop(e, carouselNodeProps)" />
          </template>

          <template #node-data="dataNodeProps">
            <DataNode v-bind="dataNodeProps" :inputData="getInputData(dataNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, dataNodeProps)" />
          </template>

          <template #node-text="textNodeProps">
            <TextNode v-bind="textNodeProps" :inputData="getInputData(textNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, textNodeProps)" />
          </template>

          <template #node-img="imgNodeProps">
            <ImgNode v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
                     @resize="(e) => handleResizeStop(e, imgNodeProps)" />
          </template>

          <template #node-icon="iconNodeProps">
            <IconNode v-bind="iconNodeProps" :inputData="getInputData(iconNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, iconNodeProps)" />
          </template>

          <template #node-video="videoNodeProps">
            <VideoNode v-bind="videoNodeProps" :inputData="getInputData(videoNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, videoNodeProps)" />
          </template>

          <template #node-timeline="timelineNodeProps">
            <TimelineNode v-bind="timelineNodeProps" :inputData="getInputData(timelineNodeProps.id)"
                          @resize="(e) => handleResizeStop(e, timelineNodeProps)" />
          </template>

          <template #node-digitalFlop="digitalFlopNodeProps">
            <DigitalFlopNode v-bind="digitalFlopNodeProps" :inputData="getInputData(digitalFlopNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, digitalFlopNodeProps)" />
          </template>

          <template #node-inputNode="inputNodeProps">
            <InputNode v-bind="inputNodeProps" :inputData="getInputData(inputNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, inputNodeProps)" />
          </template>

          <template #node-buttonNode="buttonNodeProps">
            <ButtonNode v-bind="buttonNodeProps" :inputData="getInputData(buttonNodeProps.id)"
                        @resize="(e) => handleResizeStop(e, buttonNodeProps)" />
          </template>

          <template #node-selectNode="selectNodeProps">
            <SelectNode v-bind="selectNodeProps" :inputData="getInputData(selectNodeProps.id)"
                        @resize="(e) => handleResizeStop(e, selectNodeProps)" />
          </template>

          <template #node-time="timeNodeProps">
            <TimeNode v-bind="timeNodeProps" :inputData="getInputData(timeNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, timeNodeProps)" />
          </template>

          <template #node-map="mapNodeProps">
            <MapNode v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
                     @resize="(e) => handleResizeStop(e, mapNodeProps)" />
          </template>

          <template #node-staticData="staticDataNodeProps">
            <StaticDataNode v-bind="staticDataNodeProps" :inputData="getInputData(staticDataNodeProps.id)"
                            @resize="(e) => handleResizeStop(e, staticDataNodeProps)" />
          </template>

          <template #node-table="tableNodeProps">
            <TableNode v-bind="tableNodeProps" :inputData="getInputData(tableNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, tableNodeProps)" />
          </template>

          <template #node-scrollTable="scrollTableNodeProps">
            <ScrollTableNode v-bind="scrollTableNodeProps" :inputData="getInputData(scrollTableNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, scrollTableNodeProps)" />
          </template>

          <template #node-background="backgroundNodeProps">
            <BackgroundNode v-bind="backgroundNodeProps" :inputData="getInputData(backgroundNodeProps.id)"
                            @resize="(e) => handleResizeStop(e, backgroundNodeProps)" />
          </template>

          <template #node-pagination="paginationNodeProps">
            <PaginationNode v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
                            @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
          </template>
        </VueFlow>

      </FlowRuler>
    </div>
    <div class="right">
      <div class="tabs">
        <div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 0}"
             @click="selectTabs(0)">
          属性设置
        </div>
        <div v-if="Object.keys(nodeAttrForm).length>0" class="tab" :class="{active : tabs === 1}"
             @click="selectTabs(1)">
          样式设置
        </div>
      </div>
      <div class="tabItems">
        <div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 0">
          <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
            <el-form-item label="组件名称">
              <el-input v-model="nodeDataForm.name" style="width: 100%" />
            </el-form-item>
            <el-form-item label="x">
              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ replace: true })" />
            </el-form-item>
          </el-form>
        </div>
        <div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
          <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
            <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
              <el-collapse-item title="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
                <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
                  <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
                </el-form-item>
                <el-form-item label="x轴名称位置" v-if="Object.keys(nodeAttrForm).includes('xNameLocation')">
                  <el-select
                    v-model="nodeAttrForm.xNameLocation"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      label="左侧"
                      value="start"
                    />
                    <el-option
                      label="中心"
                      value="center"
                    />
                    <el-option
                      label="右侧"
                      value="end"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="x轴刻度文字居中" v-if="Object.keys(nodeAttrForm).includes('boundaryGap')">
                  <el-switch v-model="nodeAttrForm.boundaryGap" />
                </el-form-item>
                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('xAxisLineShow')">
                  <el-switch v-model="nodeAttrForm.xAxisLineShow" />
                </el-form-item>
                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLineColor')">
                  <el-color-picker v-model="nodeAttrForm.xAxisLineColor" show-alpha />
                </el-form-item>
                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('xAxisTickShow')">
                  <el-switch v-model="nodeAttrForm.xAxisTickShow" />
                </el-form-item>
                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisTickInside')">
                  <el-switch v-model="nodeAttrForm.xAxisTickInside" />
                </el-form-item>
                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisTickColor')">
                  <el-color-picker v-model="nodeAttrForm.xAxisTickColor" show-alpha />
                </el-form-item>
                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInterval')">
                  <el-switch v-model="nodeAttrForm.xAxisLabelInterval" />
                </el-form-item>
                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInside')">
                  <el-switch v-model="nodeAttrForm.xAxisLabelInside" />
                </el-form-item>
                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelRotate')">
                  <el-slider v-model="nodeAttrForm.xAxisLabelRotate" :min="0" :max="360" />
                </el-form-item>
                <el-form-item label="刻度文字格式化" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFormatter')">
                  <el-input v-model="nodeAttrForm.xAxisLabelFormatter" style="width: 100%" />
                </el-form-item>
                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelColor')">
                  <el-color-picker v-model="nodeAttrForm.xAxisLabelColor" show-alpha />
                </el-form-item>
                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFontSize')">
                  <el-slider v-model="nodeAttrForm.xAxisLabelFontSize" :min="6" :max="36" />
                </el-form-item>
                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelMargin')">
                  <el-slider v-model="nodeAttrForm.xAxisLabelMargin" :min="0" :max="36" />
                </el-form-item>
                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineShow')">
                  <el-switch v-model="nodeAttrForm.xAxisSplitLineShow" />
                </el-form-item>
                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineColor')">
                  <el-color-picker v-model="nodeAttrForm.xAxisSplitLineColor" show-alpha />
                </el-form-item>
                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineType')">
                  <el-select
                    v-model="nodeAttrForm.xAxisSplitLineType"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      label="直线"
                      value="solid"
                    />
                    <el-option
                      label="虚线"
                      value="dashed"
                    />
                    <el-option
                      label="点线"
                      value="dotted"
                    />
                  </el-select>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="y轴设置" name="2" v-if="Object.keys(nodeAttrForm).includes('yName')">
                <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
                  <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
                </el-form-item>
                <el-form-item label="y轴名称位置" v-if="Object.keys(nodeAttrForm).includes('yNameLocation')">
                  <el-select
                    v-model="nodeAttrForm.yNameLocation"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      label="顶部"
                      value="start"
                    />
                    <el-option
                      label="中心"
                      value="center"
                    />
                    <el-option
                      label="底部"
                      value="end"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('yAxisLineShow')">
                  <el-switch v-model="nodeAttrForm.yAxisLineShow" />
                </el-form-item>
                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLineColor')">
                  <el-color-picker v-model="nodeAttrForm.yAxisLineColor" show-alpha />
                </el-form-item>
                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('yAxisTickShow')">
                  <el-switch v-model="nodeAttrForm.yAxisTickShow" />
                </el-form-item>
                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisTickInside')">
                  <el-switch v-model="nodeAttrForm.yAxisTickInside" />
                </el-form-item>
                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisTickColor')">
                  <el-color-picker v-model="nodeAttrForm.yAxisTickColor" show-alpha />
                </el-form-item>
                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInterval')">
                  <el-switch v-model="nodeAttrForm.yAxisLabelInterval" />
                </el-form-item>
                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInside')">
                  <el-switch v-model="nodeAttrForm.yAxisLabelInside" />
                </el-form-item>
                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelRotate')">
                  <el-slider v-model="nodeAttrForm.yAxisLabelRotate" :min="0" :max="360" />
                </el-form-item>
                <el-form-item label="刻度文字内容格式" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFormatter')">
                  <el-input v-model="nodeAttrForm.yAxisLabelFormatter" style="width: 100%" />
                </el-form-item>
                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelColor')">
                  <el-color-picker v-model="nodeAttrForm.yAxisLabelColor" show-alpha />
                </el-form-item>
                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFontSize')">
                  <el-slider v-model="nodeAttrForm.yAxisLabelFontSize" :min="6" :max="36" />
                </el-form-item>
                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelMargin')">
                  <el-slider v-model="nodeAttrForm.yAxisLabelMargin" :min="0" :max="36" />
                </el-form-item>
                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineShow')">
                  <el-switch v-model="nodeAttrForm.yAxisSplitLineShow" />
                </el-form-item>
                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineColor')">
                  <el-color-picker v-model="nodeAttrForm.yAxisSplitLineColor" show-alpha />
                </el-form-item>
                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineType')">
                  <el-select
                    v-model="nodeAttrForm.yAxisSplitLineType"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      label="直线"
                      value="solid"
                    />
                    <el-option
                      label="虚线"
                      value="dashed"
                    />
                    <el-option
                      label="点线"
                      value="dotted"
                    />
                  </el-select>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="边距设置" name="3" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
                <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
                  <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
                  <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
                  <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
                  <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="表格设置" name="4" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
                <el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
                  <el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
                    配置表格
                  </el-button>
                </el-form-item>
                <el-form-item label="单元格设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
                  <el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
                    配置表格
                  </el-button>
                </el-form-item>
                <el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
                  <el-switch v-model="nodeAttrForm.isThShow" />
                </el-form-item>
                <el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
                  <el-button class="optionsBtn" plain @click="tableClassOptionsVisible = true">
                    配置动画
                  </el-button>
                </el-form-item>
                <el-form-item label="表头高度" v-if="Object.keys(nodeAttrForm).includes('thHeight')">
                  <el-input v-model="nodeAttrForm.thHeight" style="width: 100%" />
                </el-form-item>
                <el-form-item label="行高度" v-if="Object.keys(nodeAttrForm).includes('tdHeight')">
                  <el-input v-model="nodeAttrForm.tdHeight" style="width: 100%" />
                </el-form-item>
                <el-form-item label="表头文字颜色" v-if="Object.keys(nodeAttrForm).includes('thColor')">
                  <el-color-picker v-model="nodeAttrForm.thColor" show-alpha />
                </el-form-item>
                <el-form-item label="行文字颜色" v-if="Object.keys(nodeAttrForm).includes('tdColor')">
                  <el-badge value="99" class="item" :offset="[-8,0]"
                            v-for="(i,k) in nodeAttrForm.tdColor">
                    <el-color-picker style="margin-right: 4px;" v-model="nodeAttrForm.tdColor[k]" show-alpha />
                    <template #content>
                      <div class="custom-content" @click="nodeAttrForm.tdColor.splice(k, 1)">
                        <el-icon>
                          <Close />
                        </el-icon>
                      </div>
                    </template>
                  </el-badge>
                  <el-button :icon="Plus" @click="nodeAttrForm.tdColor.push('#fff')" />
                </el-form-item>
                <el-form-item label="表头背景颜色" v-if="Object.keys(nodeAttrForm).includes('thBgColor')">
                  <el-color-picker v-model="nodeAttrForm.thBgColor" show-alpha />
                </el-form-item>
                <el-form-item label="行背景颜色" v-if="Object.keys(nodeAttrForm).includes('tdBgColor')">
                  <el-badge value="99" class="item" :offset="[-8,0]"
                            v-for="(i,k) in nodeAttrForm.tdBgColor">
                    <el-color-picker style="margin-right: 8px;"
                                     v-model="nodeAttrForm.tdBgColor[k]" show-alpha />
                    <template #content>
                      <div class="custom-content" @click="nodeAttrForm.tdBgColor.splice(k, 1)">
                        <el-icon>
                          <Close />
                        </el-icon>
                      </div>
                    </template>
                  </el-badge>
                  <el-button :icon="Plus" @click="nodeAttrForm.tdBgColor.push('#fff')" />
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="通用设置" name="5">
                <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('number')">
                  <el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number"
                                   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('pageSizeField')">
                  <el-input v-model="nodeAttrForm.pageSizeField" />
                </el-form-item>
                <el-form-item label="当前页字段" v-if="Object.keys(nodeAttrForm).includes('currentPageField')">
                  <el-input v-model="nodeAttrForm.currentPageField" />
                </el-form-item>
                <el-form-item label="时间戳字段名" v-if="Object.keys(nodeAttrForm).includes('timestampField')">
                  <el-input v-model="nodeAttrForm.timestampField" />
                </el-form-item>
                <el-form-item label="是否显示时间戳" v-if="Object.keys(nodeAttrForm).includes('isTimestamp')">
                  <el-switch v-model="nodeAttrForm.isTimestamp" />
                </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-button class="optionsBtn" plain @click="mapOptionsVisible = true">
                    配置数据映射
                  </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('backgroundColor')">
                  <el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
                </el-form-item>
                <el-form-item label="背景图" v-if="Object.keys(nodeAttrForm).includes('backgroundImage')">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadFileUrl"
                    :show-file-list="false"
                    :limit="1"
                    accept=".jpg,.png"
                    :headers="headers"
                    :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
                  >
                    <img v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage" class="avatar"  alt=""/>
                    <el-icon v-else class="avatar-uploader-icon">
                      <Plus />
                    </el-icon>
                  </el-upload>
                </el-form-item>
                <el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
                  <el-switch v-model="nodeAttrForm.isBorder" />
                </el-form-item>
                <el-form-item label="边框颜色"
                              v-if="Object.keys(nodeAttrForm).includes('borderColor') && nodeAttrForm.isBorder">
                  <el-color-picker v-model="nodeAttrForm.borderColor" show-alpha />
                </el-form-item>
                <el-form-item label="时间戳颜色" v-if="Object.keys(nodeAttrForm).includes('timestampColor')">
                  <el-color-picker v-model="nodeAttrForm.timestampColor" 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('icon')">
                  <el-popover
                    placement="bottom"
                    :width="400"
                    trigger="click"
                  >
                    <template #reference>
                      <el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
                        <template #prepend>
                          <el-button style="background-color: #0000">
                            <template #icon>
                              <el-icon class="el-icon--right" color="#fff">
                                <component :is="icon[nodeAttrForm.icon]" />
                              </el-icon>
                            </template>
                          </el-button>
                        </template>
                      </el-input>
                    </template>
                    <el-input v-model="selectIconInput" style="width: 100%" placeholder="筛选图标" />
                    <div style="height: 50vh;overflow-y: auto">
                      <!--                  <el-tooltip-->
                      <!--                    class="box-item"-->
                      <!--                    effect="dark"-->
                      <!--                    :content="i"-->
                      <!--                    placement="bottom"-->
                      <!--                    v-for="i in icons.filter(e=>e.includes(selectIconInput))"-->
                      <!--                  >-->
                      <el-button :icon="icon[i]" @click="nodeAttrForm.icon = i"
                                 :type="nodeAttrForm.icon === i ? 'primary':''"
                                 v-for="i in icons.filter(e=>e.includes(selectIconInput))"
                                 style="margin-top: 4px;margin-left: 0;margin-right: 4px;" />
                      <!--                  </el-tooltip>-->
                    </div>
                  </el-popover>
                </el-form-item>
                <el-form-item label="图标路径" v-if="Object.keys(nodeAttrForm).includes('iconSrc')">
                  <el-input v-model="nodeAttrForm.iconSrc" style="width: 100%" />
                </el-form-item>
                <el-form-item label="视频路径" v-if="Object.keys(nodeAttrForm).includes('videoSrc')">
                  <el-input v-model="nodeAttrForm.videoSrc" 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="-1"
                    :step="1"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
                  <el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
                </el-form-item>
                <el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
                  <el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
                </el-form-item>
                <el-form-item label="图例颜色" v-if="Object.keys(nodeAttrForm).includes('legendColor')">
                  <el-color-picker v-model="nodeAttrForm.legendColor" show-alpha />
                </el-form-item>
                <el-form-item label="饼图标签" v-if="Object.keys(nodeAttrForm).includes('label')">
                  <el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
                </el-form-item>
                <el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
                  <el-button class="optionsBtn" plain @click="swiperOptionsVisible = true">
                    配置轮播图
                  </el-button>
                </el-form-item>
                <el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
                  <el-select
                    effect="dark"
                    v-model="nodeAttrForm.imageFit"
                    style="width: 100%"
                  >
                    <el-option
                      label="填充满"
                      value="fill"
                    />
                    <el-option
                      label="固定比例"
                      value="contain"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="图片集" v-if="Object.keys(nodeAttrForm).includes('carouselImages')">
                  <el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
                </el-form-item>
                <el-form-item label="默认数据" v-if="Object.keys(nodeAttrForm).includes('defaultDataType')">
                  <el-select
                    clearable
                    effect="light"
                    v-model="nodeAttrForm.defaultDataType"
                    style="width: 100%"
                  >
                    <el-option
                      label="单折线数据"
                      value="line"
                    />
                    <el-option
                      label="单曲线数据"
                      value="curve"
                    />
                    <el-option
                      label="单柱状图数据"
                      value="bar"
                    />
                    <el-option
                      label="多折线数据"
                      value="multiLines"
                    />
                    <el-option
                      label="多曲线数据"
                      value="multiCurves"
                    />
                    <el-option
                      label="多柱状图数据"
                      value="multiBars"
                    />
                    <el-option
                      label="饼图数据"
                      value="pie"
                    />
                    <el-option
                      label="仪表盘数据"
                      value="dashboard"
                    />
                    <el-option
                      label="雷达图数据"
                      value="radar"
                    />
                    <el-option
                      label="轮播图数据"
                      value="carousel"
                    />
                    <el-option
                      label="图片数据"
                      value="image"
                    />
                    <el-option
                      label="视频数据"
                      value="video"
                    />
                    <el-option
                      label="时间线数据"
                      value="timeline"
                    />
                    <el-option
                      label="翻牌器数据"
                      value="digitalFlop"
                    />
                    <el-option
                      label="表格数据"
                      value="table"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="图表颜色" v-if="Object.keys(nodeAttrForm).includes('seriesColor')">
                  <el-color-picker v-model="nodeAttrForm.seriesColor" show-alpha />
                </el-form-item>
                <el-form-item label="饼图标签格式" v-if="Object.keys(nodeAttrForm).includes('pieLabelFormatter')">
                  <el-input v-model="nodeAttrForm.pieLabelFormatter" style="width: 100%" />
                </el-form-item>
                <el-form-item label="饼图中心位置" v-if="Object.keys(nodeAttrForm).includes('pieCenter')">
                  <el-slider v-model="nodeAttrForm.pieCenter" :min="0" :max="100" />
                </el-form-item>
                <el-form-item label="饼图半径" v-if="Object.keys(nodeAttrForm).includes('pieRadius')">
                  <el-slider v-model="nodeAttrForm.pieRadius" :min="0" :max="100" range />
                </el-form-item>
                <el-form-item label="发送脉冲类型" v-if="Object.keys(nodeAttrForm).includes('sendType')">
                  <el-select
                    multiple
                    v-model="nodeAttrForm.sendType"
                    placeholder="Select"
                    style="width: 100%"
                  >
                    <el-option
                      label="确定"
                      value="ok"
                    />
                    <el-option
                      label="重置"
                      value="reset"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="js脚本设置">
                  <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </div>
    </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="uploadFileUrl"
            :show-file-list="false"
            :limit="1"
            accept=".jpg,.png"
            :headers="headers"
            :on-success="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>
    <el-dialog v-model="tableOptionsVisible" title="表格设置" width="950">
      <el-table :data="nodeAttrForm.tableOptions">
        <el-table-column label="列名称" width="150">
          <template #default="scope">
            <el-input v-model="scope.row.name" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="数据字段" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.field" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="列宽">
          <template #default="scope">
            <el-input v-model="scope.row.width" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="对齐方式">
          <template #default="scope">
            <el-select
              v-model="scope.row.align"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                label="左对齐"
                value="left"
              />
              <el-option
                label="居中"
                value="center"
              />
              <el-option
                label="右对齐"
                value="right"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template #default="scope">
            <el-select
              v-model="scope.row.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                label="文本"
                value="文本"
              />
              <el-option
                label="标签"
                value="标签"
              />
              <el-option
                label="进度条"
                value="进度条"
              />
              <el-option
                label="图片"
                value="图片"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="计算公式" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.formula" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button :icon="Delete" circle @click="nodeAttrForm.tableOptions.splice(scope.$index, 1)" />
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
      </el-button>
    </el-dialog>
    <el-dialog v-model="tableCellOptionsVisible" title="单元格设置" width="100%">
      {{ (getInputData(nodeDataForm.id) || {}).tableData }}
      <el-table
        :data="(getInputData(nodeDataForm.id)||{}).tableData"
        style="--el-table-border-color:#000"
        :border="true"
        :header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
        :header-row-style="{height:nodeAttrForm.thHeight }"
        :show-header="nodeAttrForm.isThShow"
        :style="{height: '100%'}"
      >
        <el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
                         :label="i.name"
                         :width="i.width">
          <template #default="scope">
            <div @click.stop="cellClick(scope)">
              <span
                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                }}</span>
              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
              </el-tag>
              <el-image :preview-src-list="[scope.row[i.field]]"
                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
                        :style="{height:nodeAttrForm.tdHeight}"
                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k + 1}`] || i.formula))"
                        fit="contain" />
              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
                           :stroke-width="26"
                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)))" />
              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
      <el-form :model="cellOption" label-width="auto">
        <el-form-item label="类型">
          <el-select
            @change="cellTypeChange"
            v-model="cellOption.type"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              label="文本"
              value="文本"
            />
            <el-option
              label="标签"
              value="标签"
            />
            <el-option
              label="进度条"
              value="进度条"
            />
            <el-option
              label="图片"
              value="图片"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计算公式">
          <el-input @change="cellFormulaChange" v-model="cellOption.formula" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cellOptionsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
      <el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
        <el-form-item label="滚动速度">
          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.step" autocomplete="off" />
        </el-form-item>
        <el-form-item label="开启滚动的数据量">
          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.limitMoveNum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="鼠标悬停停止">
          <el-switch v-model="nodeAttrForm.tableClassOption.hoverStop" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tableClassOptionsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="swiperOptionsVisible" title="轮播设置" width="500">
      <el-form v-if="swiperOptionsVisible" :model="nodeAttrForm.swiperOptions" label-width="auto">
        <el-form-item label="自动播放">
          <el-switch v-model="nodeAttrForm.swiperOptions.autoplay" />
        </el-form-item>
        <el-form-item label="切换间隔">
          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.delay" autocomplete="off" />
        </el-form-item>
        <el-form-item label="鼠标悬停停止">
          <el-switch v-model="nodeAttrForm.swiperOptions.pauseOnMouseEnter" />
        </el-form-item>
        <el-form-item label="过渡时间">
          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.speed" autocomplete="off" />
        </el-form-item>
        <el-form-item label="循环播放">
          <el-switch v-model="nodeAttrForm.swiperOptions.loop" />
        </el-form-item>
        <el-form-item label="显示导航按钮">
          <el-switch v-model="nodeAttrForm.swiperOptions.navigation" />
        </el-form-item>
        <el-form-item label="动画效果">
          <el-select
            v-model="nodeAttrForm.swiperOptions.effect"
            style="width: 100%"
          >
            <el-option
              label="默认"
              value="slide"
            />
            <el-option
              label="淡入淡出"
              value="fade"
            />
            <el-option
              label="立方体"
              value="cube"
            />
            <el-option
              label="翻转"
              value="flip"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="swiperOptionsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="mapOptionsVisible" title="数据映射" width="500">
      <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>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="mapOptionsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import backgroundBarImg from './images/backgroundBarImg.png';
import pieImg from './images/pieImg.png';
import multiCurvesImg from './images/multiCurvesImg.png';
import lineBarImg from './images/lineBarImg.png';
import multiLinesImg from './images/multiLinesImg.png';
import multiBarsImg from './images/multiBarsImg.png';
import annularImg from './images/annularImg.png';
import radarImg from './images/radarImg.png';
import carouselImg from './images/carouselImg.png';
import network from './images/network.png';
import nightingaleRoseDiagramImg from './images/nightingaleRoseDiagramImg.png';
import curveImg from './images/curveImg.png';
import dashboardImg from './images/dashboardImg.png';
import lineImg from './images/lineImg.png';
import barImg from './images/barImg.png';
import customizationRequestImg from './images/customizationRequestImg.png';
import mapImg from './images/mapImg.png';
import backgroundimg from './images/backgroundimg.png';
import scrollTableImg from './images/scrollTableImg.png';
import timeImg from './images/timeImg.png';
import timelineImg from './images/timelineImg.png';
import videoImg from './images/videoImg.png';
import inputNodeImg from './images/inputNodeImg.png';
import digitalFlopImg from './images/digitalFlopImg.png';
import iconImg from './images/iconImg.png';
import imgImg from './images/imgImg.png';
import textImg from './images/textImg.png';

import FlowRuler from './FlowRuler.vue';
import * as icon from '@element-plus/icons-vue';
import { ArrowDown, Close, Delete, DocumentChecked, Lock, Plus, Setting, Unlock, View } from '@element-plus/icons-vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import tool, { options } from '@/views/boardGenerate/tool.js';
import { v4 as uuidv4 } from 'uuid';
import { Background } from '@vue-flow/background';
import CarouselNode from '@/views/boardGenerate/nodes/board/carouselNode.vue';
import CustomBoardNode from '@/views/boardGenerate/nodes/board/customBoardNode.vue';
import DataNode from '@/views/boardGenerate/nodes/data/dataNode.vue';
import ImgNode from '@/views/boardGenerate/nodes/form/imgNode.vue';
import TimelineNode from '@/views/boardGenerate/nodes/form/timelineNode.vue';
import ScrollTableNode from '@/views/boardGenerate/nodes/form/scrollTableNode.vue';
import BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
import PaginationNode from '@/views/boardGenerate/nodes/form/paginationNode.vue';

import TextNode from '@/views/boardGenerate/nodes/form/textNode.vue';
import CurveNode from '@/views/boardGenerate/nodes/board/curveNode.vue';
import PieNode from '@/views/boardGenerate/nodes/board/pieNode.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 LineNode from '@/views/boardGenerate/nodes/board/lineNode.vue';
import MultiLinesNode from '@/views/boardGenerate/nodes/board/multiLinesNode.vue';
import BackgroundBarNode from '@/views/boardGenerate/nodes/board/backgroundBarNode.vue';
import MultiCurvesNode from '@/views/boardGenerate/nodes/board/multiCurvesNode.vue';
import LineBarNode from '@/views/boardGenerate/nodes/board/lineBarNode.vue';
import DigitalFlopNode from '@/views/boardGenerate/nodes/form/digitalFlopNode.vue';
import NightingaleRoseDiagramNode from '@/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue';
import IconNode from '@/views/boardGenerate/nodes/form/iconNode.vue';
import InputNode from '@/views/boardGenerate/nodes/form/inputNode.vue';
import ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.vue';
import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';

import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
import TableNode from '@/views/boardGenerate/nodes/form/tableNode.vue';
import MultiBarsNode from '@/views/boardGenerate/nodes/board/multiBarsNode.vue';
import VideoNode from '@/views/boardGenerate/nodes/form/videoNode.vue';
import BarNode from '@/views/boardGenerate/nodes/board/barNode.vue';
import CustomDataNode from '@/views/boardGenerate/nodes/data/customDataNode.vue';
import AreaNode from '@/views/boardGenerate/nodes/other/areaNode.vue';
import StaticDataNode from '@/views/boardGenerate/nodes/data/staticDataNode.vue';
import MapNode from '@/views/boardGenerate/nodes/form/mapNode.vue';
import { getDataSourceList } from '@/views/boardGenerate/api/dataSource.js';
import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList.js';
import { globalHeaders } from '@/utils/request.ts';

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
const headers = ref(globalHeaders());
const { onDragStart, onDrop, onDragOver } = tool();
const router = useRouter();

const isSnapToGrid = ref(true);
const toggleSnapToGrid = (e) => {
  if (e.key === 'Alt') {
    isSnapToGrid.value = false;
  }
};
const keyup = () => {
  isSnapToGrid.value = true;
};
window.addEventListener('keydown', toggleSnapToGrid);
window.addEventListener('keyup', keyup);
const {
  addEdges,
  updateNode,
  removeNodes,
  addNodes
} = useVueFlow();

const gridSize = 200;

const handleResizeStop = (event, node) => {
  if (event.altKey) return;

  const snappedWidth = Math.round(node.width / gridSize) * gridSize;
  const snappedHeight = Math.round(node.height / gridSize) * gridSize;

  updateNode(node.id, {
    style: {
      width: `${snappedWidth}px`,
      height: `${snappedHeight}px`
    }
  });
};

onMounted(async () => {
  icons.value = Object.keys(icon);
  loading.value = true;
  getDataSourceList({
    pageNum: 1,
    pageSize: 9999999
  })
    .then((res) => {
      customData.value = res.rows.map(e => {
        return {
          name: e.dataSourceName,
          url: e.requestUrl,
          method: e.requestMethod,
          outputData: e.designDataFieldList,
          type: e.responseType,
          db: e.fieldOne,
          SQL: e.fieldTwo,
          isPage: e.fieldThree === 'true'
        };
      });
    })
  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?.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,
          draggable: e.fieldTwo === 'true',
          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(data.customContent) || {};
    })
    .finally(() => {

      loading.value = false;
    });
});
const icons = ref([]);
const selectIconInput = ref('');
const collapseActiveName = ref('1');
const loading = ref(false);
const pageSettingVisible = ref(false);
const tableCellOptionsVisible = ref(false);
const cellOptionsVisible = ref(false);
const tableOptionsVisible = ref(false);
const tableClassOptionsVisible = ref(false);
const swiperOptionsVisible = ref(false);
const mapOptionsVisible = ref(false);
const tabs = ref(0);
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 cellOption = ref({});
const boardData = ref({});
const pageData = ref({});
const customDataForm = ref({});
const nodeAttrForm = ref({});
const nodeDataForm = ref({});
const pageSettingForm = 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;
      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':
  }
};
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 selectTabs = (e) => {
  tabs.value = e;
};
const setPageData = () => {
  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
  pageSettingVisible.value = false;
};

const pageSetting = () => {
  pageSettingVisible.value = true;
  pageSettingForm.value = pageData.value;
};
const save = () => {
  loading.value = true;
  editBoardApi({
    ...boardData.value,
    customContent: JSON.stringify(pageSettingForm.value),
    designPagePointList: nodes.value.map((e, index) => {
      let data = {};
      let savaField = ['customData', 'options', 'isLock'];
      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;
          }
        }
      });
      if (e.type === 'area') {
        return {
          activeFlag: '1',
          pageConfigId: boardData.value.pageConfigId,
          pagePointId: e.id,
          pagePointName: e.name,
          fieldOne: index,
          fieldTwo: e.draggable,
          width: e.dimensions.width || '',
          height: e.dimensions.height || '',
          posX: e.position.x,
          posY: e.position.y,
          pointType: e.type,
          dataContent: JSON.stringify(data)
        };
      } else {
        return {
          activeFlag: '1',
          pageConfigId: boardData.value.pageConfigId,
          pagePointId: e.id,
          pagePointName: e.name,
          fieldOne: index,
          fieldTwo: e.draggable,
          width: e.dimensions.width || '',
          height: e.dimensions.height || '',
          posX: e.position.x,
          posY: e.position.y,
          pointType: e.type,
          dataContent: JSON.stringify(data)
        };
      }
    }),
    designPageEdgesList: edges.value.map(e => {
      return {
        activeFlag: '1',
        pageConfigId: boardData.value.pageConfigId,
        pageEdgesId: e.id,
        sourceNodeId: e.source,
        targetNodeId: e.target,
        edgeType: e.type,
        targetHandleId: e.targetHandle,
        sourceHandleId: e.sourceHandle
      };
    })
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
  })
    .finally(() => {
      loading.value = false;
    });
  // 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 = (res) => {
  if (res.code === 200) {
    pageSettingForm.value.bg = res.data.url;
  }
};
const nodeOperate = (data) => {
  let type = data.type;
  const index = nodes.value.indexOf(data.node);
  let arr = JSON.parse(JSON.stringify(nodes.value));
  const item = arr[index];
  switch (type) {
    case 'toTop':
      nodes.value = [...nodes.value.filter(e => e.id !== data.node.id), data.node];
      break;
    case 'toBottom':
      nodes.value = [data.node, ...nodes.value.filter(e => e.id !== data.node.id)];
      break;
    case 'moveUp':
      arr.splice(index, 1);
      arr.splice(index + 1, 0, item);
      nodes.value = arr;
      break;
    case 'moveDown':
      arr.splice(index, 1);
      arr.splice(index - 1, 0, item);
      nodes.value = arr;
      break;
    case 'copy':
      item.id = options.getId(item.type);
      addNodes(item);
      break;
    case 'del':
      removeNodes([data.node.id]);
      break;
  }
};
const pitchOnNode = (e) => {
  nodes.value.forEach(v => {
    if (v.id === e.id) {
      v.selected = true;
    } else {
      v.selected = false;
    }
  });
  nodeAttrForm.value = e.data.options;
  nodeDataForm.value = e;
  customDataForm.value = e.data.customData;
};

const cellClick = (e) => {
  let option = (nodeAttrForm.value.tableCellOptions || []).find(v => v.index === e.$index && v.cellIndex === e.cellIndex) || {};
  console.log(e);
  cellOption.value = {
    ...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
    $index: e.$index,
    $cellIndex: e.cellIndex,
    formula: option.formula,
    type: option.type
  };
  cellOptionsVisible.value = true;
};

const cellTypeChange = (value) => {
  if (!nodeAttrForm.value.tableCellOptions) {
    nodeAttrForm.value.tableCellOptions = [];
  }
  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
  option.type = cellOption.value.type;
  if (index === -1) {
    nodeAttrForm.value.tableCellOptions.push({
      index: cellOption.value.$index,
      cellIndex: cellOption.value.$cellIndex,
      type: value,
      formula: cellOption.value.formula
    });
  } else {
    nodeAttrForm.value.tableCellOptions[index].type = value;
  }
};

const cellFormulaChange = (value) => {
  if (!nodeAttrForm.value.tableCellOptions) {
    nodeAttrForm.value.tableCellOptions = [];
  }
  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
  option.formula = cellOption.value.formula;
  if (index === -1) {
    nodeAttrForm.value.tableCellOptions.push({
      index: cellOption.value.$index,
      cellIndex: cellOption.value.$cellIndex,
      type: cellOption.value.type,
      formula: value
    });
  } else {
    nodeAttrForm.value.tableCellOptions[index].formula = value;
  }

};

const formulaFun = (row, formula) => {
  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
    if (key === 'tableData') {
      return key;
    }
    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
      return row[key] || 0;
    } else {
      return `"${row[key]}"`;
    }
  });
  let res = 0;
  try {
    const fun = new Function('tableData', `return ${data}`);
    res = fun((getInputData(nodeDataForm.value.id) || {}).tableData);
  } catch (err) {
    res = 0;
  }
  if (`${res}`.trim() !== '' && !isNaN(res)) {
    res = res.toFixed(2);
  }
  return res;
};
const setText = (value, row, formula) => {
  if (!formula) {
    return value;
  } else {
    return formulaFun(row, formula);
  }
};
</script>
<style scoped lang="less">

:deep(.swiper-slide-active) {
  pointer-events: none;
}

:deep(.vue-flow__node-area) {
  z-index: -1 !important;
  pointer-events: none !important;
}


.custom-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.boardGenerate {
  width: 100%;
  height: 100%;
  overflow: hidden;
  --boardGenerateTopHeight: 50px;

  .top {
    width: 100%;
    height: var(--boardGenerateTopHeight);
    background-color: #1C1F20;
    border-bottom: 1px solid #000;
    position: relative;

    .componentMenu {
      display: inline-block;
    }

    .optionsMenu {
      vertical-align: top;
      display: inline-block;
      position: absolute;
      right: 20px;
    }
  }

  .left {
    width: 200px;
    display: inline-block;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;
    background-color: #1C1F20;
    border-right: 1px solid #000;

    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #FFF;
      background-color: #293133;
      border-bottom: 1px solid #000;
    }

    .levels {
      width: 100%;
      height: calc(100% - 50px);
      overflow: auto;
      background-color: #1C1F20;

      &::-webkit-scrollbar {
        display: none;
      }

      .level {

        display: flex;
        align-items: center;
        height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #000;

        .isShow, .icon, .boardName {
          display: flex;
          align-items: center;
        }

        .isShow {
          width: 30px;
          min-width: 30px;
          height: 50px;
          border-right: 1px solid #000;
        }

        .icon {
          width: 40px;
          min-width: 40px;
        }

        .boardName {
          font-size: 14px;
          color: #fff;
        }
      }


      .isSelect {
        background-color: #494949;

        .isShow {
          border-right: 1px solid #373737;
        }
      }
    }

  }

  .center {
    width: calc(100% - 500px);
    display: inline-block;
    background-color: #1C1F20;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;


    /deep/ .vue-flow__resize-control {
      background-color: #409EFF !important;
      border: 1px solid white;

      .handle {
        background-color: #409EFF !important;
      }
    }

  }

  .right {
    width: 300px;
    display: inline-block;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;
    background-color: #1C1F20;
    border-left: 1px solid #000;

    .tabs {
      display: flex;
      border-bottom: 1px solid black;
      background-color: #1C1F20;

      .tab {
        padding: 8px 16px;
        font-size: 14px;
        background: transparent;
        cursor: pointer;
        color: #ccc;
      }

      .tab.active {
        background: #222;
        color: #fff;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        position: relative;
        top: 1px;
        z-index: 1;
      }
    }

    .tabItems {
      width: 100%;
      height: calc(100% - 50px);
      background-color: #222;

      .tabItem {
        .el-collapse {
          border: none;

          :deep(.el-collapse-item) {
            .el-collapse-item__header {
              background-color: #0000;
              color: #ccc;
              border: none;
            }

            .el-collapse-item__wrap {
              background-color: #0000;
              border: none;
            }
          }

        }

        :deep(.el-form-item__label) {
          color: #ccc;
        }

        :deep(.el-input__wrapper) {
          background: #222;
          border-color: #333;
          box-shadow: 0 0 0 1px #666 inset;

          .el-input__inner {
            color: #ccc;
          }
        }

        :deep(.el-input-number__decrease) {
          background-color: #666;
          border: none;
          color: #ccc;
        }

        :deep(.el-input-number__increase) {
          background-color: #666;
          border: none;
          color: #ccc;
        }

        :deep(.el-input-tag) {
          background: #222;
          border-color: #333;
          box-shadow: 0 0 0 1px #666 inset;

          .el-input-tag__inner {
            .el-tag {
              background-color: #666;
              color: #ccc;
            }
          }
        }

        :deep(.el-switch__label) {
          color: #ccc;

          &.is-active {
            color: var(--el-color-primary);
          }
        }

        :deep(.el-input-group__prepend) {
          background-color: #0000;
          border: 1px solid #666;
          box-shadow: none;
        }

        .optionsBtn {
          background-color: #0000;
          border-color: #ccc;
          color: #ccc;
        }

        :deep(.el-select__wrapper) {
          background-color: #666;
          border: none;
          color: #ccc;

          .el-select__placeholder {
            color: #ccc;
          }
        }

        :deep(.el-textarea__inner) {
          background-color: #0000;
          border: none;
          color: #ccc;
          box-shadow: 0 0 0 1px #666 inset;
        }

        :deep(.el-table) {

        }
      }
    }

  }
}

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

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

  :deep(.el-card__header) {
    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;
  }
}
</style>
<style>


</style>
