<template>
  <div id="sand-edit-container" class="sand-edit-container">
    <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="sand-toolbar" v-show="!isSlideLeft">
      <span class="slide-icon slide-left" @click="slideHandle">
        <i class="el-icon-d-arrow-left"></i>
      </span>
      <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
        <el-tab-pane label="元素库" name="元素库" id="element">
          <div class="sand-elements-tab">
            <div class="sand-elements sand-elements-line">
              <span>线条</span>
              <div class="elements-row" >
                <img src="~@/assets/img/sand_new/no-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('noArrowStraight',$event)" />
                <img src="~@/assets/img/sand_new/single-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('singleArrowStraight',$event)" />
                <img src="~@/assets/img/sand_new/double-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowStraight',$event)"/>
                <img src="~@/assets/img/sand_new/no-arrow.png" :draggable="true" @dragstart="edgeDragStart('noArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/single-arrow.png" :draggable="true" @dragstart="edgeDragStart('singleArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/double-arrow.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/no-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('noArrowRoundBend',$event)"/>
                <img src="~@/assets/img/sand_new/single-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('singleArrowRoundBend',$event)"/>
                <img src="~@/assets/img/sand_new/double-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowRoundBend',$event)"/>
              </div>
            </div>
            <div class="sand-elements sand-elements-shape">
              <span>基本形状</span>
              <div class="elements-row">
                <div class="elements-shape-item" v-for="shape in myNodes" :key="shape.key">
                  <div 
                    :style="shape.styles" 
                    @mousedown="dragStart(shape,$event)">
                    {{shape.label}}
                  </div>
                </div>
              </div>
            </div>
            <div class="sand-elements sand-elements-mind">
              <span>思维导图</span>
              <div class="elements-row-mind">
                <img src="~@/assets/img/sand_new/mindmap-right.png" :draggable="true" @dragstart="edgeDragStart('singleMindmap',$event)"/>
                <img src="~@/assets/img/sand_new/mindmap-double.png" :draggable="true" @dragstart="edgeDragStart('doubleMindmap',$event)"/>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="风格" name="风格" id="style">
          <div class="sand-style-tab">
            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-blue-light.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==2?'active':''" @click="changeStyle(2)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-blue.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==3?'active':''" @click="changeStyle(3)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-black.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==4?'active':''" @click="changeStyle(4)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-red.png" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="sand-main">
      <div class="sand-main-top">
        <div class="sand-mainTop-form">
          <el-input
            v-model="sandSaveParams.Name"
            style="width: 240px; margin-right: 20px"
            placeholder="请输入逻辑图名称">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-cascader 
            ref="classifyIdRef"
            :options="treeData"
            :props="{children: 'Children',
              label: 'SandboxClassifyName',
                value: 'SandboxClassifyId',emitPath:false,checkStrictly:true}"
            v-model="sandSaveParams.SandboxClassifyId" 
            placeholder="请选择分类">
          </el-cascader>
        </div>
        <div class="sand-mainTop-option">
          <!-- <div class="sand-option-linkShow">
            <img src="~@/assets/img/sand_new/eye-show-black.png" />
            <span>链接展示</span>
          </div> -->
          <el-button size="large" type="primary" plain @click="backList" style="margin-right: 20px;min-width: 120px;"
          v-if="$route.query.SandboxId">返回</el-button>
          <el-button size="large" type="primary" plain @click="copySandHandle" style="margin-right: 20px;min-width: 120px;"
          v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制图片</el-button>
          <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
        </div>
      </div>
      <div class="sand-mainBody-chart" id="sand-mainBody-chart">
        <div class="sand-mainBody-tool" id="sand-mainBody-tool">
          <el-tooltip content="撤销（Ctrl+Z）" placement="top" :open-delay="250">
            <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')" 
            class="sand-tool-item"  @click="toolClickOptions('undo',!canUndo)" :class="canUndo?'':'tool-disabled'"/>
          </el-tooltip>
          <el-tooltip content="恢复（Ctrl+Y）" placement="top" :open-delay="250">
            <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')" 
            class="sand-tool-item"  @click="toolClickOptions('redo',!canRedo)" :class="canRedo?'':'tool-disabled'"/>
          </el-tooltip>
          <div class="sand-tool-item">
              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeFamily',nodeTextDisable,e)"
                placement="bottom">
                <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
                  <el-tooltip content="字体" placement="top" :open-delay="250">
                    <div class="dropdown-content"  >
                      <div class="dropdown-content-text" style="width:28px">{{ styleOptions.fontF }}</div>
                      <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="字体" placement="top" :open-delay="250">
                    <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
                  </el-tooltip>
                </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="f in familyOptions" :command="f.value" :key="f.value"
                :class="styleOptions.fontF==f.value?'style-acitve':''">
                    {{ f.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSize',nodeTextDisable,e)"
              placement="bottom">
              <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="字号" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <div class="dropdown-content-text" >{{ styleOptions.fontS }}px</div>
                    <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="字号" placement="top" :open-delay="250">
                  <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="s in fontSizeOptions" :command="s.value" :key="s.value"
                :class="styleOptions.fontS==s.value?'style-acitve':''">
                    {{ s.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-tooltip content="加粗（Ctrl+B）" placement="top" :open-delay="250">
            <div class="sand-tool-item img-box" :class="styleOptions.fontW=='bold'?'style-acitve-back':''">
              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
                require('@/assets/img/sand_new/tools/bold-disabled.png'):
                require('@/assets/img/sand_new/tools/bold.png')"  @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
            </div>

          </el-tooltip>      
          <el-tooltip content="斜体" placement="top" :open-delay="250">
            <div class="sand-tool-item img-box" :class="styleOptions.fontStyle=='italic'?'style-acitve-back':''">
              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
                require('@/assets/img/sand_new/tools/italic-disabled.png'):
                require('@/assets/img/sand_new/tools/italic.png')"  @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
            </div>
          </el-tooltip>    
          <el-tooltip content="下划线" placement="top" :open-delay="250">
            <div class="sand-tool-item img-box" :class="styleOptions.textDecoration=='underline'?'style-acitve-back':''">
              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
                require('@/assets/img/sand_new/tools/underline-disabled.png'):
                require('@/assets/img/sand_new/tools/underline.png')" @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
            </div>
          </el-tooltip>
          <div class="sand-tool-item sand-tool-img">
              <img :src="nodeTextDisable?
                  require('@/assets/img/sand_new/tools/text-color-disabled.png'):
                  require('@/assets/img/sand_new/tools/text-color.png')" />
            <el-tooltip content="字体颜色" placement="top" :open-delay="250">
              <el-color-picker
                key="textColor"
                v-model="styleOptions.color"
                size="mini"
                :predefine="colorsOptions"
                @change="(e)=>toolClickOptions('changeColor',nodeTextDisable,e)"
                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
                :disabled="nodeTextDisable"
              />
            </el-tooltip>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',nodeTextDisable,e)" 
              placement="bottom">
              <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="文本对齐" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="nodeTextDisable? 
                      require('@/assets/img/sand_new/tools/text-align-disabled.png'):
                      require('@/assets/img/sand_new/tools/text-align.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="文本对齐" placement="top" :open-delay="250">
                  <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
                  居中
                </el-dropdown-item>
                <el-dropdown-item command="start" :class="styleOptions.textAlign=='start'?'style-acitve':''">
                  居左
                </el-dropdown-item>
                <el-dropdown-item command="end" :class="styleOptions.textAlign=='end'?'style-acitve':''">
                  居右
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item sand-tool-img">
            <img :src="toolStatus.nodeDisabled?
                  require('@/assets/img/sand_new/tools/background-color-disabled.png'):
                  require('@/assets/img/sand_new/tools/background-color.png')" />
            <el-tooltip content="颜色填充" placement="top" :open-delay="250">
              <el-color-picker
                key="backgroundColor"
                v-model="styleOptions.backgroundColor"
                size="mini"
                :predefine="colorsOptions"
                @change="(e)=>toolClickOptions('changeBackgroundColor',toolStatus.nodeDisabled,e)"
                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
                :disabled="toolStatus.nodeDisabled"
              />
            </el-tooltip>
          </div>
          <div class="sand-tool-item sand-tool-img">
            <img :src="nodeEdgeDisable?
                  require('@/assets/img/sand_new/tools/line-color-disabled.png'):
                  require('@/assets/img/sand_new/tools/line-color.png')" />
            <el-tooltip content="线条颜色" placement="top" :open-delay="250">
              <el-color-picker
                key="lineColor"
                v-model="styleOptions.lineColor"
                size="mini"
                :predefine="colorsOptions"
                @change="(e)=>toolClickOptions('changeLineColor',nodeEdgeDisable,e)"
                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
                :disabled="nodeEdgeDisable"
              />
            </el-tooltip>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',nodeEdgeDisable,e)"
              placement="bottom">
              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="线条宽度" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="nodeEdgeDisable? 
                      require('@/assets/img/sand_new/tools/line-width-disabled.png'):
                      require('@/assets/img/sand_new/tools/line-width.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="线条宽度" placement="top" :open-delay="250">
                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1" :class="styleOptions.lineWidth==1?'style-acitve':''">
                  1
                </el-dropdown-item>
                <el-dropdown-item :command="2" :class="styleOptions.lineWidth==2?'style-acitve':''">
                  2
                </el-dropdown-item>
                <el-dropdown-item :command="3" :class="styleOptions.lineWidth==3?'style-acitve':''">
                  3
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',nodeEdgeDisable,e)"
              placement="bottom">
              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="线条样式" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="nodeEdgeDisable? 
                      require('@/assets/img/sand_new/tools/line-style-disabled.png'):
                      require('@/assets/img/sand_new/tools/line-style.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="线条样式" placement="top" :open-delay="250">
                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='4 4'?'style-acitve':''">
                  虚线
                </el-dropdown-item>
                <el-dropdown-item :command="null" :class="styleOptions.lineStyle==null?'style-acitve':''">
                  实线
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',toolStatus.edgeDisabled,e)"
              placement="bottom">
              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="连线类型" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="toolStatus.edgeDisabled? 
                      require('@/assets/img/sand_new/tools/line-type-disabled.png'):
                      require('@/assets/img/sand_new/tools/line-type.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="连线类型" placement="top" :open-delay="250">
                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve-back':''">
                  <img src="~@/assets/img/sand_new/tools/line-style-straight.png" style="width: 17px;height: 16px;"/>
                </el-dropdown-item>
                <el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve-back':''">
                  <img src="~@/assets/img/sand_new/tools/line-style-bend.png" style="width: 17px;height: 16px;"/>
                </el-dropdown-item>
                <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve-back':''">
                  <img src="~@/assets/img/sand_new/tools/line-style-bend-round.png" style="width: 17px;height: 16px;"/>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',toolStatus.edgeDisabled,e)"
              placement="bottom">
              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="开始箭头" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="toolStatus.edgeDisabled? 
                      require('@/assets/img/sand_new/tools/arrow-start-disabled.png'):
                      require('@/assets/img/sand_new/tools/arrow-start.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="开始箭头" placement="top" :open-delay="250">
                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="classic" :class="styleOptions.startArrow=='classic'?'style-acitve':''">
                  有
                </el-dropdown-item>
                <el-dropdown-item command="" :class="styleOptions.startArrow?'':'style-acitve'">
                  无
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',toolStatus.edgeDisabled,e)"
              placement="bottom">
              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
                <el-tooltip content="结束箭头" placement="top" :open-delay="250">
                  <div class="dropdown-content"  >
                    <img :src="toolStatus.edgeDisabled? 
                      require('@/assets/img/sand_new/tools/arrow-end-disabled.png'):
                      require('@/assets/img/sand_new/tools/arrow-end.png')" 
                      style="vertical-align: middle;"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="结束箭头" placement="top" :open-delay="250">
                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
                </el-tooltip>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="classic" :class="styleOptions.endArrow=='classic'?'style-acitve':''">
                  有
                </el-dropdown-item>
                <el-dropdown-item command="" :class="styleOptions.endArrow?'':'style-acitve'">
                  无
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>   
        </div>
        <div id="sand-chart-container" ></div>

        <!-- 缩略图 -->
        <div id="minimap" class="minimap"></div>

        <div class="contextMenu-wrapper" id="contextMenu-wrapper" @mouseleave="hideContextMenu">
          <dropdown-menu size="medium">
            <el-dropdown-item v-for="menu in contextMenuOption.filter(it => it.show)" :key="menu.key" @click.native="handleContext(menu.key)">
              <i :class="menu.icon" v-if="menu.icon" /> 
              {{menu.label}}
            </el-dropdown-item>
          </dropdown-menu>
        </div>
        <el-popover
          placement="top"
          trigger="manual"
          v-model="popoverVisible">
          <div id="link-popover" :style="{height:popoverFlod?'20px':'unset'}">
            <div class="link-box">
              <div v-for="item in linkList" :key="item.RId" class="link-item" @click="navigateTo(item)">
                {{ item.Name }}
              </div>
            </div>
            <img src="~@/assets/img/sand_new/arrow_black_down.png" class="link-fold" 
            :style="{transform:popoverFlod?'':'rotate(180deg)'}" v-show="linkList.length>1"
            @click="foldLink"/>
          </div>
          <div id="link-reference" slot="reference"></div>
        </el-popover>
      </div>
    </div>
    <!-- 添加链接--弹窗 -->
    <addLInkDia :show.sync="addLinkShow" :linkList="linkList" @saveLink="saveLink" />
  </div>
</template>

<script>
// 路由的name 属性在main.js中更改
import { myGraph } from '../common/gragh';
import { myNodes,myNodeOption } from '../common/node';
import { myEdgeOption } from '../common/edge';
import { Addon } from '@antv/x6'
import mindmap from "../common/mindmap"
import {styleSettings,familyOptions,fontSizeOptions,colorsOptions,lineHeightOptions} from "../common/toolConfig"
import { ElDropdownMenu as DropdownMenu } from 'element-ui';
import { contextMenuOption } from '../common/options';
import { contextEvent } from '../common/events';
import { mapState } from 'vuex'
import { dataBaseInterface,sandInterface} from '@/api/api.js';
import { svgToBase64 } from '@/utils/svgToblob'
import addLInkDia from './components/addLInkDia.vue';

  export default {
    name:"sandFlowIndex",
    components:{
      DropdownMenu,addLInkDia
    },
    beforeRouteLeave(to,from,next) {
		// 添加页切换路由提示保存
		if(!this.$route.query.SandboxId) {
			this.$confirm("在离开页面之前，是否保存当前内容？", "保存提示", {
					type: "warning"
				}).then(() => {
					this.saveChart('exit',()=>{
            next()
          });
				}).catch(() => {
					next();
				})
		}else {
			next();
		}

	},
    data() {
      return {
        contextMenuOption,
        graph: null,
        dnd:null,
        initData: {},
        activeToolTabName:"元素库",
        addType:"",
        styleActive:1,
        canUndo:false,
        canRedo:false,
        sandSaveParams:{
          Name:'',
          SandboxClassifyId:'',
          SandboxId:+this.$route.query.SandboxId || 0,
        },
        parentIds:[],
        treeData:[],
        lockLoding: null,
        loopTimer:null,
        // 添加链接弹窗
        addLinkShow:false,
        linkList:[],
        popoverVisible:false,
        popoverDom:null,
        popoverTriggerDom:null,
        popoverTimeout:null,
        linkNode:null,
        popoverFlod:true,
        isSlideLeft:false
      }
    },
    mixins:[mindmap],
    watch: {
      initData(newval) {
        if(!this.graph){
          this.init()
        }
        this.$nextTick(()=>{
          this.graph.fromJSON(newval);
          this.graph.zoomToFit()
        })
      },
      styleActive:{
        handler(newval, oldval) {
          this.$store.commit("sand/SET_CELL_STYLE",newval)
        },
        immediate:true
      }
	  },
    computed:{
      myNodes(){
        return myNodes
      },
      myEdgeOption(){
        return myEdgeOption
      },
      familyOptions(){
        return familyOptions
      },
      fontSizeOptions(){
        return fontSizeOptions
      },
      colorsOptions(){
        return colorsOptions
      },
      lineHeightOptions(){
        return lineHeightOptions
      },
      ...mapState({
        selectCells: state => state.sand.selectCells,
        styleOptions: state => state.sand.styleOptions,
        toolStatus:state => state.sand.toolStatus,
      }),
      nodeTextDisable(){
        return this.toolStatus.nodeDisabled && this.toolStatus.textDisabled
      },
      nodeEdgeDisable(){
        return this.toolStatus.nodeDisabled && this.toolStatus.edgeDisabled
      }
    },
    created(){
      this.getSandboxClassify();
      this.$route.query.SandboxId && this.getGraphData(this.$route.query.SandboxId)
    },
    mounted(){
      this.init()
      document.getElementById('sand-mainBody-chart').addEventListener("dragover",this.edgeDragover)
      document.getElementById('sand-mainBody-chart').addEventListener("drop",this.edgeDrop)
      this.popoverDom = $('#link-popover')[0];
      this.popoverTriggerDom = $('#link-reference')[0];
      
      this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.addEventListener('mouseleave',this.closePopover)
      
    },
    beforeDestroy(){
      clearInterval(this.loopTimer)
      document.getElementById('sand-mainBody-chart').removeEventListener("dragover",this.edgeDragover)
      document.getElementById('sand-mainBody-chart').removeEventListener("drop",this.edgeDrop)
      this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.removeEventListener('mouseleave',this.closePopover)
      clearInterval(this.loopTimer)
    },
    methods: {
      getSandboxClassify(){
        sandInterface.getSandboxClassifyOnly().then(res=>{
          if (res.Ret === 200) {
            this.treeData=res.Data.AllNodes || []
          }
        })
      },
      getGraphData(Id){
        let SandboxId=+Id ? +Id : this.sandSaveParams.SandboxId
        sandInterface.getSandboxDetail({SandboxId}).then(res=>{
          if(res.Ret == 200 && res.Data){
            this.sandSaveParams.SandboxId=res.Data.SandboxId
            this.sandSaveParams.Name=res.Data.Name
            this.sandSaveParams.SandboxClassifyId=res.Data.SandboxClassifyId
            this.initData = JSON.parse(res.Data.Content)
            this.mindmapAssistData.mindmapDataUse = res.Data.MindmapData?JSON.parse(res.Data.MindmapData):[]
            this.styleActive = res.Data.Style||1
            setTimeout(()=>{
              if(this.$refs.classifyIdRef && this.$refs.classifyIdRef.getCheckedNodes()[0]){
                this.parentIds=this.$refs.classifyIdRef.getCheckedNodes()[0].path
              }
            },50)
            this.autoSave();
          }
        })
      },
      /* 编辑页 自动保存 */
      autoSave() {
        this.loopTimer = setInterval(() => {
          if(!this.sandSaveParams.Name || !this.sandSaveParams.SandboxClassifyId) return;
          const { Name, SandboxClassifyId } = this.sandSaveParams;
          sandInterface.sandboxSaveV2({
            SandboxId:this.sandSaveParams.SandboxId,
            Name,
            SandboxClassifyId,
            Content: JSON.stringify(this.graph.toJSON()),
            PicUrl:'',
            MindmapData:this.mindmapAssistData.mindmapDataUse.length>0?JSON.stringify(this.mindmapAssistData.mindmapDataUse):'',
            Style:this.styleActive||1
          }).then((res) => {
            if(res.Ret !== 200) return
            if(this.$refs.classifyIdRef && this.$refs.classifyIdRef.getCheckedNodes()[0]){
              this.parentIds=this.$refs.classifyIdRef.getCheckedNodes()[0].path
            }
          });
        }, 10000);
      },
      // 初始化画布
      init() {
        const graph = new myGraph('sand-chart-container',this.getMindmapDataUse);
        this.graph = graph;
        
        this.graph.history.on('change', (args) => { 
          this.canUndo = this.graph.canUndo()
          this.canRedo = this.graph.canRedo()
        })

        this.graph.on('node:mouseenter', ({ node, e }) => {
          let data = node.data
          this.linkNode = node
          let isMindmap = node.shape.indexOf('mindmap')!=-1
          this.contextMenuOption.map(item =>{
            if(item.key=='copy'){
              item.show=!isMindmap
            }
          })
          if(data && data.linkData && data.linkData.length>0){
            this.popoverFlod = data.linkFold
            this.popoverVisible=false
            clearTimeout(this.popoverTimeout)
            this.popoverTimeout=null
            let currentLinks = data.linkData
            //指标id
            let edbInfoIdList = data.linkData.filter(it => it.Type==1).map(it => it.Id)
            // 图库id
            let chartInfoIdList = data.linkData.filter(it => it.Type==2).map(it => it.Id)
            // 报告id
            let reportIdList = data.linkData.filter(it => it.Type==3).map(it => it.Id)
            sandInterface.sandboxLinkCheck({EdbInfoIdList:edbInfoIdList,ChartInfoIdList:chartInfoIdList,ReportIdList:reportIdList}).then(res=>{
              if(res.Ret == 200){
                let EdbInfoIdList = res.Data.EdbInfoIdList || []
                let ChartInfoIdList = res.Data.ChartInfoIdList || []
                let ReportIdList = res.Data.ReportIdList || []
                this.linkList = currentLinks.filter(link =>{
                  return EdbInfoIdList.includes(link.Id) || ChartInfoIdList.includes(link.Id) || ReportIdList.includes(link.Id)
                })
                let clinetPositon=this.graph.localToClient(node.position())
                let size=node.size()
                this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
                this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
                this.popoverVisible=true
                if(!(this.linkList.length>0)){
                  if(item.key=='addLink'){
                    item.label='添加链接'
                  }else if(item.key=='deleteLink'){
                    item.show=false
                  }
                }
              }
              this.contextMenuOption.map(item =>{
                if(item.key=='addLink'){
                  item.label='编辑链接'
                }else if(item.key=='deleteLink'){
                  item.show=true
                }
              })
            })
          }else{
            this.contextMenuOption.map(item =>{
              if(item.key=='addLink'){
                item.label='添加链接'
              }else if(item.key=='deleteLink'){
                item.show=false
              }
            })
          }
        })
      
        this.graph.on('node:mouseleave', ({ node, e }) => {
          if(!this.popoverTimeout){
            this.popoverTimeout= setTimeout(()=>{
              this.popoverVisible=false
              this.popoverTriggerDom.style.left = '-99999px';
              this.popoverTriggerDom.style.top = '-99999px';
              this.popoverTimeout=null
            },500)
          }

        })

        this.graph.on('node:change:position', (args) => { 
          if(args.node.data && args.node.data.linkData && args.node.data.linkData.length>0
          &&this.popoverVisible){
            this.changePopoverPositon(args)
          }
        })

        this.dnd = new Addon.Dnd({
          target: this.graph,
          animation: true,
          validateNode() {
            return true;
          },
        });
        this.setGraph()
		  },
      dragStart(data,e) {
        const { key,shape } = data;
        
        const	node = this.graph.createNode({
          shape,
          ...myNodeOption(key),
        });
        this.dnd.start(node,e);
      },
      edgeDragStart(type,e){
        this.addType = type
      },
      edgeDragover(e){
        e.preventDefault()
      },
      edgeDrop(e){
        if(!this.addType){
          return 
        }
        let position = this.graph.clientToLocal({x:e.clientX,y:e.clientY})
        if(this.addType.indexOf("Mindmap")!==-1){
          //插入思维导图
          this.generateMindmapData(position,this.addType)
          this.mindMapRender(this.mindmapAssistData.mindmapDataUse.length-1)
        }else{
          this.graph.addEdge({
            shape:'edge',
            ...this.myEdgeOption(this.addType,position.x,position.y)
          });
        }
        this.addType=""
      },

      changeStyle(activeNum){
        let styleData=styleSettings[activeNum-1]
        this.styleActive = activeNum
        let cells = this.graph.getCells()

        for (let i = 0; i < cells.length; i++) {
          const element = cells[i];
          if(element.shape.indexOf("edge") !=-1){
            element.setAttrs({
              line:{
                stroke:styleData.lineColor
              }
            })
          }if(element.data && element.data.key == 'text'){
            element.setAttrs({
              text:{
                fill:styleData.textColor
              }
            })
          }else{
            element.setAttrs({
              body:{
                fill:styleData.backgroundColor,
                stroke:styleData.borderColor,
              },
              text:{
                fill:styleData.color
              }
            })
          }
        }
      },
      /* 右键事件 */
      handleContext(key) {
        if(key=="addLink"){
          this.addLinkDialogOpen()
        }else if(key=="deleteLink"){
          this.deleteLink()
        }else{
          contextEvent(this.graph, key,this.getMindmapDataUse);
        }
        this.hideContextMenu();
      },

      /* 隐藏右键menu */
      hideContextMenu() {
        const dom = $('#contextMenu-wrapper')[0];
        dom.style.left = '-9999px';
        dom.style.top = '-9999px';
      },
      addLinkDialogOpen(){
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell){
          this.linkList = select_cell.data ? select_cell.data.linkData ||[]:[]
        }else{
          this.linkList=[]
        }
        this.addLinkShow=true
      },
      deleteLink(){
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell){
          select_cell.data.linkData=[]
          this.$message.success('清除链接成功')
        }
      },
      saveLink(list){
        this.linkList=list
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell.data){
          select_cell.data.linkData = this.linkList
          select_cell.data.linkFold = true
        }else{
          select_cell.setData({linkData:this.linkList})
          if(!select_cell.data.linkFold){
            select_cell.data.linkFold=true
          }
        }
        this.$message.success("链接保存成功")
        this.addLinkShow=false
      },
      backList(){
        let ids = ''
        if(this.parentIds && this.parentIds.length>0){
          ids=this.parentIds.join(',')+','+this.sandSaveParams.SandboxId
        }
        sessionStorage.setItem("sandboxEditBack",ids)
        this.$router.push({path:"/sandlist"})
      },
      copySandHandle: _.debounce(function() {
        const { cells } = this.graph.toJSON();
        if(!cells.length) return this.$message.warning('当前画布无可复制内容');

        this.lockLoding = this.$loading({
          lock: true,
          text: '复制图片中...',
          target: '.right-wrapper',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        this.graph.toSVG(async(dataUri) => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = svgToBase64(dataUri);
          img.onload = ()=>{
            canvas.width = img.width;
            canvas.height = img.height;

            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.fillStyle="#fff";
            ctx.fillRect(0, 0, img.width, img.height);
            ctx.drawImage(img, 0, 0);
            if(window.ClipboardItem) {
              canvas.toBlob(async (blob) => {
                  const data = [new ClipboardItem({ [blob.type]: blob })]; 
                  await navigator.clipboard.write(data).then(
                  () => {
                      this.$message.success('复制成功！')
                  },
                  () => {
                      this.$message.warning('浏览器不支持')
                  }
                  ).finally(()=>{
                      this.lockLoding && this.lockLoding.close();
                  });
              });
            }else {
              this.lockLoding && this.lockLoding.close();
              this.$message.warning('当前协议暂不支持，仅支持https协议')
            }	
          }
        },{
          preserveDimensions:false,//让svg为实际图片大小
          beforeSerialize:(svg)=>{
            const {x,y,width,height} = this.graph.getContentBBox(cells)
            // let {tx,ty} = this.graph.translate()
            //给导出的svg增加一点宽高
            svg.setAttribute('width',width+50)
            svg.setAttribute('height',height+50) 
            //设置viewBox使图像居中
            svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
            // let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
            // console.log(leftImg,rightImg,'rightImg');

            // let textNode = document.createElement('text')
            // textNode.setAttribute('x',x-tx+width-90)
            // textNode.setAttribute('y',y-ty+height+22)
            // textNode.setAttribute('font-size','16px')
            // textNode.setAttribute('font-style','italic')
            // textNode.innerText = '来源：弘则研究'
            // gNode.appendChild(textNode)
              },
          copyStyles:false,
          stylesheet: `
              svg{
                  background-color:white;
              }
            .x6-port {
                visibility: hidden;
            }
            .left-topic-image{
              visibility:hidden;
            }
            .right-topic-image{
              visibility: hidden;
            }` 
            
        })
      },500),
      saveChart: _.debounce(function(callback=null) {
        if(!this.sandSaveParams.Name) 
          return this.$message.warning('请填写逻辑图名称');
        if(!this.sandSaveParams.SandboxClassifyId) 
          return this.$message.warning('请选择所属分类');

        if(!this.graph.toJSON().cells.length) return this.$message.warning('请绘制画布内容');

        const { Name, SandboxClassifyId} = this.sandSaveParams;

        this.lockLoding = this.$loading({
          lock: true,
          text: '保存中...',
          target: '.sand-edit-container',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        const { cells } = this.graph.toJSON();
        this.graph.toSVG(async (dataUri) => {
          const params = new FormData();
          params.append('Img',dataUri)
          const { Data } = await dataBaseInterface.uploadImgSvg(params);

          let SandboxId = this.sandSaveParams.SandboxId
          const { Ret , Data : sandData} = await sandInterface.sandboxSaveV2({
            SandboxId,
            Name,
            SandboxClassifyId: Number(SandboxClassifyId),
            Content: JSON.stringify(this.graph.toJSON()),
            PicUrl: Data?Data.ResourceUrl:'',
            SvgData: dataUri,
            MindmapData:JSON.stringify(this.mindmapAssistData.mindmapDataUse),
            Style:this.styleActive||1
          })

          if(Ret !== 200){
            this.lockLoding.close();
            return;
          }
          if(this.$refs.classifyIdRef && this.$refs.classifyIdRef.getCheckedNodes()[0]){
            this.parentIds=this.$refs.classifyIdRef.getCheckedNodes()[0].path
          }
          this.$message.success(`${SandboxId ? '编辑成功' : '保存成功'}`);
          this.lockLoding.close();
          //如果是新增,直接跳转到编辑页面
          if(!SandboxId){
            this.$router.replace({
              path: '/sandflow',
              query: {
                SandboxId:sandData.SandboxId,
              },
            });
          }
          
          callback && callback();
        },{
          preserveDimensions:true,//让svg为实际图片大小
          beforeSerialize:(svg)=>{
            // const zoom = this.graph.zoom();
            const {x,y,width,height} = this.graph.getContentBBox(cells)
            // let {tx,ty} = this.graph.translate() // 画布偏移量
            //给导出的svg增加一点宽高
            svg.setAttribute('width',width+60)
            svg.setAttribute('height',height+60) 
            //设置viewBox使图像居中
            svg.setAttribute('viewBox',`${x-30} ${y-30} ${width+60} ${height+60}`)
            // // 在图表右下方 加上"来源：弘则研究"字样
            // let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
            // let textNode = document.createElement('text')
            // textNode.setAttribute('x',(x-tx+width)/zoom-85)
            // textNode.setAttribute('y',(y-ty+height)/zoom+27)
            // textNode.setAttribute('font-size','16px')
            // textNode.setAttribute('font-style','italic')
            // textNode.innerText = '来源：弘则研究'
            // gNode.appendChild(textNode)
              },
          copyStyles:false,
          stylesheet: `
              svg{
                  background-color:white;
              }
            .x6-port {
                visibility: hidden;
            }
            .left-topic-image{
              visibility:hidden;
            }
            .right-topic-image{
              visibility: hidden;
            }
            ` 
        })
          
      },500),
      toolClickOptions(type,disabled){
        // 设置元素属性的时候请一起设置，分几步设置，撤销的时候就要分几步。或者使用事务来设置
        if(disabled) return
        let value = arguments[2]
        switch (type) {
          case 'undo':
            this.graph.undo()
            break;
          case 'redo':
            this.graph.redo()
            break;
          case 'changeFamily':
            this.styleOptions.fontF = value
            this.setGraphStyle('text/fontFamily',value)
            break;
          case 'changeSize':
            this.styleOptions.fontS = value
            this.setGraphStyle('text/fontSize',value)
            break;
          case 'changeWeight':
            this.styleOptions.fontW = this.styleOptions.fontW=='normal'?'bold':'normal'
            this.setGraphStyle('text/fontWeight')
            break;
          case 'changeFontStyle':
            this.styleOptions.fontStyle = this.styleOptions.fontStyle=='normal'?'italic':'normal'
            this.setGraphStyle('text/fontStyle')
            break;
          case 'changeDecoration':
            this.styleOptions.textDecoration = this.styleOptions.textDecoration=='none'?'underline':'none'
            this.setGraphStyle('text/textDecoration')
            break;
          case 'changeColor':
            this.setGraphStyle('text/fill',value)
            break;
          case 'changeLineHeight':
            this.styleOptions.lineHeight = value
            this.setGraphStyle('text/lineHeight',value)
            break;
          case 'changeTextAlign':
            this.styleOptions.textAlign = value
            this.setGraphStyle('text/textAnchor',value)
            break;
          case 'changeBackgroundColor':
            this.setGraphStyle('body/fill',value)
            break;
          case 'changeLineColor':
            this.setGraphStyle('body/stroke',value)
            break;
          case 'changeLineWidth':
            this.styleOptions.lineWidth = value
            this.setGraphStyle('body/strokeWidth',value)
            break;
          case 'changeStrokeDasharray':
            this.styleOptions.lineStyle = value
            this.setGraphStyle('body/strokeDasharray',value)
            break;
          case 'changeRouter':
            this.styleOptions.connectStyle = value
            this.setGraphStyle('router/name',value)
            break;
          case 'changeSourceMarker':
            this.styleOptions.startArrow = value
            this.setGraphStyle('line/sourceMarker',value)
            break;
          case 'changeTargetMarker':
            this.styleOptions.endArrow = value
            this.setGraphStyle('line/targetMarker',value)
            break;
          default:
            break;
        }
      },
      setGraphStyle(attr,value){
        let styleValue = value
        let attrReal = attr
        let refXValue;
        let currentAttr= this.selectCells[0].getAttrs()
        if(attr.indexOf('fontWeight')!=-1){
          styleValue = currentAttr.text.fontWeight == "bold"?'normal':'bold'
        }else if(attr.indexOf('fontStyle')!=-1){
          styleValue = currentAttr.text.fontStyle == "italic"?'normal':'italic'
        }else if(attr.indexOf('textDecoration')!=-1){
          styleValue = currentAttr.text.textDecoration == "underline"?'none':'underline'
        }else if(attr.indexOf('textAnchor')!=-1){
          //需要特殊设置
          if(styleValue=='start'){
            refXValue='0%'
          }else if(styleValue=='middle'){
            refXValue=0.5
          }else{
            refXValue='100%'
          }
        }

        if(this.selectCells[0].shape.indexOf('edge')!=-1){
          // 边的情况
          attrReal=attrReal.replace('body','line')
        }
        if(this.selectCells[0].attr(attrReal) === styleValue){
          return 
        }
        this.selectCells.map(cell=>{
          // lineHeight和fontsize 是一个倍数关系，每一个都可能不一样。
          if(attr.indexOf('lineHeight')!=-1){
            let fontSizeCurrent = cell.getAttrs().text.fontSize
            cell.setAttrs({
              text:{
                relativeLineHeight:styleValue, //设置相对行高
                lineHeight:styleValue*fontSizeCurrent //设置行高
              }
            })
          }else if(attr.indexOf('fontSize')!=-1){
            let relativeLineHeightCurrent = cell.getAttrs().text.relativeLineHeight || 1.3
            cell.setAttrs({
              text:{
                fontSize:styleValue,//设置字号
                lineHeight:styleValue*relativeLineHeightCurrent //设置行高
              }
            })
          }else if(attr=='body/stroke'){
            // 线条颜色和边框颜色
            cell.attr(attrReal,styleValue)
          }else if(attr=='body/strokeWidth'){
            // 线条粗细和边框粗细
            cell.attr(attrReal,styleValue)
          }else if(attr=='body/strokeDasharray'){
            // 线条样式和边框样式
            cell.attr(attrReal,styleValue)
          }else if(attr=='router/name'){
            // 1-直线  2-弯折线 3-圆角弯折线
            let routerName=styleValue==1?'normal':'manhattan'
            let connectorName=styleValue==3?'rounded':'normal'
            this.graph.startBatch('setConnetorStyle')
            if(routerName=='normal'){
              // 变成直线，清除路径点
              cell.setVertices([])
            }else{
              // 变弯折线 添加路径点
              let sourcePoint = cell.getSourcePoint() //起始点
              let targetPoint = cell.getTargetPoint() //终止点
              let fisrtPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:sourcePoint.y}
              let secondPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:targetPoint.y}
              cell.setVertices([fisrtPoint,secondPoint])
            }
            cell.setRouter({name:routerName,args: {padding: {left: 10}}})
            cell.setConnector({name:connectorName,args: { radius: 8 }})
            this.graph.stopBatch('setConnetorStyle')
          }else if(attr.indexOf('textAnchor')!=-1){
            // 居左居中居右设置
            cell.setAttrs({
              text:{
                refX:refXValue,//设置相对位置
                textAnchor:styleValue //设置对齐方式
              }
            })
          }else{
            cell.attr(attr,styleValue)
          }

        })
      },

      foldLink(){
        this.popoverFlod=!this.popoverFlod 
        if(this.linkNode){
          this.linkNode.data.linkFold = this.popoverFlod
        }
        this.popoverVisible=false
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },
      clearPopoverTimeout(){
        clearTimeout(this.popoverTimeout)
        this.popoverTimeout=null 
      },
      closePopover(){
        this.popoverVisible=false
      },
      navigateTo(item){
        if(item.Type == 1){
          if(item.databaseType==0){
            // 普通指标
            const { href } = this.$router.resolve({ path: '/database',query:item.detailParams});
            window.open(href, '_blank');
          }else{
            // 预测指标
            const { href } = this.$router.resolve({ path: '/predictEdb',query:item.detailParams});
            window.open(href, '_blank');
          }
        }else if(item.Type == 2){
          // 跳转到图库详情
          const { href } = this.$router.resolve({ path: '/chartsetting',query:item.detailParams});
          window.open(href, '_blank');
        }else if(item.Type == 3){
          // 跳转到研报
          const { href } = this.$router.resolve({ path: '/reportdtl',query:item.detailParams});
          window.open(href, '_blank');
        }
      },
      changePopoverPositon:_.throttle(function(args){
        this.popoverVisible=false
        let clinetPositon=this.graph.localToClient(args.current)
        let size=args.node.size()
        this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
        this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },200) ,

      /* 向左收起 展开 */
      slideHandle() {
        this.isSlideLeft = !this.isSlideLeft;
      },
    },
  }
</script>

<style lang="scss" scoped>
  #sand-edit-container{
    height: calc(100vh - 120px);
    min-height: 600px;
    display: flex;
    flex-wrap: nowrap;
    .sand-toolbar{
      min-width: 400px;
      width: 400px;
      background-color: white;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      height: 100%;
      box-sizing: border-box;
      margin-right: 20px;
      padding-bottom: 20px;
      position: relative;
      .sand-elements-tab{
        padding: 0 30px;
        overflow: auto;
        height: calc(100vh - 220px);
        .sand-elements{
          padding: 30px 0 20px;
          border-bottom: 1px solid #C8CDD9 ;
          span{
            display: inline-block;
            margin-bottom: 10px;
            font-size: 16px;
            color: #999999;
          }
          .elements-row{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: -10px;
            .elements-shape-item,img{
              margin-right: 20px;
              margin-bottom: 8px;
              cursor: pointer;
            }
            img{
              height: 18px;
              width: 18px;
            }
          }
        }
        .sand-elements-mind{
          border-bottom: none;
          padding-bottom: 0;
        }

      }
      .elements-row-mind{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        img{
          width: 100%;
          margin-bottom: 20px;
        }
      }
      .sand-style-tab{
        width: 100%;
        padding: 20px 30px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-between;
        .sand-style-tab-item{
          box-sizing: border-box;
          border: 1px solid #C8CDD9;
          padding: 10px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: calc(50% - 7px);
          margin-bottom: 14px;
          border-radius: 4px;
          img{
            width: 64px;
            height: 54px;
          }
        }

        .active{
          border: 1px solid #0052D9;
        }
      }
    }
    .sand-main{
      flex: 1;
      display: flex;
      flex-direction: column;
      .sand-main-top{
        padding: 20px 20px 10px;
        display: flex;
        // flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-bottom: 20px;
        .sand-mainTop-form{
          margin-bottom: 10px;
          margin-right: 20px;
          white-space: nowrap;
        }
        .sand-mainTop-option{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .sand-option-linkShow{
            display: flex;
            align-items: center;
            margin-right: 30px;
            cursor: pointer;
            img{
              height: 16px;
              margin-right: 4px;
            }
          }
        }
      }
      .sand-mainBody-chart{
        .sand-mainBody-tool{
          position: absolute;
          height: 50px;
          width: 100%;
          background-color: #F5F6F7;
          box-sizing: border-box;
          border-radius: 4px;
          display: flex;
          align-items: center;
          padding-right: 10px;
          z-index: 1;
          top: 0;
          left: 0;
          .sand-tool-item{
            margin-left: 20px;
            cursor: pointer;
            .dropdown-box{
              position: relative;
              img{
                height: 16px;
                width: 16px;
              }
              .dropdown-content{
                display: flex;
                align-items: center;

                .dropdown-content-text{
                  width: 30px;
                  white-space: nowrap;
                  overflow: hidden;
                  margin-right: 5px;
                }
              }
              .disabled-item{
                background-color: transparent;
                cursor: not-allowed;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
              }
            }
          }
          .img-box{
            height: 16px;
            width: 17px;
            img{
              height: 16px;
              width: 17px;
            }
          }
          .sand-tool-img{
            height: 16px;
            min-width: 16px;
            position: relative;
            img{
              height: 16px;
              width: 16px;
            }
          }
          .tool-disabled{
            color: #C8CDD9;
            cursor:not-allowed;
          }
        }
      }
    }
  }
  #link-popover{
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    overflow: hidden;
    .link-box{
      .link-item{
        &:hover{
          text-decoration: underline;
          color: #0052D9;
          cursor: pointer;
        }
      }
    }
    .link-fold{
      transition: all 0.3s ease;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .slide-icon {
    padding: 20px 0;
    /* display: block; */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &.slide-left {
      right: 0;
    }
    &.slide-right {
      left: 0;
    }
  }
  @media screen and (max-width:1680px) {
    #sand-edit-container{
      .sand-toolbar{
        min-width: 320px;
        width: 320px;
      }
    }
  }
</style>
<style lang="scss">
  .sand-toolbar-tabs{
    .el-tabs__header{
      padding-top: 16px;
      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
    }
  }
  .el-cascader{
    .el-input{
      width: 240px;
    }
  }
  .sand-mainBody-chart{
    height: calc(100% - 50px);
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding-top: 50px;
    .contextMenu-wrapper {
      position: fixed;
      z-index: 99;
      top: -9999px;
      left: -9999px;
      background: #fff;
      padding: 10px 0;
      box-shadow: 0 1px 4px #999;
    }
    #link-reference{
      position: fixed;
      z-index: -1;
      top: -99999px;
      left: -99999px;
      background-color: transparent;
    }
    #sand-chart-container{
      flex: 1;
    }
    .x6-graph-scroller {
      flex: 1;
    }

    .x6-port-body {
      display: none;
    }

    /* reseize 框样式 */
    .x6-widget-transform {
      .x6-widget-transform-resize {
        border-radius: 0;
      }
    }
    .minimap{
      position:absolute;
      right:6px;
      bottom:6px;
      box-sizing: border-box;
      .x6-widget-minimap-viewport{
        border-color: red;
        .x6-widget-minimap-viewport-zoom{
          border-color: red;
        }
      }
      .x6-widget-minimap{
        width: auto !important;
        height: auto !important;
      }
    }
  }
  .left-topic-image,.right-topic-image {
    visibility: hidden;
    width: 0;
    cursor: pointer;
  }
  .x6-node:hover .left-topic-image {
    width: unset;
    visibility: visible;
  }
  .x6-node:hover .right-topic-image {
    width: unset;
    visibility: visible;
  }
  .x6-node-selected rect {
    stroke-width: 2px;
  }
  #sand-mainBody-tool{
    .el-select{
      .el-input{
        .el-input__inner{
          border: none;
          background-color: #F5F6F7;
          padding-left: 0;
          padding-right: 30px;
        }
      }
    }
  }
  .style-acitve{
    color: #0052D9;
  }
  .style-acitve-back{
    background-color: #C5CBDA;
  }

.vue-giant-tree{
  li{
    ul{
      padding: 0 0 0 10px!important;
    }
    .button{
      z-index: 1;
      height: 30px;
      width: 20px;
      &::before{
        border:none!important;
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%,-50%)!important;
        height: 16px!important;
        width: 16px!important;
      }
    }
    .button.noline_close{
      &::before{
        content: url('../../../assets/img/set_m/slide_black.png')!important;
      }
    }
    .button.noline_open{
      &::before{
        content: url('../../../assets/img/set_m/down_black.png')!important;
      }
    }
    a{
      width: calc(100% - 22px);
      height: 30px!important;
      line-height: 30px!important;
      .node_name{
        width: calc(100% - 6px);
        color: #333333!important;
        border-radius: 0!important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .curSelectedNode{
      position: relative;
      z-index: 0;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      .node_name{
        flex: 1;
        color: unset;
        background-color: transparent;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: -22px;
          height: 30px;
          width: calc(100% + 22px);
          background-color: #ECF2FE;
          z-index: -1;
        }
      }
      .custom-button-zone{
        display: flex!important;
      }
    }
  }

}
  .classify-popper{
    height: 400px;
    overflow: auto;
  }
  .classify-cascader-popper{
    display: none;
  }
  .label-edit-input{
    width: 220px!important;
    .el-input__inner{
      height: 26px;
      padding: 10px;
    }
  }
</style>