<template>
	<div
		class="content column-start-center reTree_box"
		:style="{ fontSize: (size || 14) + 'px', lineHeight: (size || 14) + 'px' }"
		style="width:347px"
	>
		<div
			class="column-start-center basic_layer"
			v-for="(item, index) in formatData"
			:key="index"
		>
			<div
				class="row-flex-start basic_banner"
				:class="{
					active_color: item.expand && item.children.length > 0,
				}"
				@click="itemClick(item)"
			>
				<div
					class="reTree_icon"
					:style="{
						height: (size || 14 * 1.2) + 'px',
						width: (size || 14 * 1.2) + 'px',
					}"
					:class="{
						reTree_default_icon: item.children.length === 0,
						reTree_collapse_icon: item.expand && item.children.length > 0,
						reTree_expand_icon: !item.expand && item.children.length > 0,
					}"
				></div>
				<div class="layer_text nowrap">{{ item.label }}</div>
			</div>

			<lineItem
				v-if="item.expand && item.children.length > 0"
				v-on="$listeners"
        @changeTop="changeTop"
        @changeLeft="changeLeft"
        @changeVisible="changeVisible"
        @changeIsZD="changeIsZD"
				:list="item.children"
				:visible="visible"
				:size="size"
			></lineItem>
		</div>

		<ul
			v-show="visible"
			:style="{ left: left + 'px', top: top + 'px' }"
			class="contextmenu"
		>
			<li>定位</li>
			<li>导入图形</li>
			<li>导出图形</li>
			<li v-show="isZD">导入属性</li>
			<li v-show="!isZD">导入楼盘</li>
			<li>重叠分析</li>
			<li v-show="isZD">添加定着物</li>
		</ul>
	</div>
</template>
<script>
import lineItem from "./lineItem.vue";
export default {
	inheritAttrs: false,
	props: {
		pd: {},
		size: {
			type: Number,
			default: 14,
		},
	},
	components: { lineItem },
	data() {
		return {
			selectedDetail: {},
			timer: {},
			formatData: [],
			visible: false,
			top: 0,
      left: 0,
      isZD:true
		};
	},
	watch: {
		pd(n, o) {
			this.formatData = this.preDealData(n);
			console.log(this.formatData);
		},
	},
	created() {
		console.log("lineTree create");
		this.preDealData(this.pd);
	},

	methods: {
		// 改变菜单数据
		changeVisible(data) {
			this.visible = data;
		},
		changeTop(data) {
			this.top = data;
		},
		changeLeft(data) {
			this.left = data;
		},
		changeIsZD(data) {
			this.isZD = data;
		},
		preDealData(list) {
			list.forEach((x) => {
				if (!x.expand) this.$set(x, "expand", false);
				if (x.children && x.children.length > 0) this.preDealData(x.children);
			});
			return list;
		},
		// 根据id展开树的具体项
		expandTreeItemById(idList) {
			let _this = this;
			function loopTree(list) {
				list.forEach((x) => {
					if (idList.includes(x.id)) {
						_this.$set(x, "expand", true);
					} else {
						_this.$set(x, "expand", false);
					}
					if (x.children && x.children.length > 0) loopTree(x.children);
				});
				return list;
			}
			this.formatData = loopTree(this.pd);
		},
		itemClick(item) {
			item.expand = !item.expand;
			this.$emit("itemClick", item);
		},
		// 详情点击
		detailClick(data) {
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.selectedDetail = data;
				this.$emit("detailClick", data);
			}, 300);
		},
		detailDoubleClick(data) {
			clearTimeout(this.timer);
			this.selectedDetail = data;
			this.$emit("detailDoubleClick", data);
		},
	},
};
</script>
<style lang="less" scoped>
// 自定义右键菜单样式 start
.contextmenu {
	margin: 0;
	background: #fff;
	z-index: 3000;
	position: absolute;
	list-style-type: none;
	padding: 5px 0;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #333;
	box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
	margin: 0;
	padding: 7px 16px;
	cursor: pointer;
}

.contextmenu li:hover {
	background: #eee;
}
// end
.content {
	height: 100%;
	width: 100%;
}
.column-start-center {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.row-flex-start {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.nowrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.active_color {
	color: #ffffff;
}
.reTree_box {
	// overflow-y: auto;
}
.reTree_icon {
	width: 17px;
	height: 17px;
	margin-right: 10px;
}

.basic_layer {
	width: 100%;
	position: relative;
	color: #ffffff;
	cursor: pointer;
	.layer_text {
		flex: 1;
	}
}
.first_vertical_line {
	content: "";
	position: absolute;
	width: 1px;
	left: 6px;
	top: 17px;
	background: #c3c5c8;
}
.basic_banner {
	position: relative;
	width: 100%;
	padding-bottom: 13px;
}
.second_layer {
	position: relative;
	width: 100%;
	cursor: pointer;
	padding-left: 25px;
}
.third_layer {
	position: relative;
	padding-bottom: 15px;
	width: 100%;
	padding-left: 40px;
	color: #ffffff;
}

.second_layer::before {
	content: "";
	position: absolute;
	height: 1px;
	width: 16px;
	left: 9px;
	top: 9px;
	background: #c3c5c8;
}
.third_layer::before {
	content: "";
	position: absolute;
	height: 1px;
	width: 20px;
	left: 9px;
	top: 9px;
	background: #c3c5c8;
}

.linkLine_default::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 1px;
	left: 9px;
	top: 0px;
	background: #c3c5c8;
}
.linkLine_first::after {
	content: "";
	position: absolute;
	/* 为了触顶 */
	top: -14px;
	height: calc(100% + 14px);
	width: 1px;
	left: 9px;
	background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
	content: "";
	position: absolute;
	height: 24px;
	top: -14px;
	width: 1px;
	left: 9px;
	background: #c3c5c8;
}
.linkLine_last::after {
	content: "";
	position: absolute;
	height: 9px;
	width: 1px;
	left: 9px;
	top: 0px;
	background: #c3c5c8;
}
.reTree_collapse_icon {
	background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_default_icon {
	background: url("../../assets/images/reTree_default_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_expand_icon {
	background: url("../../assets/images/reTree_expand_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_focus_icon {
	background: url("../../assets/images/reTree_focus_.svg") no-repeat center
		center;
	background-size: contain;
}
</style>