
<template>
  <draggable v-model="contentList" group="people" :sort="true" item-key="id" @change="chageDrag" v-bind="dragOptions" :move="onMove" style="height:100%;">
        <template #item="{ element }">
          <div class="drag-tool-d" @click="active(element)" :id="element.id" :class="{active: element.id === currentModule.id}"  @mouseover="mouseClick(element.id,0)" @mouseout="mouseClick(element.id,1)">
            <div class="drag-l">
              <div class="drag-btn-d _fc-drag-btn" style="cursor: move;">
                  <i class="fc-icon icon-move"></i>
              </div>
            </div>
            <div class="drag-r">
                <!-- <div class="drag-btn-d" @click="operate('addTable', element)" style="background-color: #2E73FF;"  title="下方添加表格">
                    <i class="fc-icon icon-add"></i>
                </div>
                <div class="drag-btn-d" @click="operate('addGrid', element)" style="background-color: #2E73FF;" title="下方添加栅格">
                    <i class="fc-icon icon-add-child"></i>
                </div> -->
                <div class="drag-btn-d drag-btn-danger" @click="operate('delete', element)"  title="删除">
                    <i class="fc-icon icon-delete"></i>
                </div>
            </div>   
            <div class="drag-l-point" :id="'draglpointHeader'+element.id" style="display:none;">
              <el-icon :size="20" style="color:white;"><sc-icon-pointer /></el-icon>  
            </div>              
            <div class="drag-hint" :style="showOrHiddenHit(element)" v-if="fresh">拖拽组件到此容器内</div>     
              <sc-designer-table-drag :ref="'scDesignerHeaderTableDrag'+element.id" :id='"Table"+element.id' v-if="element.category === 2 && (element.name === 'table' || element.name === 'scanTable' || element.name === 'reportHeader' || element.name === 'doctorInfo' || element.name === 'patientInfo' )" :dynamicConfig="element" @activeModuleClick="taksActiveModuleClick" @setTableModuleHeightClick="setTableModuleHeightClick" />
              <sc-designer-task-drag :ref="'scDesignerHeaderTaskDrag'+element.id" :id='"Task"+element.id' v-else-if="element.category === 2" :dynamicConfig="element" @activeModuleClick="taksActiveModuleClick" @updateParentId="updateParentId" @setGridModuleWidthClick="setGridModuleWidthClick" />
          </div>
        </template>
    </draggable>
</template>

<script>
import draggable from 'vuedraggable'
import designerInfo from '@/config/designer';

export default {
    name: 'DragTool',
    components: {
      draggable,
    },
    props: {
      defaultConfig: { type: Object, default: () => {} },
		},
    data() {
      return {
          fresh: 1,
          contentList:[],
          loading: false,
          form: {},
          currentModule: {},
          activeFlag: false,
          reportDragControls:["diagnosis","footer","header","replenish","scanInfo","ultrasoundImageList"],
          reportTableDragControls:["table", "scanTable" ,"reportHeader","doctorInfo", "patientInfo"],
      };
    },
    //监听
		watch: {
      defaultConfig(){
				this.defaultRender()
			},
		},
		mounted() {
			if (Object.keys(this.defaultConfig).length > 0){
				this.defaultRender()
			}
		},
    created() {
        window.addEventListener('keydown', this.keyOperateClick, false);
    },
    unmounted() {
        window.removeEventListener('keydown', this.keyOperateClick, false);
    },
    methods: {
      //设置单元格居上位置
      setCellMarginTop(item, type)
      {
        if (item.name === "cell" && item.result) {
          if (this.$refs['scDesignerHeaderTableDrag'+item.result.parentId]) {
            this.$refs['scDesignerHeaderTableDrag'+item.result.parentId].setCellMarginTop(item, type);
          }
        }
      },
      mouseClick(id, type) {
        if (type === 0) {
          //移入
          document.getElementById('draglpointHeader'+id).style.display = "block"; 
        }
        else {
          //移出
          document.getElementById('draglpointHeader'+id).style.display = "none"; 
        }
      },
      //设定当前有效标签
      active(ele) {
        if (!this.activeFlag)
        {
          if (ele){
            this.currentModule = ele;
            let reportDragControls = this.reportDragControls;
            this.contentList.map(item => {
              if (item.name === "grid" || reportDragControls.some(f=> f == item.name)) {
                this.$refs['scDesignerHeaderTaskDrag'+item.id].taksActiveModuleClick(this.currentModule);
              } 
              else {
                this.$refs['scDesignerHeaderTableDrag'+item.id].taksActiveModuleClick(this.currentModule);
              }
            });
            this.bindModuleAttribute();
          }
        }
        else {
          this.$emit("dragActiveEventClick", 'header');
        }
        this.activeFlag = false;
      },
      //快捷键操作
      keyOperateClick(e) {
        if ((e.key === 'Delete')) { 
          if (this.contentList.indexOf(this.currentModule) >= 0) {
            this.contentList.splice(this.contentList.indexOf(this.currentModule), 1)
          }
          // 阻止默认事件
          e.preventDefault();
        }
      },
      //拖拽触发事件
      chageDrag(item) {
        if (item){
          //表示移动
          if (item.moved)
          {
            this.currentModule = item.moved.element;
          }
          //表示新增
          else if (item.added)
          {
            this.currentModule = item.added.element;
            this.setTableModuleHeightClick();
          }
          let reportDragControls = this.reportDragControls;
          this.contentList.map(item => {
            if (item.name === "grid" || reportDragControls.some(f=> f == item.name)) {
              if (this.$refs['scDesignerHeaderTaskDrag'+item.id]) {
                this.$refs['scDesignerHeaderTaskDrag'+item.id].sortRender(item.result.tasks, this.currentModule);
              }
            }
            else {
              if (this.$refs['scDesignerHeaderTableDrag'+item.id]) {
                this.$refs['scDesignerHeaderTableDrag'+item.id].sortRender(item.result.tasks, this.currentModule);
              }
            }
          });
          this.bindModuleAttribute();
        }
      },
      //操作
      operate(type, ele) {
        var index = -1;
        this.contentList.some((item, i) => {
          if (item.id === ele.id)
          {
            index = i;
            return true;
          }
        });
        //删除
        if (type === "delete")
        {
          if (index >= 0)
          {
            this.contentList.splice(index, 1)
          }
        }
        //添加栅格
        else if (type === "addGrid")
        {
          if (index >= 0)
          {
            var newModule = designerInfo.initAppointModule('grid');
            this.contentList.splice((index + 1), 0, newModule);
          }
        }
        //添加表格
        else if (type === "addTable")
        {
          if (index >= 0)
          {
            var tableModule = designerInfo.initAppointModule("table");
            this.contentList.splice((index + 1), 0, tableModule);
          }
        }
        this.setTableModuleHeightClick();
      },
      //回调父页面，绑定组件
      bindModuleAttribute(elementModule) {
        if (elementModule)
        {
          this.$emit("dragAttributeEvent", elementModule, this.contentList)
        }
        else
        {
          if (this.currentModule)
          {
            this.$emit("dragAttributeEvent", this.currentModule, this.contentList)
          }
        }
      },
      //重载，不需要回调父页面
      reloadDynamicObj(dynamicObj, dynamicList, parentId) {
        this.currentModule = dynamicObj;
        //重置右侧数据
        this.contentList = dynamicList;
        var parentModule = null;
        this.contentList.some(c => {
          if (c.id === parentId)
          {
            parentModule = c;
            return false;
          }
        });
        if (parentModule)
        { 
          if (parentModule.name === "grid" || this.reportDragControls.some(f=> f == parentModule.name)) {
            if (this.$refs['scDesignerHeaderTaskDrag'+parentModule.id]) {
              this.$refs['scDesignerHeaderTaskDrag'+parentModule.id].sortRender(parentModule.result.tasks, this.currentModule);
            }
          }
          else {
            if (this.$refs['scDesignerHeaderTableDrag'+parentModule.id]) {
              this.$refs['scDesignerHeaderTableDrag'+parentModule.id].sortRender(parentModule.result.tasks, this.currentModule);
            }
          }
        }
      },
      removeDynamicObj(dynamicObj) {
        var newIndex = -1;
        this.contentList.some((c, index) => {
          if (c.id === dynamicObj.id)
          {
            newIndex = index;
            return true;
          }
        });
        if (newIndex >= 0) {
          this.contentList.splice(newIndex, 1);
          this.currentModule = {};
        }
      },
      //动态数据绑定加载，index页调�
      loadDynamicObj(dynamicObj) {
        if (dynamicObj && dynamicObj.result && dynamicObj.result.tasks && dynamicObj.result.tasks.length > 0) {
          this.currentModule = dynamicObj;
          //重置右侧数据�
          this.contentList.map(c => {
            if (c.id === this.currentModule.id)
            {
              c = this.currentModule;
            }
          });
          if (this.currentModule.name === "grid" || this.reportDragControls.some(f=> f == this.currentModule.name)) {
            if (this.$refs['scDesignerHeaderTaskDrag'+this.currentModule.id]) {
              this.$refs['scDesignerHeaderTaskDrag'+this.currentModule.id].sortRender(this.currentModule.result.tasks);
              this.fresh += 1;
            }
          }
          this.tableOperateEvent();
          this.scanTableOperateEvent();
        }
      },
      clearActiveModuel(dynamicObj) {
        this.currentModule = dynamicObj;
        this.contentList.forEach(c => {
            if (c.name === "grid" || this.reportDragControls.some(f=> f == c.name)) {
              if (this.$refs['scDesignerHeaderTaskDrag'+c.id]) {
                this.$refs['scDesignerHeaderTaskDrag'+c.id].taksActiveModuleClick(dynamicObj);
              }
            }
            else {
              if (this.$refs['scDesignerHeaderTableDrag'+c.id]) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].taksActiveModuleClick(dynamicObj);
              }
            }
        });
      },
      //扫查表格操作
      scanTableOperateEvent() {
        if (this.currentModule.name === "scanTable") {
          this.contentList.some(c => {
            if (c.id === this.currentModule.id)
            {
              if (this.$refs['scDesignerHeaderTableDrag'+c.id]) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].resetTable(c);
                this.currentModule = c;
              }
            }
          });
        }
        else if (this.currentModule.name === "patientInfo" || this.currentModule.name === "doctorInfo" || this.currentModule.name === "reportHeader") {
           this.contentList.some(d => {
            if (d.id === this.currentModule.id)
            {
              if (this.$refs['scDesignerHeaderTableDrag'+d.id]) {
                this.$refs['scDesignerHeaderTableDrag'+d.id].resetGeneralTable(d);
                this.currentModule = d;
              }
            }
          });
        }
      },
      //表格操作
      tableOperateEvent() {
        if (this.currentModule.name === "cell") {
          this.contentList.some(c => {
            if (c.id === this.currentModule.result.parentId)
            {
              if (this.currentModule.result.property.deleteRow) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].delRow(c, this.currentModule.result.base.rowStartIndex);
                this.currentModule.result.property.deleteRow = false;
                this.currentModule = c;
              }
              else if (this.currentModule.result.property.deleteColumn) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].delCol(c, this.currentModule.result.base.colStartIndex);
                this.currentModule.result.property.deleteColumn = false;
                this.currentModule = c;
              }
              else if (this.currentModule.result.property.insertTopCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].addRow(0, c, this.currentModule.result.base.rowStartIndex);
                this.currentModule.result.property.insertTopCell = false;
              }
              else if (this.currentModule.result.property.insertBottomCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].addRow(1, c, this.currentModule.result.base.rowStartIndex);
                this.currentModule.result.property.insertBottomCell = false;
              }
              else if (this.currentModule.result.property.insertLeftCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].addCol(0, c, this.currentModule.result.base.colStartIndex);
                this.currentModule.result.property.insertLeftCell = false;
              }
              else if (this.currentModule.result.property.insertRightCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].addCol(1, c, this.currentModule.result.base.colStartIndex);
                this.currentModule.result.property.insertRightCell = false;
              }
              else if (this.currentModule.result.property.mergeRightCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].merge(c, this.currentModule.result.base.rowStartIndex, this.currentModule.result.base.colStartIndex, this.currentModule.result.base.rowSpan, (this.currentModule.result.base.colSpan + 1), 1);
                this.currentModule.result.property.mergeRightCell = false;
              }
              else if (this.currentModule.result.property.mergeBottomCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].merge(c, this.currentModule.result.base.rowStartIndex, this.currentModule.result.base.colStartIndex, (this.currentModule.result.base.rowSpan + 1), this.currentModule.result.base.colSpan, 2);
                this.currentModule.result.property.mergeBottomCell = false;
              }
              else if (this.currentModule.result.property.spliceCell) {
                this.$refs['scDesignerHeaderTableDrag'+c.id].splitCell(c, this.currentModule.result.base.rowStartIndex, this.currentModule.result.base.colStartIndex);
                this.currentModule.result.property.spliceCell = false;
              }
              else if (!c.result.pattern.avgColumnWidth && (this.currentModule.result.property.cellColumnWidth > 0 || this.currentModule.result.property.cellRowHeight > 0)) {
                if (this.currentModule.result.property.cellColumnWidth > 0) {
                  this.$refs['scDesignerHeaderTableDrag'+c.id].setColsWidth(c, this.currentModule.result.base.colStartIndex, this.currentModule.result.property.cellColumnWidth);
                }
                if (this.currentModule.result.property.cellRowHeight > 0) {
                  this.$refs['scDesignerHeaderTableDrag'+c.id].setRowsHeight(c, this.currentModule.result.property.cellRowHeightType, this.currentModule.result.base.rowStartIndex, this.currentModule.result.property.cellRowHeight);
                }
              }
              return true;
            }
          });
          this.$emit("dragAttributeEvent", this.currentModule, this.contentList, 2);
        }
      },
      //加载默认数据
      loadDefaultData(jsonData) { 
        if (jsonData && jsonData.length > 0) {
          this.contentList = jsonData;
        }
        else {
          this.contentList = [];
        }
        this.currentModule = this.contentList[0];
        this.bindModuleAttribute();
      },
      //加载默认容器
      defaultRender() {
        if (this.contentList.length <= 0) {
          this.contentList.push(this.defaultConfig);
          this.currentModule = this.defaultConfig;
          this.bindModuleAttribute();
        }
      },
      //子组件选中事件
      taksActiveModuleClick(type, ele, flag, parentId, childTasks) {
        if (type === 0)//表示选中�
        {
          this.currentModule = ele;
          let reportDragControls = this.reportDragControls;
          this.contentList.map(item => {
            if (item.id != parentId)
            {
              if (item.name === "grid"  || reportDragControls.some(f=> f == item.name)) {
                if (this.$refs['scDesignerHeaderTaskDrag'+item.id]) {
                  this.$refs['scDesignerHeaderTaskDrag'+item.id].taksActiveModuleClick(this.currentModule);
                }
              }
              else {
                if (this.$refs['scDesignerHeaderTaskDrag'+item.id]) {
                  this.$refs['scDesignerHeaderTaskDrag'+item.id].taksActiveModuleClick(this.currentModule);
                }
              }
            }
          });
          this.activeFlag = flag;
        }
        else if (type === 1)//表示更新对应的tasks
        {
          this.contentList.map(item => {
            if (item.id === parentId)
            {
              item.result.tasks = childTasks
            }
          });
          this.bindModuleAttribute(ele);
        }
      },
      updateParentId(parentId, childTasks, elementModule){
        this.contentList.map(item => {
          if (item.id === parentId)
          {
            item.result.tasks = childTasks
          }
        });
        this.$emit("dragAttributeEvent", elementModule, this.contentList, 1);
      },
      //移动
      onMove(ele){
        var targetElement = ele.draggedContext.element;
        if (ele.relatedContext.list.length <= 0)
        {
          //表示为字容器，只能接收基础组件
          if (targetElement.name === "grid" || this.reportDragControls.some(f=> f == targetElement.name) || this.reportTableDragControls.some(f=> f == targetElement.name)) {
            return false;
          }
          else {
              return true;
          }
        }
        else
        {
            //表示主容器内容为容器内拖拽的第一个组件，此时主容器只能接收布局组件和报告组件
            var targetElementItem = ele.relatedContext.list[0];
            if (targetElement.name === "grid" || this.reportDragControls.some(f=> f == targetElement.name) || this.reportTableDragControls.some(f=> f == targetElement.name)) {
              //表明是主容器，只能接收布局组件
              if (targetElementItem.name === "grid" || this.reportDragControls.some(f=> f == targetElementItem.name) || this.reportTableDragControls.some(f=> f == targetElement.name))
              {
                  return true;
              }
              else
              {
                  return false;
              }
            }
            else {
              //子容器，只能接收基础组件和报告组件
              if (targetElement.name === "grid" || this.reportDragControls.some(f=> f == targetElement.name) || this.reportTableDragControls.some(f=> f == targetElement.name)) {
                  return false;
              }
              else {
                  return true;
              }
            }
        }
      },
      //显示或隐藏提示信�
      showOrHiddenHit(ele) {
        if (ele && ele.result && ele.result.tasks && ele.result.tasks.length > 0)
        {
          return "display:none;"
        }
        else
        {
          if (ele && ele.name === 'table') {
            return "display:none;"
          }
          return "display:block;"
        }
      },
      //清空
      clearDrag() {
          this.contentList = [];
          this.currentModule = {};
      },
      setGridModuleWidthClick() {
        this.$emit("headerAndFooterRenderEvent", this.contentList)
      },
      setTableModuleHeightClick() {
        this.$emit("headerAndFooterRenderEvent", this.contentList)
      },
      setHFGridModuleWidthClick(childModuleId, width, mainModuleId) {
        this.contentList.some(c => {
          if (c.id === mainModuleId)
          {
            if (c.name === "ultrasoundImageList")
            {
              if (parseInt(c.result.pattern.rowNumPerPage) != 4)
              {
                var avgTempHeight = parseFloat(710.1 / 4);
                var curImageoffsetHeight = avgTempHeight * parseFloat(c.result.pattern.rowNumPerPage);
                c["displayContentList"] = [
                {
                    rowIndex: 1,
                    offsetWidth: 0,
                    offsetHeight: curImageoffsetHeight,//4行
                    moduleIdList: []
                }];
              }
            }
            else 
            {
              var addWidth = 0;
              var rowIndex = 1;
              var childModuleIdList = [];
              var maxOffsetHeight = 0;
              c["displayContentList"] = [];
              if(c.result && c.result.tasks && c.result.tasks.length > 0) {
                c.result.tasks.forEach(d => {
                  if (d.id === childModuleId) {
                    d.result.offsetWidth = width;
                  }
                  if (addWidth > 0 && (addWidth + d.result.offsetWidth) >= this.curOffsetWidth) 
                  {
                    //添加行，然后重置
                    var displayRow = {
                      rowIndex: rowIndex,
                      offsetWidth: addWidth,
                      offsetHeight: maxOffsetHeight,
                      moduleIdList: childModuleIdList
                    }
                    addWidth = 0;
                    rowIndex++;
                    childModuleIdList = [];
                    maxOffsetHeight = 0;
                    c["displayContentList"].push(displayRow);
                  }
                  //继续处理内容
                  childModuleIdList.push(d.id);
                  addWidth += d.result.offsetWidth;
                  if (d.result.offsetHeight > maxOffsetHeight)
                  {
                    maxOffsetHeight = d.result.offsetHeight;
                  }
                });
                
                //剩余的项也要添加一行
                if (maxOffsetHeight > 0) 
                {
                  var lastDisplayRow = {
                    rowIndex: rowIndex,
                    offsetWidth: addWidth,
                    offsetHeight: maxOffsetHeight,
                    moduleIdList: childModuleIdList
                  }
                  c["displayContentList"].push(lastDisplayRow);
                }
              }
            }
            return true;
          }
        });
        //console.log("setGrid", this.contentList);
        this.$emit("dragSetHeightEvent", this.contentList)
      },
      setHFTableModuleHeightClick(mainModuleId, tableContentList) {
        this.contentList.some(c => {
          if (c.id === mainModuleId)
          {
            if(c.result && c.result.tasks) {
              c.result.tasks = tableContentList;
              if (c.result.tasks.length > 0 && c.result.base.rowCount > 0) {
                c["displayContentList"] = [];
                //遍历行
                var mergeShowRows = [];
                for (var iterRowIndex = 1; iterRowIndex <= c.result.base.rowCount; iterRowIndex++)
                {
                  if (mergeShowRows.indexOf(iterRowIndex) >= 0)
                  {
                    //找到了就不执行
                    continue;
                  }
                  var maxCellHeight = 0;
                  var childModuleIdList = [];
                  //查询是否有跨行的
                  var rowSpanCellList = c.result.tasks.filter(d => d.result.base.rowStartIndex === iterRowIndex && d.result.base.rowSpan > 1);
                  if (rowSpanCellList && rowSpanCellList.length > 0)
                  {
                    //跨行的一起显示
                    var maxRowSpan = 0;
                    //找到跨行跨的最多的一个
                    rowSpanCellList.some(d => {
                      if (d.result.base.rowSpan > maxRowSpan)
                      {
                        maxRowSpan = d.result.base.rowSpan;
                      }
                    });
                    //把跨行的数据排除掉，防止重复循环
                    for(var j = 1; j <= maxRowSpan; j++)
                    {
                      mergeShowRows.push(j);
                    }
                    //遍历每列且跨行的单元格，计算出最高的单元格高度
                    for (var k = 1; k <= c.result.base.columnCount; k++)
                    {
                      var tempMaxSelectedHeight = 0;
                      var selectedColList = c.result.tasks.filter(d => d.result.base.rowStartIndex <= maxRowSpan && d.result.base.colStartIndex === k);
                      if (selectedColList && selectedColList.length > 0) 
                      {
                        selectedColList.forEach(e => {
                          tempMaxSelectedHeight += e.result.offsetHeight;
                        });
                      }
                      if (tempMaxSelectedHeight > maxCellHeight)
                      {
                        maxCellHeight = tempMaxSelectedHeight;
                      }
                    }
                    //遍历这些单元格，把id放到数组中
                    c.result.tasks.some(f => {
                      if (f.result.base.rowStartIndex <= maxRowSpan)
                      {
                        childModuleIdList.push(f.id);
                      }
                    });
                    //存储数据
                    var mergeDisplayRow = {
                      rowIndex: iterRowIndex,
                      offsetWidth: 0,
                      offsetHeight: maxCellHeight,
                      moduleIdList: childModuleIdList
                    }
                    c["displayContentList"].push(mergeDisplayRow);
                  }
                  else
                  {
                    //非跨行，可以独立显示
                    mergeShowRows.push(iterRowIndex);
                    //遍历这些单元格，把id放到数组中,同时计算单元格最大高度
                    c.result.tasks.some(g => {
                      if (g.result.base.rowStartIndex === iterRowIndex)
                      {
                        childModuleIdList.push(g.id);
                        if (g.result.offsetHeight > maxCellHeight)
                        {
                          maxCellHeight = g.result.offsetHeight;
                        }
                      }
                    });
                    //存储数据
                    var lastDisplayRow = {
                      rowIndex: iterRowIndex,
                      offsetWidth: 0,
                      offsetHeight: maxCellHeight,
                      moduleIdList: childModuleIdList
                    }
                    c["displayContentList"].push(lastDisplayRow);
                  }
                }
              }
            }
            return true;
          }
        });
        //console.log("setTable", this.contentList);
        this.$emit("dragSetHeightEvent", this.contentList)
      }
    },
    computed: {
      dragOptions() {
        return {
            animation: 200,
            group: "people",
            disabled: false,
            ghostClass: "ghost"
        };
      },
    }
};
</script>

<style>
.drag-tool-d {
  position: relative;
  min-height: 20px;
  box-sizing: border-box;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
  outline: 1px dashed rgb(230, 162, 60);
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

.drag-tool-d .drag-tool-d {
  margin: 5px;
}

.drag-tool-d + .drag-tool-d {
  margin-top: 1px;
}

.drag-tool-d.active {
  outline: 1px solid rgb(230, 162, 60);
}

.drag-tool-d.active > div > .drag-btn-d {
  display: flex;
}

.drag-tool-d .drag-btn-d {
  display: none;
}

.drag-r {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 1904;
}

.drag-l {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1904

}

.drag-btn-d {
  height: 18px;
  width: 18px;
  color: #fff;
  background-color: rgb(230, 162, 60);
  text-align: center;
  line-height: 20px;
  padding-bottom: 1px;
  float: left;
  cursor: pointer;
  justify-content: center;
}

.drag-btn-d + .drag-btn-d {
  margin-left: 2px;
}

.drag-btn-danger {
  background-color: #FF2E2E;
}

.drag-btn-d i {
  font-size: 13px;
}

.drag-mask{
    z-index: 1900;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
;}

.drag-hint{
  font-size:16px;
  font-weight:600;
  position: absolute;
  right: 40%;
  bottom: 10px;
  z-index: 1904;
}
</style>
