<template>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="right">
			<ul class="info">
				<li class="title">
					<h2>请拖拽下面内容到 树节点上</h2>
					<div class="domBtnDiv">
						<div id="dom_1" class="categoryDiv">
							<span class="domBtn" domId="11">大树</span
							><span class="domBtn" domId="12">小草</span
							><span class="domBtn" domId="13">花朵</span>
						</div>
						<div class="dom_line"></div>
						<div id="dom_2" class="categoryDiv">
							<span class="domBtn" domId="21">老虎</span
							><span class="domBtn" domId="22">狗熊</span
							><span class="domBtn" domId="23">狮子</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script lang="ts" name="base-sys-layers" setup>
import { onMounted } from "vue";
import "@ztree/ztree_v3/js/jquery-1.4.4.min.js";
import "@ztree/ztree_v3/js/jquery.ztree.core.min.js";
import "@ztree/ztree_v3/js/jquery.ztree.excheck.min.js";
import "@ztree/ztree_v3/js/jquery.ztree.exedit.min.js";
import "@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css";
//定义属性
var newCount = 1;
const MoveTest = {
	curTarget: null,
	curTmpTarget: null,
	noSel: function () {
		try {
			window.getSelection
				? window.getSelection().removeAllRanges()
				: document.selection.empty();
		} catch (e) {}
	},
	dragTree2Dom: function (treeId: any, treeNodes: any) {
		return !treeNodes[0].isParent;
	},
	prevTree: function (treeId: any, treeNodes: any, targetNode: any) {
		return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
	},
	nextTree: function (treeId: any, treeNodes: any, targetNode: any) {
		return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
	},
	innerTree: function (treeId: any, treeNodes: any, targetNode: any) {
		return (
			targetNode != null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId
		);
	},
	dragMove: function (e: any, treeId: any, treeNodes: any) {
		var p = null,
			pId = "dom_" + treeNodes[0].pId;
		if (e.target.id == pId) {
			p = $(e.target);
		} else {
			p = $(e.target).parent("#" + pId);
			if (!p.get(0)) {
				p = null;
			}
		}

		$(".domBtnDiv .active").removeClass("active");
		if (p) {
			p.addClass("active");
		}
	},
	dropTree2Dom: function (e: any, treeId: any, treeNodes: any, targetNode: any, moveType: any) {
		var domId = "dom_" + treeNodes[0].getParentNode().id;
		if (
			moveType == null &&
			(domId == e.target.id || $(e.target).parents("#" + domId).length > 0)
		) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.removeNode(treeNodes[0]);

			var newDom = $("span[domId=" + treeNodes[0].id + "]");
			if (newDom.length > 0) {
				newDom.removeClass("domBtn_Disabled");
				newDom.addClass("domBtn");
			} else {
				$("#" + domId).append(
					"<span class='domBtn' domId='" +
						treeNodes[0].id +
						"'>" +
						treeNodes[0].name +
						"</span>"
				);
			}
			MoveTest.updateType();
		} else if ($(e.target).parents(".domBtnDiv").length > 0) {
			alert(MoveTest.errorMsg);
		}
	},
	dom2Tree: function (e: any, treeId: any, treeNode: any) {
		console.log(treeNode.name);
		var target = MoveTest.curTarget,
			tmpTarget = MoveTest.curTmpTarget;
		if (!target) return;
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");

		if (tmpTarget) tmpTarget.remove();
		var nodes = zTree.addNodes(treeNode, {
			id: target.attr("domId"),
			name: target.text()
		});
		zTree.selectNode(nodes[0]);
		MoveTest.updateType();
		MoveTest.curTarget = null;
		MoveTest.curTmpTarget = null;
	},
	updateType: function () {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getNodes();
		for (var i = 0, l = nodes.length; i < l; i++) {
			var num = nodes[i].children ? nodes[i].children.length : 0;
			nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
			zTree.updateNode(nodes[i]);
		}
	},
	bindDom: function () {
		$(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
	},
	bindMouseDown: function (e: any) {
		var target = e.target;
		if (target != null && target.className == "domBtn") {
			var doc = $(document),
				target = $(target),
				docScrollTop = doc.scrollTop(),
				docScrollLeft = doc.scrollLeft();
			target.addClass("domBtn_Disabled");
			target.removeClass("domBtn");
			const curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
			curDom.appendTo("body");

			curDom.css({
				top: e.clientY + docScrollTop + 3 + "px",
				left: e.clientX + docScrollLeft + 3 + "px"
			});
			MoveTest.curTarget = target;
			MoveTest.curTmpTarget = curDom;

			doc.bind("mousemove", MoveTest.bindMouseMove);
			doc.bind("mouseup", MoveTest.bindMouseUp);
			doc.bind("selectstart", MoveTest.docSelect);
		}
		if (e.preventDefault) {
			e.preventDefault();
		}
	},
	bindMouseMove: function (e: any) {
		MoveTest.noSel();
		var doc = $(document),
			docScrollTop = doc.scrollTop(),
			docScrollLeft = doc.scrollLeft(),
			tmpTarget = MoveTest.curTmpTarget;
		if (tmpTarget) {
			tmpTarget.css({
				top: e.clientY + docScrollTop + 3 + "px",
				left: e.clientX + docScrollLeft + 3 + "px"
			});
		}
		return false;
	},
	bindMouseUp: function (e: any) {
		var doc = $(document);
		doc.unbind("mousemove", MoveTest.bindMouseMove);
		doc.unbind("mouseup", MoveTest.bindMouseUp);
		doc.unbind("selectstart", MoveTest.docSelect);

		var target = MoveTest.curTarget,
			tmpTarget = MoveTest.curTmpTarget;
		if (tmpTarget) tmpTarget.remove();

		if ($(e.target).parents("#treeDemo").length == 0) {
			if (target) {
				target.removeClass("domBtn_Disabled");
				target.addClass("domBtn");
			}
			MoveTest.curTarget = null;
			MoveTest.curTmpTarget = null;
		}
	},
	bindSelect: function () {
		return false;
	}
	// addHoverDom: function (treeId: any, treeNode: any) {
	// 	var sObj = $("#" + treeNode.tId + "_span");
	// 	if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
	// 	var addStr =
	// 		"<span class='button add' id='addBtn_" +
	// 		treeNode.tId +
	// 		"' title='add node' onfocus='this.blur();'></span>";
	// 	sObj.after(addStr);
	// 	var btn = $("#addBtn_" + treeNode.tId);
	// 	if (btn)
	// 		btn.bind("click", function () {
	// 			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	// 			console.log(zTree);
	// 			zTree.addNodes(treeNode, {
	// 				id: 100 + newCount,
	// 				pId: treeNode.id,
	// 				name: "new node" + newCount++
	// 			});
	// 			return false;
	// 		});
	// },
	// removeHoverDom: function (treeId: any, treeNode: any) {
	// 	$("#addBtn_" + treeNode.tId)
	// 		.unbind()
	// 		.remove();
	// }
};

var setting = {
	edit: {
		enable: true,
		showRemoveBtn: false,
		showRenameBtn: false,
		drag: {
			prev: true,
			next: true,
			inner: true
		}
	},
	data: {
		// keep: {
		// 	parent: false,
		// 	leaf: false
		// },
		simpleData: {
			enable: true
		}
	},
	callback: {
		beforeDrag: MoveTest.dragTree2Dom,
		onDrop: MoveTest.dropTree2Dom,
		onDragMove: MoveTest.dragMove,
		onMouseUp: MoveTest.dom2Tree
	},
	view: {
		// addHoverDom: MoveTest.addHoverDom,
		// removeHoverDom: MoveTest.removeHoverDom,
		selectedMulti: false
	}
};

var zNodes = [
	{ id: 1, pId: 0, name: "植物", isParent: true, open: true },
	{ id: 2, pId: 0, name: "动物", isParent: true, open: true },
	{ id: 20, pId: 2, name: "大象" },
	{ id: 29, pId: 2, name: "鲨鱼" },
	{ id: 10, pId: 1, name: "大白菜" },
	{ id: 19, pId: 1, name: "西红柿" }
];

onMounted(() => {
	ztreeInit();
});
const ztreeInit = () => {
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	MoveTest.updateType();
	MoveTest.bindDom();
};
</script>
<style type="text/css">
.ztree li span.button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	color: #2f332a;
	font: 15px/21px Arial, Helvetica, simsun, sans-serif;
	background: #f0f6e4 \9;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #2f332a;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	padding-bottom: 5px;
}
h1 {
	font-size: 24px;
	line-height: 34px;
	text-align: center;
}
h2 {
	font-size: 14px;
	line-height: 24px;
	padding-top: 5px;
}
h6 {
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 24px;
	text-align: center;
}
a {
	color: #3c6e31;
	text-decoration: underline;
}
a:hover {
	background-color: #3c6e31;
	color: white;
}
input.radio {
	margin: 0 2px 0 8px;
}
input.radio.first {
	margin-left: 0;
}
input.empty {
	color: lightgray;
}
code {
	color: #2f332a;
}
.highlight_red {
	color: #a60000;
}
.highlight_green {
	color: #a7f43d;
}
li {
	list-style: circle;
	font-size: 12px;
}
li.title {
	list-style: none;
}
ul.list {
	margin-left: 17px;
}

div.content_wrap {
	width: 600px;
	height: 380px;
}
div.content_wrap div.left {
	float: left;
	width: 250px;
}
div.content_wrap div.right {
	float: right;
	width: 340px;
}
div.zTreeDemoBackground {
	width: 250px;
	height: 362px;
	text-align: left;
}

ul.ztree {
	margin-top: 10px;
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 220px;
	height: 360px;
	overflow-y: scroll;
	overflow-x: auto;
}
ul.log {
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 300px;
	height: 170px;
	overflow: hidden;
}
ul.log.small {
	height: 45px;
}
ul.log li {
	color: #666666;
	list-style: none;
	padding-left: 10px;
}
ul.log li.dark {
	background-color: #e3e3e3;
}

/* ruler */
div.ruler {
	height: 20px;
	width: 220px;
	background-color: #f0f6e4;
	border: 1px solid #333;
	margin-bottom: 5px;
	cursor: pointer;
}
div.ruler div.cursor {
	height: 20px;
	width: 30px;
	background-color: #3c6e31;
	color: white;
	text-align: right;
	padding-right: 5px;
	cursor: pointer;
}
.dom_line {
	margin: 2px;
	border-bottom: 1px gray dotted;
	height: 1px;
}
.domBtnDiv {
	display: block;
	padding: 2px;
	border: 1px gray dotted;
	background-color: powderblue;
}
.categoryDiv {
	display: inline-block;
	width: 335px;
}
.domBtn {
	display: inline-block;
	cursor: pointer;
	padding: 2px;
	margin: 2px 10px;
	border: 1px gray solid;
	background-color: #ffe6b0;
}
.domBtn_Disabled {
	display: inline-block;
	cursor: default;
	padding: 2px;
	margin: 2px 10px;
	border: 1px gray solid;
	background-color: #dfdfdf;
	color: #999999;
}
.dom_tmp {
	position: absolute;
	font-size: 12px;
}
.active {
	background-color: #93c3cf;
}
</style>
