<template>
  <div id="sandbox-index-container">
    <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="sandbox-content-tree-box" v-show="!isSlideLeft">
      <div class="sandbox-content-tree-header">
        <el-button type="primary" style="width: 170px;" @click="addSand" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">添加逻辑</el-button>
        <el-checkbox v-model="searchParams.IsShowMe" @change="onlyMeHandler">只看我的</el-checkbox>
      </div>
      <div class="sandbox-content-tree-body">
        <div style="padding: 0 20px;" v-permission="permissionBtn.sandboxPermission.sandbox_search">
          <el-select v-model="searchSandboxId" v-loadMore="searchLoad" :filterable="!searchSandboxId" remote @change="sandboxChange"
          clearable placeholder="请输入逻辑图名称" style="width: 100%; margin-bottom: 20px;" :remote-method="searchHandle"
          @click.native="inputFocusHandle">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-for="item in searchOptions"
              :key="item.SandboxId"
              :label="item.Name"
              :value="item.SandboxId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="sandbox-content-tree">
          <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" key="classify" 
          @onExpand="zTreeExpand"/>
          <div class="add-classify" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit">
            <img src="~@/assets/img/sand_new/add_ico.png"/>
            <span @click="addLevelOneHandle">添加分类</span>
          </div>
          <span class="slide-icon slide-left" @click="slideHandle">
            <i class="el-icon-d-arrow-left"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="sandbox-pictures-box" v-show="rightType=='list'" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">
      <div class="pictures-count">
        共{{total}}个逻辑图
      </div>
      <div class="pictures-box" ref="pictureListRef" @scroll="loadMoreSandbox">
        <el-col :span="6" style="margin-bottom:20px;padding-right: 20px;min-width: 255px;"
        v-for="picture in pictureList" :key="picture.SandboxId">
          <div class="pictures-item">
            <div class="pictures-item-header">
              <span class="text_oneLine">{{ picture.Name }}</span>
            </div>
            <img :src="picture.PicUrl" class="picture-img" @click="detailShowHandle(picture)"/>
            <div class="item-bottom">
              <span>{{ picture.CreateTime.slice(0,10) }}</span>
              <div class="item-bottom-buttons">
                <span class="join_txt" @click="copyHandle(picture)" v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制</span>
                <span class="join_txt" @click="deleteHandle(picture,'inList')" style="color: #C54322;"
                v-permission="permissionBtn.sandboxPermission.sandbox_del">删除</span>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
    <div class="sandbox-chart-box" 
    :style="{visibility:rightType=='list'?'hidden':'visible',
            width:rightType=='list'?'1px':'unset',
            flexGrow:rightType=='list'?'unset':1}">
      <div class="sandbox-chart-head">
        <div class="sandbox-chartHead-author">作者：<span>{{ this.viewSandbox.SysUserName }}</span></div>
        <div class="sandbox-chartHead-title">{{ this.viewSandbox.Name }}</div>
        <div class="sandbox-chartHead-options">
          <div class="chartHead-options-button" @click="editSand" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">
            <img src="~@/assets/img/sand_new/edit_outline.png" />
            <span>编辑</span> 
          </div>
          <div class="chartHead-options-button" @click="saveOther">
            <img src="~@/assets/img/sand_new/save-other.png" />
            <span>另存为</span> 
          </div>
          <div class="chartHead-options-button" @click="copySandHandle" v-permission="permissionBtn.sandboxPermission.sandbox_addMy">
            <img src="~@/assets/img/sand_new/copy.png" />
            <span>复制</span> 
          </div>
          <div class="chartHead-options-button" @click="deleteHandle(viewSandbox,'inchart')" v-permission="permissionBtn.sandboxPermission.sandbox_del">
            <img src="~@/assets/img/sand_new/remove.png" />
            <span style="color: red;" >删除</span> 
          </div>
        </div>
      </div>
      <div class="sandbox-body">
        <div class="sand-chart-body" id="sand-chart-body"></div>
        <!-- 缩略图 -->
        <div id="minimap" class="minimap"></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 checkedLinkList" :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="checkedLinkList.length>1"
          @click="foldLink"/>
        </div>
        <div id="link-reference" slot="reference"></div>
      </el-popover>
      </div>
    </div>
    <!-- 目录自定义按钮区域 -->
    <div id="custom-button-zone" class="custom-button-zone">
      <img src="~@/assets/img/data_m/move_ico.png" style="pointer-events: none;" v-permission="permissionBtn.sandboxPermission.sandbox_classify_move"/>
      <img src="~@/assets/img/sand_new/add_outline.png" class="add-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
      <img src="~@/assets/img/sand_new/edit_outline.png" class="edit-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
      <img src="~@/assets/img/sand_new/delete_outline.png" class="delete-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_del"/>
    </div>
    <!-- 添加分类 -->
    <el-dialog
      :title="classifyAddTitle"
      :visible.sync="classifyAddShow"
      :append-to-body="true"
      :close-on-click-modal="false"
      @closed="classifyAddClosed"
      width="560px">
      <div style="padding: 10px 40px 0;">
        <el-form :model="classifyForm" ref="classifyFormRef" :rules="classifyFormRules" 
        label-width="80px">
          <el-form-item label="上级目录" v-if="lastLevelClassifyName">
            {{ lastLevelClassifyName }}
          </el-form-item>
          <el-form-item label="目录名称" prop="SandboxClassifyName">
            <el-input v-model.trim="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
          </el-form-item>
          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety">
            <el-cascader 
              @change="chartPermissionIdChange"
							:options="classifyArr"
							:props="classifyProps"
							v-model="classifyForm.ChartPermissionId" 
							placeholder="请选择对应品种" 
              id="classifyAddCascader"
              ref="chartPermissionCascader"
              :disabled="(classifyForm.SandboxClassifyId && classifyForm.Level!=1) || (!classifyForm.SandboxClassifyId && classifyForm.Level!=0)"
						/>
          </el-form-item>
        </el-form>
        <div style="text-align: center;padding:40px 0 ;">
          <el-button @click="classifyAddSubmit" type="primary" style="width: 120px;" size="large">保存</el-button>
          <el-button @click="classifyAddShow=false" style="width: 120px;margin-left: 28px;" size="large">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 另存为 -->
    <el-dialog
      title="另存为"
      :visible.sync="saveOtherShow"
      :append-to-body="true"
      :close-on-click-modal="false"
      @closed="saveOtherClosed"
      width="600px">
      <div style="padding: 10px 40px 0;" class="save-as-dialog">
        <el-form :model="saveOtherForm" ref="saveOtherFormRef"
        label-width="96px">
          <el-form-item label="逻辑图名称" prop="chartName" :rules="{required:true,message:'请输入逻辑图名称',trigger:'blur'}">
            <el-input v-model="saveOtherForm.chartName" style="width: 317px;" placeholder="请输入逻辑图名称"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="classifyId" :rules="{required:true,message:'请选择分类',trigger:'change'}" >
            <el-cascader 
            :options="onlyClassifyTreeData"
            @change="classifyTreeChange"
            :props="{children: 'Children',
              label: 'SandboxClassifyName',
                value: 'SandboxClassifyId',checkStrictly:true}"
            v-model="saveOtherClassifys" 
            placeholder="请选择分类">
            </el-cascader>
          </el-form-item>
        </el-form>
        <div style="text-align: center;padding:40px 0 ;">
          <el-button @click="saveOtherSubmit" type="primary" style="width: 120px;" size="large">保存</el-button>
          <el-button @click="saveOtherShow=false" style="width: 120px;margin-left: 28px;" size="large">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tree from "vue-giant-tree";
import { dataBaseInterface,sandInterface,customInterence} from '@/api/api.js';
import { svgToBase64 } from '@/utils/svgToblob'
import mindmap from "./common/mindmap"

import { myGraph } from './common/gragh';

  export default {
    name:"sandbox_manage_index",
    components:{tree},
    computed:{
      hasVariety(){
        return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_variety')
      }
    },
    mixins:[mindmap],
    watch: {
      initData(newval) {
        if(!this.graph){
          this.$nextTick(()=>{
            this.init()
            this.graph.fromJSON(newval);
            this.graph.zoomToFit()
          })
        }else{
          this.$nextTick(()=>{
            this.graph.fromJSON(newval);
            this.graph.zoomToFit()
          })
        }
      }
	  },
    data() {
      return {
        SandboxClassifyId:0,
        searchOptions:[],
        searchHaveMore:false,
        rightType:"list",
        pictureHaveMore:false,
        searchParams:{
          SandboxClassifyId:'',
          PageSize:12,
          CurrentIndex:1,
          IsShowMe:false
        },
        searchCurrentIndex:1,
        KeyWord:'',
        searchSandboxId:'',
        total:0,
        pictureList:[],
        treeData:[],
        onlyClassifyTreeData:[],
        setting:{
          data:{
            keep:{
              leaf:true,
              parent:true
            },
            key:{
              name:"SandboxClassifyName",
              children:"Children",
              isParent:"isCatalogue"
            },
          },
          view:{
            showLine:false,
            showIcon:false,
            selectedMulti:false,
            addHoverDom: this.addHoverDom,
          },
          edit:{
            enable:true,
            showRemoveBtn:false,
            showRenameBtn:false,
            drag:{
              isCopy:false,
              isMove:true,
            }
          },
          callback:{
            beforeDrag:this.zTreeDragBefore,
            beforeDrop:this.zTreeDropBefore,
            onDrop:this.zTreeDrop,
            beforeExpand:this.zTreeExpandBefore,
            onClick:this.zTreeClick
          }
        },
        zTreeObj:{},
        lockLoding:null,
        viewSandbox:{},
        activeNode:{},
        addClassifyNodeTid:'',
        locationNode:'',
        movingRecoveData:{
          targetNode:null,
          treeNode:null,
          moveType:''
        },
        graph:null,
        initData:{},
        customButtonDom:'',
        // ------- 添加分类弹窗
        classifyAddTitle:"添加分类",
        classifyAddShow:false,
        lastLevelClassifyName:'',
        classifyForm:{
          SandboxClassifyId:0,
          SandboxClassifyName:'',
          ChartPermissionId:0,
          ChartPermissionName:'',
          ParentId:0,
          Level:0
        },
        classifyFormRules:{
          SandboxClassifyName:{required: true, message:'请输入目录名称', trigger: 'blur'},
          ChartPermissionId:{required: true, message:'请选择对应品种', trigger: 'change'}
        },
        classifyProps: {
          children: 'Items',
          label: 'ClassifyName',
          value: 'ChartPermissionId',
          emitPath:false
			  },
        classifyArr:[],
        // 另存为弹窗
        saveOtherShow:false,
        saveOtherForm:{
          chartName:"",
          classifyId:""
        },
        saveOtherClassifys:[],
        operationType:'view',
        popoverVisible:false,
        popoverFlod:true,
        popoverDom:null,
        popoverTriggerDom:null,
        checkedLinkList:[],
        linkNode:null,
        popoverTimeout:null,
        isSlideLeft:false,
        locationParentIds:''
      }
    },
    created(){
      this.getClassify()
      if(sessionStorage.getItem("sandboxEditBack")){
        this.locationParentIds=sessionStorage.getItem("sandboxEditBack").split(',')
        this.getSandboxDetailFun(this.locationParentIds[this.locationParentIds.length-1])
      }else{
        this.getSandboxList()
      }
      this.getSandboxClassify()
    },
    mounted(){
      this.popoverDom = $('#link-popover')[0];
      this.popoverTriggerDom = $('#link-reference')[0];
      
      this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.addEventListener('mouseleave',this.closePopover)
      this.customButtonDom = $('#custom-button-zone')[0]
    },
    beforeDestroy(){
      this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.removeEventListener('mouseleave',this.closePopover)

    },
    methods:{
      /* 获取品种 */
      getClassify() {
        customInterence.getvariety({
          CompanyType: 'ficc'
        }).then(res => {
          if(res.Ret !== 200)  return
            this.classifyArr = res.Data.List||[ ]
        })
      },
      // 获取沙盘图分类
      getSandboxClassify(parentNode,locationNode) {
        // parentNode--父节点
        // locationNode--展开父节点后需要定位的子节点，拖拽后
        const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
        sandInterface.getSandboxClassify({SandboxClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
          if (res.Ret === 200) {
            let nodesData=res.Data.AllNodes || []
            nodesData.map(item =>{
              // 添加是否是目录的字段
              item.isCatalogue = item.SandboxId?false:true
            })
            if(parentNode){
              this.zTreeObj.addNodes(parentNode,nodesData)
            }else{
              this.treeData = nodesData
            }
            let location = locationNode || this.locationNode
            if(location){
              let searchNode
              let locationId = location.isCatalogue?location.SandboxClassifyId:location.SandboxId
              if(parentNode){
                if(location.isCatalogue){
                  searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId,parentNode)
                }else{
                  searchNode=this.zTreeObj.getNodesByParam('SandboxId',+locationId,parentNode)
                }
                if(!(searchNode && searchNode.length>0)) return 
                this.zTreeClick(null,'',searchNode[0],1)
                this.zTreeObj.selectNode(searchNode[0])
              }else{
                requestAnimationFrame(()=>{
                  searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId)
                  if(!(searchNode && searchNode.length>0)) return 
                  this.zTreeClick(null,'',searchNode[0],1)
                  this.zTreeObj.selectNode(searchNode[0])
                })
              }
              this.locationNode=''
            }else if(this.locationParentIds && this.locationParentIds.length>0){
              // 获取分类列表后需要定位
              requestAnimationFrame(()=>{
                this.sandboxLocation(this.locationParentIds)
                this.locationParentIds=[]
                sessionStorage.removeItem('sandboxEditBack')
              })

            }
          }
        })
      },
      getSandboxList(type){
        if(type == 'setCurrentIndex'){
          this.searchParams.CurrentIndex=1
        }
        sandInterface.getSandboxListV2(this.searchParams).then(res=>{
          if(res.Ret == 200){
            if(!res.Data){
              this.pictureList=[]
              this.total = 0
              this.pictureHaveMore=false
            }else{
              let arr = res.Data.List || []
              this.pictureList=this.searchParams.CurrentIndex == 1 ?arr:[...this.pictureList,...arr]
              this.total = res.Data.Paging.Totals || 0
              this.pictureHaveMore= this.searchParams.CurrentIndex < res.Data.Paging.Pages
            }
            this.rightType='list'
          }
        })
      },
      getSandboxDetailFun(SandboxId){
        sandInterface.getSandboxDetail({SandboxId:SandboxId || this.activeNode.SandboxId}).then(res=>{
          if(res.Ret == 200){
            this.viewSandbox=res.Data
            this.rightType='chart'
            this.initData = JSON.parse(this.viewSandbox.Content)
          }
        })
      },
      getZTree(zTree){
        this.zTreeObj=zTree
      },
      zTreeDragBefore(treeId,treeNodes){
        return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_classify_move')
      },
      zTreeDropBefore(treeId,treeNodes,targetNode,moveType,isCopy){
        if((!targetNode) && (!moveType)) return false
        if(((!treeNodes[0].isCatalogue) && targetNode.Level==1 && moveType!='inner')||
        ((!targetNode.isCatalogue) && moveType=='inner')||
        (treeNodes[0].isCatalogue && targetNode.Level==5 && moveType=='inner')){
          return false
        }
        // 用于接口失败后的还原位置
        this.movingRecoveData.treeNode=treeNodes[0]
        if(treeNodes[0].getPreNode()){
          this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
          this.movingRecoveData.moveType = "next"
        }else if(treeNodes[0].getNextNode()){
          this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
          this.movingRecoveData.moveType = "prev"
        }else if(treeNodes[0].getParentNode()){
          this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
          this.movingRecoveData.moveType = "inner"
        }
      },
      zTreeDrop(e,treeId,treeNodes,targetNode,moveType,isCopy){
        if((!targetNode) && (!moveType)) return
        let parentNode = treeNodes[0].getParentNode()
        let prevNode = treeNodes[0].getPreNode()
        let nextNode = treeNodes[0].getNextNode()
        //移动分类
        let params={
          ClassifyId:treeNodes[0].SandboxClassifyId,
          SandboxId:treeNodes[0].isCatalogue?0:treeNodes[0].SandboxId,
          ParentClassifyId:parentNode?parentNode.SandboxClassifyId:0,
          PrevId:prevNode? (prevNode.isCatalogue?prevNode.SandboxClassifyId:prevNode.SandboxId) :0,
          NextId:nextNode? (nextNode.isCatalogue?nextNode.SandboxClassifyId:nextNode.SandboxId) :0,
          PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
          NextType:nextNode?(nextNode.isCatalogue?1:2):0
        }
        sandInterface.sandboxClassifyMove(params).then(res=>{
          if(res.Ret == 200){
            this.$message.success('移动分类成功')
            if(parentNode){
              this.zTreeObj.removeChildNodes(parentNode)
            }
            this.getSandboxClassify(parentNode,treeNodes[0])
          }else{
            // 接口失败后的还原位置
            let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
            if(!result){
              this.$message.error('目录位置还原失败，刷新目录')
              setTimeout(()=>{
                this.getSandboxClassify()
              },1000)
            }
          }
        })
      },
      zTreeExpandBefore(treeId, treeNode){
        if(treeNode.Children && treeNode.Children.length>0){
          return true
        }else{
          this.getSandboxClassify(treeNode)
        }
      },
      zTreeClick(event, treeId, treeNode,clickFlag){
        if(clickFlag==1){
          if(this.activeNode.SandboxClassifyId == treeNode.SandboxClassifyId &&
          this.activeNode.SandboxId == treeNode.SandboxId){
            return 
          }
          this.activeNode = treeNode
          if(treeNode.isCatalogue){
            // 目录
            this.searchParams.CurrentIndex=1
            this.searchParams.SandboxClassifyId = treeNode.SandboxClassifyId
            this.getSandboxList('setCurrentIndex')
          }else{
            // 沙盘图
            this.getSandboxDetailFun()
          }
        }

        if(clickFlag==0 && treeNode.isCatalogue){
          // 取消选中
          this.activeNode={}
          this.searchParams.CurrentIndex=1
          this.searchParams.SandboxClassifyId = ''
          this.getSandboxList('setCurrentIndex')
        }
      },
      onlyMeHandler(){
        this.activeNode={}
        this.getSandboxClassify()
        this.searchParams.SandboxClassifyId=''
        this.getSandboxList('setCurrentIndex')
      },
      searchHandle(query) {
        this.searchCurrentIndex = 1;
        this.KeyWord = query;
        this.searchSandbox()
		  },
      searchSandbox(){
        sandInterface.getSandboxListV2({...this.searchParams,
          CurrentIndex:this.searchCurrentIndex,SandboxClassifyId:'',
          KeyWord:this.KeyWord}).then(res=>{
            if(res.Ret == 200){
              if(!res.Data){
                this.searchOptions=[]
                this.searchHaveMore=false
              }else{
                let arr = res.Data.List || []
                this.searchOptions=this.searchCurrentIndex==1?arr:[...this.searchOptions,...arr]
                this.searchHaveMore = this.searchCurrentIndex < res.Data.Paging.Pages
              }
            }
          })
      },
      searchLoad() {
        // 加载更多
        if(!this.searchHaveMore) return;
        this.searchCurrentIndex++
        this.searchSandbox()
		  },
      /* 聚焦获取当前检索 */
      inputFocusHandle(e) {
        // 选取
        this.searchCurrentIndex = 1;
        this.KeyWord = e.target.value;
        if(this.KeyWord) {
          this.searchSandbox()
        }else {
          this.searchOptions = [];
        }
      },
      sandboxChange(sandboxId){
        let sandbox=this.searchOptions.find(it => it.SandboxId == sandboxId)
        if(sandbox){
          this.rightType='chart'
          this.viewSandbox=sandbox
          this.initData = sandbox.Content?JSON.parse(sandbox.Content):sandbox.Content
          let ParentClassifys = sandbox.ParentIds.split(',').filter(Boolean)
          ParentClassifys.push(sandbox.SandboxClassifyId)
          ParentClassifys.push(sandbox.SandboxId)
          this.sandboxLocation(ParentClassifys)
        }
      },
      // 添加一级分类
      addLevelOneHandle(){
        this.classifyAddTitle="添加分类"
        this.classifyAddShow=true
        this.addClassifyNodeTid=''
      },
      addClassify(e,node){
        e.stopPropagation()
        this.addClassifyNodeTid = node.tId
        this.lastLevelClassifyName = this.getParentNodeName(node)
        this.classifyAddTitle="添加分类"
        this.classifyForm.Level = node.Level
        this.classifyForm.ParentId = node.SandboxClassifyId
        this.classifyForm.ChartPermissionId = node.ChartPermissionId
        this.classifyForm.ChartPermissionName = node.ChartPermissionName
        this.classifyAddShow=true
      },
      getParentNodeName(node){
        let parentNode = node.getParentNode()
        if(parentNode){
          return this.getParentNodeName(parentNode)+'/'+node.SandboxClassifyName
        }else{
          return node.SandboxClassifyName
        }
      },
      editClassify(e,node){
        e.stopPropagation()
        this.locationNode = node
        let pNode = node.getParentNode()
        this.lastLevelClassifyName = pNode ? pNode.SandboxClassifyName:''
        this.classifyForm.SandboxClassifyId = node.SandboxClassifyId
        this.classifyForm.Level = node.Level
        this.classifyForm.SandboxClassifyName = node.SandboxClassifyName
        this.classifyForm.ChartPermissionId = node.ChartPermissionId
        this.classifyForm.ChartPermissionName = node.ChartPermissionName
        this.classifyAddTitle="编辑分类"
        this.classifyAddShow=true
      },
      deleteClassify(e,node){
        e.stopPropagation()
        sandInterface.deleteSandboxClassifyCheck({SandboxClassifyId:node.SandboxClassifyId}).then(res=>{
          if (res.Ret === 200) {
            /**
             * 0 可删除
             * 1 关联沙盘图
             * 2 有子目录无沙盘图
             */
            const deleteLabelMap = {
              1: '该分类下存在沙盘图，不可删除',
              2: '确认删除当前分类及包含的子分类吗？',
              4: res.Data.TipsMsg
            }

            if([1,4].includes(res.Data.DeleteStatus)) this.$confirm(
                deleteLabelMap[res.Data.DeleteStatus],
                '删除失败',
                {
                confirmButtonText: '知道了',
                showCancelButton:false,
                type: 'error'
              })
            else if([0,2].includes(res.Data.DeleteStatus)) this.$confirm(
                res.Data.DeleteStatus === 2 
                ? deleteLabelMap[res.Data.DeleteStatus]
                : node.SandboxId?'确认删除该沙盘图吗？':'确定删除当前分类吗?', 
                '提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                res.Data.DeleteStatus === 0 && node.SandboxId 
                ? this.delHandle(node.SandboxClassifyId, node.SandboxId, 1)
                : this.delHandle(node.SandboxClassifyId, node.SandboxId);
              }).catch(() => {});
          }
        })
      },
      delHandle(SandboxClassifyId,SandboxId,type){
        let currentNode = this.zTreeObj.getSelectedNodes()[0]
        sandInterface.deleteSandbox({
          SandboxClassifyId,
          SandboxId,
        }).then((res) => {
          if (res.Ret === 200) {
            this.zTreeObj.removeNode(currentNode)
            this.$message.success(res.Msg);
          }
        });
      },
      chartPermissionIdChange(value){
        this.classifyForm.ChartPermissionName=
        this.$refs.chartPermissionCascader.getCheckedNodes()[0] ?
        this.$refs.chartPermissionCascader.getCheckedNodes()[0].label+'' || '':''
      },
      classifyAddSubmit(){
        //提交
        this.$refs.classifyFormRef.validate(valid=>{
          if(valid){
            if(this.classifyForm.SandboxClassifyId){
              //编辑
              let params={
                SandboxClassifyId:this.classifyForm.SandboxClassifyId,
                SandboxClassifyName:this.classifyForm.SandboxClassifyName,
                ChartPermissionId:this.classifyForm.ChartPermissionId,
                ChartPermissionName:this.classifyForm.ChartPermissionName,
              }
              sandInterface.editSandboxClassify(params).then(res=>{
                if(res.Ret == 200){
                  this.classifyAddShow=false
                  this.$message.success(this.classifyAddTitle+"成功")
                  let parentNode = this.locationNode.getParentNode()

                  if(!parentNode){
                    this.getSandboxClassify(null,this.locationNode)
                  }else{
                    this.zTreeObj.removeChildNodes(parentNode)
                    this.zTreeObj.expandNode(parentNode,true,false,false,true)
                    this.zTreeClick(null,'',this.locationNode,1)
                  }
                }
              })
            }else{
              //新增
              let params={
                SandboxClassifyName:this.classifyForm.SandboxClassifyName,
                ParentId:this.classifyForm.ParentId,
                Level:this.classifyForm.Level,
                ChartPermissionId:this.classifyForm.ChartPermissionId,
                ChartPermissionName:this.classifyForm.ChartPermissionName,
              }
              sandInterface.addSandboxClassify(params).then(res=>{
                if(res.Ret == 200){
                  this.classifyAddShow=false
                  this.$message.success(this.classifyAddTitle+"成功")
                  if(!this.addClassifyNodeTid){
                    this.getSandboxClassify()
                  }else{
                    let curNode = this.zTreeObj.getNodeByTId(this.addClassifyNodeTid)
                    this.zTreeObj.removeChildNodes(curNode)
                    this.zTreeObj.expandNode(curNode,true,false,false,true)
                  }
                }
              })
            }

          }
        })
      },
      classifyAddClosed(){
        this.classifyForm={
          SandboxClassifyId:0,
          SandboxClassifyName:'',
          ChartPermissionId:0,
          ChartPermissionName:'',
          ParentId:0,
          Level:0
        }
        this.lastLevelClassifyName=""
        this.$refs.classifyFormRef.clearValidate()
      },
      /* 加载更多 */
      loadMoreSandbox:_.throttle(function(e) {
        let scrollTop = this.$refs.pictureListRef.scrollTop;
        let clientHeight = this.$refs.pictureListRef.clientHeight;
        let scrollHeight = this.$refs.pictureListRef.scrollHeight;
        if(scrollTop + clientHeight >= scrollHeight-10 && this.pictureHaveMore){
          this.searchParams.CurrentIndex++
          this.getSandboxList();
        }
      },300),
      /* 展示详情 */
      detailShowHandle(item) {
        this.viewSandbox=item
        this.rightType='chart' 
        this.initData = JSON.parse(item.Content)
        let ParentClassifys = item.ParentIds.split(',').filter(Boolean)
        ParentClassifys.push(item.SandboxClassifyId)
        ParentClassifys.push(item.SandboxId)
        this.sandboxLocation(ParentClassifys)
      },
      async sandboxLocation(ParentClassifys){
        let beActiveNode=''
        for (let i = 0; i < ParentClassifys.length; i++) {
          const element = ParentClassifys[i];
          let searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+element,beActiveNode)
          if(!(searchNode&&searchNode.length>0)){
            if(!beActiveNode){
              break
            }
            let flag =false
            if(i == ParentClassifys.length-1){
              // 最后一层找沙盘的id SandboxId
              flag = await this.expandNodeAsync(beActiveNode,+element,true)
            }else{
              flag = await this.expandNodeAsync(beActiveNode,+element)
            }

            if(!flag){
              return 
            }else{
              beActiveNode=flag[0]
            }
          }else{
            beActiveNode = searchNode[0]
          }
        }
        // 选中
        this.activeNode = beActiveNode
        setTimeout(()=>{
          this.zTreeObj.selectNode(beActiveNode)
        },300)
      },
      expandNodeAsync(parentNode,activeId,isLast=false){
        return new Promise((resolve,reject)=>{
          let resultNode ;
          if(isLast){
            resultNode = this.zTreeObj.getNodesByParam('SandboxId',activeId,parentNode)
          }else{
            resultNode = this.zTreeObj.getNodesByParam('SandboxClassifyId',activeId,parentNode)
          }
          if(resultNode.length>0){
            resolve(resultNode)
            return 
          }
          this.zTreeObj.removeChildNodes(parentNode)
          sandInterface.getSandboxClassify({SandboxClassifyId:parentNode.SandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
            if (res.Ret === 200) {
              let nodesData=res.Data.AllNodes || []
              nodesData.map(item =>{
                item.isCatalogue = item.SandboxId?false:true
              })
              this.zTreeObj.addNodes(parentNode,nodesData)
              if(isLast){
                resolve(this.zTreeObj.getNodesByParam('SandboxId',activeId,parentNode))
              }else{
                resolve(this.zTreeObj.getNodesByParam('SandboxClassifyId',activeId,parentNode))
              }
            }else{
              resolve(null)
            }
          })
        })
      },
      copyHandle:_.debounce(function ({ PicUrl }){
        if(!PicUrl) return this.$message('暂无内容可复制')
        this.lockLoding = this.$loading({
          lock: true,
          text: '复制图片中...',
          target: '.sandbox-pictures-box',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.src = PicUrl;
        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协议')
          }
        }
      },500),
      deleteHandle(item,type){
        this.$confirm("确定删除该沙盘图吗?", "提示", {
          type: "warning",
        })
        .then(() => {
          sandInterface.deleteSandbox({
          SandboxClassifyId:item.SandboxClassifyId,
          SandboxId:item.SandboxId,
          }).then((res) => {
            if (res.Ret === 200) {
              this.$message.success(res.Msg);
              let result = this.zTreeObj.getNodesByParam('SandboxId',item.SandboxId)[0]
              if(type=='inList'){
                // 在沙盘图列表中删除
                if(result){
                  this.zTreeObj.removeNode(result)
                }
              }else{
                // 在沙盘图详情删除
                this.zTreeObj.removeNode(result)
                let parentNode = result.getParentNode()
                this.zTreeObj.selectNode(parentNode)
                this.zTreeClick(null,'',parentNode,1)
              }
              this.getSandboxList('setCurrentIndex')
              
            }
          });
        })
        .catch(() => {});
      },
      addHoverDom(treeId, treeNode){
        var aObj = $("#" + treeNode.tId + "_a");
        if (aObj.find('#custom-button-zone').length>0) return;
        let dom = this.customButtonDom.cloneNode(true)
        let addClassifyDom = $(dom).find('.add-classify-img')[0]
        let editClassifyDom = $(dom).find('.edit-classify-img')[0]
        let delClassifyDom = $(dom).find('.delete-classify-img')[0]
        if(treeNode.isCatalogue){
          //目录添加自定义按钮
          if(treeNode.Level>4){
            addClassifyDom && (addClassifyDom.style.display='none')
          }else{
            addClassifyDom && addClassifyDom.addEventListener("click",(e)=>this.addClassify(e,treeNode))
          }
          editClassifyDom && editClassifyDom.addEventListener("click",(e)=>this.editClassify(e,treeNode))
          delClassifyDom && delClassifyDom.addEventListener("click",(e)=>this.deleteClassify(e,treeNode))

        }else{
          addClassifyDom && (addClassifyDom.style.display='none')
          editClassifyDom && (editClassifyDom.style.display='none')
          delClassifyDom && (delClassifyDom.style.display='none')
        }
        aObj.append(dom);
      },
      addSand(){
        const { href } = this.$router.resolve({ path: '/sandflow' });
        window.open(href, '_blank');
      },
      editSand(){
        const { href } = this.$router.resolve({ path: '/sandflow' ,query:{SandboxId:this.viewSandbox.SandboxId}});
        window.open(href, '_blank');
      },
      saveOther(){
        sandInterface.getSandboxClassifyOnly().then(res=>{
          if (res.Ret === 200) {
            this.onlyClassifyTreeData=res.Data.AllNodes || []
          }
        })
        this.saveOtherForm.chartName = this.viewSandbox.Name+"(1)"
        this.saveOtherShow=true
      },
      classifyTreeChange(value){
        if(!value){
          this.saveOtherForm.classifyId=''
        }
        this.saveOtherForm.classifyId=value[value.length-1]
      },
      saveOtherSubmit: _.debounce( function() {
        if(!this.graph.toJSON().cells.length) return this.$message.warning('画布无内容');
        this.$refs.saveOtherFormRef.validate(valid=>{
          if(valid){
            const { Content,MindmapData} = this.viewSandbox;
            this.lockLoding = this.$loading({
              lock: true,
              text: '保存中...',
              target: '.save-as-dialog',
              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);

              // return 
              const { Ret , Data : sandData} = await sandInterface.sandboxSaveV2({
                Name:this.saveOtherForm.chartName,
                SandboxClassifyId: Number(this.saveOtherForm.classifyId),
                Content,
                PicUrl: Data?Data.ResourceUrl:'',
                SvgData: dataUri,
                MindmapData
              })

              if(Ret !== 200){
                this.lockLoding.close();
                return;
              }
              this.lockLoding.close();
              this.$message.success("另存为成功")
              //沙盘图详情
              this.getSandboxDetailFun(sandData.SandboxId)

              this.saveOtherClassifys.push(sandData.SandboxId)
              this.sandboxLocation(this.saveOtherClassifys)
              this.saveOtherShow=false
            },{
              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),
      saveOtherClosed(){
        this.saveOtherForm={
          chartName:"",
          classifyId:""
        }
        this.saveOtherClassifys=[]
        // this.selectZTreeObj.cancelSelectedNode()
        this.$refs.saveOtherFormRef.clearValidate()
      },
      copySandHandle: _.debounce(function() {
        const { cells } = this.graph.toJSON();
        if(!cells.length) return this.$message.warning('当前画布无可复制内容');

        this.lockLoding = this.$loading({
          lock: true,
          text: '复制图片中...',
          target: '.sandbox-chart-box',
          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:true,//让svg为实际图片大小
        beforeSerialize:(svg)=>{
          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-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),
      //==============================画布
      // 初始化画布
      init() {
        const graph = new myGraph('sand-chart-body',null,'view');
        this.graph = graph;
        graph.on('node:mouseenter', ({ node, e }) => {
          let data = node.data
          this.linkNode = node
          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.checkedLinkList = currentLinks.filter(link =>{
                  return EdbInfoIdList.includes(link.Id) || ChartInfoIdList.includes(link.Id) || ReportIdList.includes(link.Id)
                })
                let clinetPositon=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
              }
            })
          }
        })
      
        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)
          }
        })
		  },
      foldLink(){
        this.popoverFlod=!this.popoverFlod 
        if(this.linkNode){
          this.linkNode.data.linkFold = this.popoverFlod
        }
        this.popoverVisible=false
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },
      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');
        }
      },
      clearPopoverTimeout(){
        clearTimeout(this.popoverTimeout)
        this.popoverTimeout=null 
      },
      closePopover(){
        this.popoverVisible=false
      },
      /* 向左收起 展开 */
      slideHandle() {
        this.isSlideLeft = !this.isSlideLeft;
      },
    }
  }
</script>

<style lang="scss" scoped>
#sandbox-index-container{
  height: calc(100vh - 120px);
  min-height: 600px;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  .sandbox-content-tree-box{
    background-color: white;
    min-width: 20vw;
    width: 20vw;
    height: 100%;
    border: solid 1px #DCDFE6;
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 16px;
    position: relative;
    .sandbox-content-tree-header{
      box-sizing: border-box;
      padding: 20px;
      border-bottom: solid 1px #DCDFE6;
      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sandbox-content-tree-body{
      padding: 20px 0;
      box-sizing: border-box;
      height: calc(100% - 80px);
      .sandbox-content-tree{
        height: calc(100% - 60px);
        padding: 0 20px;
        overflow: auto;
        scroll-behavior: smooth;
        .add-classify{
          margin: 30px 0 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: 12px; 
            height: 12px; 
            margin-right: 6px;
            cursor: pointer;
          }
          span{
            font-size: 14px;
            color: #0052D9;
            cursor: pointer;
          }
        }
      }
    }
  }
  .sandbox-pictures-box{
    flex-grow: 1;
    height: 100%;
    .pictures-count{
      font-size: 14px;
      color: #333333; 
      margin-bottom: 14px;
    }
    .pictures-box{
      display: flex;
      flex-wrap: wrap;
      max-height: calc(100% - 34px);
      overflow: hidden;
      overflow-y: auto;
      .pictures-item{
        background-color: white;
        border: 1px solid #DCDFE6;
        padding: 0 10px 10px;
        .pictures-item-header{
          padding: 10px 0;
          border-bottom: 1px solid #DCDFE6;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .text_oneLine{
            font-size: 16px;
            color: #333333;
            font-weight: 500;
            
          } 
        }
        .picture-img{
          width: 100%;
          height: 230px;
          object-fit: fill !important;
          cursor: pointer;
          padding: 10px 0;
        }
        .item-bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;
          span{
            font-size: 14px;
            color: #333333;
          }
          .item-bottom-buttons{
            width: 75px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            span{
              color: #0052D9;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .sandbox-chart-box{
    background-color: white;
    // flex-grow: 1;
    height: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: hidden;
    .sandbox-chart-head{
      padding: 20px;
      border-bottom: 1px solid #DCDFE6;
      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      white-space: nowrap;
      .sandbox-chartHead-author{
        font-size: 16px;
        color: #666666;
      }
      .sandbox-chartHead-title{
        font-size: 16px;
        color: #333333;
        padding: 0 12px;
      }
      .sandbox-chartHead-options{
        display: flex;
        align-items: center;
        margin-right: -20px;
        .chartHead-options-button{
          margin-right: 20px;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          cursor: pointer;
          img{
            height: 16px;
            margin-right: 3px;
          }
          span{
            color: #0052D9;
          }
        }
      }
    }
  }

  .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) {
    .sandbox-content-tree-box{
      min-width: 330px;
      width: 330px;
    }

  }
  .custom-button-zone{
    // display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    display: none;
    right: 12px;
    height: 100%;
    img{
      cursor: pointer;
      height: 16px;
      margin-right: 8px;
    }
  }
}
#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;
  }
}
</style>
<style lang="scss">
.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;
      }
    }
  }

}
.ztree.zTreeDragUL{
  width: 300px;
	z-index: 10000!important;
}
.tmpzTreeMove_arrow{
  position: absolute;
	z-index: 10000!important;
  &::after{
    content: url('../../assets/img/sand_new/tools/arrow-end.png');
  }
}
.el-cascader{
  .el-input{
    width: 317px;
  }
}
.classify-popper{
  height: 400px;
  overflow: auto;
}
.classify-cascader-popper{
  display: none;
}
.sandbox-body{
  height: calc(100% - 62px);
  display: flex;
  position: relative;
  #link-reference{
    position: fixed;
    z-index: -1;
    top: -99999px;
    left: -99999px;
    background-color: transparent;
  }
  .minimap{
    position:absolute;
    right:6px;
    bottom:6px;
    box-sizing: border-box;
  }
  #sand-chart-body{
    flex: 1;
  }
  .x6-graph-scroller {
    flex: 1;
  }

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

  /* reseize 框样式 */
  .x6-widget-transform {
    .x6-widget-transform-resize {
      border-radius: 0;
    }
  }
  .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 {
    display: none;
    pointer-events:none;
  }
}
</style>