// 左侧树形分类
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';

export default {
  data() {
    return {};
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function(e) {
				var init = e.clientX;
				var box = $("#box")[0]
				let total_wid = box.offsetWidth
        var left = $("#left")[0];
        var right = $("#right")[0];
        var initWidth = left.offsetWidth;
        document.onmousemove = function(e) {
          var end = e.clientX;
					if(end > 310){
            var newWidth = end - init + initWidth;
						// right.style.width = total_wid-end+80 +'px'
						right.style.width = total_wid - newWidth + 'px'
            left.style.width = newWidth + "px";
          }else{
            end = 350;
            // 最小宽度300
            left.style.width = 300 + "px";
						// right.style.width = total_wid-300-20 +'px'
          }
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
					e.releaseCapture && e.releaseCapture();
        };
				e.setCapture && e.setCapture();
				return false;
      };
    }
  },

  methods: {
    /* 根据unicode展开树结构并选中当前图表 重置图表配置 日期区间 */
    selectCurrentNode({ code, id, classifyId }) {
      console.log('params',code,id,classifyId)
      this.select_node = code;
      this.select_id = id;
      
      // 查找图表的分类父级id
      
    },

    // 查找树节点所有父节点
    findParentNodeHandle(arr, id,paramName='UniqueCode') {
      // 遍历取父级code push数组
      for (let i of arr) {
        if (i.ClassifyId === id) {
          return [i[paramName]];
        }
        if (i.Children) {
          let node = this.findParentNodeHandle(i.Children, id,paramName);
          if (node) {
            return node.concat(i[paramName]);
          }
        }
      }
    },

    /* 拖动时node宽度跟随变化 */
    resetNodeStyle: _.debounce(function(node) {
			const tree = $('.target_tree')[0];
			let width = tree.offsetWidth;
			// let label_wid = width > 500 ? 'auto' : (width <= 300 && width < 360) ?  100 : 0.7*width;
			let label_wid =
				width > 500
					? 'auto'
					: width <= 260
					? 80
					: 0.5 * width;
			this.$set(node, 'Nodewidth', label_wid + 'px');
		},200),

    	/* 双击label出现input修改框 */
		editNodeLabel(data) {

      //目录名称可以双击修改
      if(data.EdbInfoId || this.role !== 'admin' ) return
      this.$set(data,'isEdit',true)
      this.new_label = data.ClassifyName;
      this.$nextTick(() => {
        this.$refs.editVal.focus();
      });
		},

		/* input失去焦点恢复node 修改最新的值*/
		changeValue(data) {
        if(!this.new_label) return this.$message.warning('名称不能为空');
        this.$set(data,'isEdit',false)
  
        this.new_label !== data.ClassifyName && preDictEdbInterface.classifyEdit({
          ClassifyId: data.ClassifyId,
          ClassifyName: this.new_label
        }).then(res => {
          if(res.Ret !== 200) return
  
          this.getTreeData();
        }) 
		},

    /* 拖拽完成 */
    dropOverHandle(b, a, i, e) {
      // console.log(i, a);
      // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
      // 一/二/三级目录
      if ([1,2,3].includes(b.level)) this.handleMoveCatalogue(b, a, i, e);

      // 指标层
      if (b.level === 4) this.handleMoveSheet(b, a, i, e);
    },

    // 移动的为一/二/三级目录
    handleMoveCatalogue(b, a, i, e) {
      let list = a.parent.childNodes,
        targetIndex = 0,
        PrevClassifyId = 0,
        NextClassifyId = 0,
        ParentClassifyId = 0;

      list.forEach((item, index) => {
        if (item.data.ClassifyId === b.data.ClassifyId) {
          targetIndex = index;
          return;
        }
      });

      if (targetIndex === 0) {
        PrevClassifyId = 0;
        NextClassifyId = list.length>1?list[targetIndex + 1].data.ClassifyId:0;
      } else if (targetIndex === list.length - 1) {
        PrevClassifyId = list[targetIndex - 1].data.ClassifyId;
        NextClassifyId = 0;
      } else {
        PrevClassifyId = list[targetIndex - 1].data.ClassifyId;
        NextClassifyId = list[targetIndex + 1].data.ClassifyId;
      }
      
      if(b.level===2||b.level===3){
        if(i==='inner'){
            ParentClassifyId=a.data.ClassifyId
            PrevClassifyId=0
            NextClassifyId=a.data.Children.length>1?a.data.Children[1].ClassifyId:0
        }else{
            ParentClassifyId=a.data.ParentId
        }
      }

      preDictEdbInterface
        .classifyMove({
          ClassifyId: b.data.ClassifyId,
          ParentClassifyId: ParentClassifyId,
          PrevClassifyId: PrevClassifyId,
          NextClassifyId: NextClassifyId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功!");
          this.getTreeData();
        });
    },

    // 移动的为指标
    handleMoveSheet(b, a, i, e) {
      let PrevEdbInfoId = 0,
        NextEdbInfoId = 0,
        targetIndex = 0,
        list = a.parent.data.Children;
      if (i === "inner") {
        PrevEdbInfoId = 0;
        NextEdbInfoId =
          a.data.Children.length > 1 ? a.data.Children[1].EdbInfoId : 0;
      } else {
        list.forEach((item, index) => {
          if (item.EdbInfoId === b.data.EdbInfoId) {
            targetIndex = index;
            return;
          }
        });

        if (targetIndex === 0) {
          PrevEdbInfoId = 0;
          NextEdbInfoId = list[targetIndex + 1].EdbInfoId;
        } else if (targetIndex === list.length - 1) {
          PrevEdbInfoId = list[targetIndex - 1].EdbInfoId;
          NextEdbInfoId = 0;
        } else {
          PrevEdbInfoId = list[targetIndex - 1].EdbInfoId;
          NextEdbInfoId = list[targetIndex + 1].EdbInfoId;
        }
      }

      preDictEdbInterface
        .ebdMove({
          ClassifyId: a.data.ClassifyId,
          EdbInfoId: b.data.EdbInfoId,
          PrevEdbInfoId,
          NextEdbInfoId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功!");
          this.getTreeData();
        });

    },

    /* 拖拽覆盖添加背景色 */
    dropMouseOver(node1, node2, e) {
      if (
        (node1.level === 2 && node2.level === 1) &&
        (e.target.childNodes[0].className.includes("el-tree-node__content") ||
          e.target.className.includes("el-tree-node__content"))
      ) {
        e.target.childNodes[0].className.includes("el-tree-node__content")
          ? (e.target.childNodes[0].style.backgroundColor = "#409eff")
          : (e.target.style.backgroundColor = "#409eff");
      }
    },

    /* 拖拽离开/拖拽完成重置背景色 */
    dropMouseLeave(node1, node2, e) {
      let arrs = $(".el-tree-node__content");
      for (let a of arrs) {
        a.style.backgroundColor = "transparent";
      }
    },

    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);

      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.UniqueCode);
      }
    },

    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, index) => {
        if (item === data.UniqueCode) {
          // 删除关闭节点
          this.defaultShowNodes.length = index;
        }
      });
    },

    /* 判断节点是否能被拖拽 */
    canDragHandle(node) {
      let canMove = true;
      return canMove;
    },

    /* 判断节点是否能被拖入 */
    canDropHandle(draggingNode, dropNode, type) {
      let canDrop = false;
      // 移动的是一级目录
      if (draggingNode.level === 1 && dropNode.level === 1 &&type!=='inner') {
        canDrop = true;
      }

      // 二级目录
        if(draggingNode.level===2){
            if((dropNode.level===1&&type==='inner')||(dropNode.level===2&&type!=='inner')){
                canDrop=true
            }
        }

        //三级目录
        if(draggingNode.level===3){
            if((dropNode.level===2&&type==='inner')||(dropNode.level===3&&type!=='inner')){
                canDrop=true
            }
        }
        //四级指标层
        if(draggingNode.level===4){
            if((dropNode.level===3&&type==='inner')||(dropNode.level===4&&type!=='inner')){
                canDrop=true
            }
        }

      return canDrop;
    },
  },
};
