<template>
	<div class="tree_item_box" :class="list.length>10 ? 'ofy_scroll':''" :style="{maxHeight:(list.length > 10 ? treeXzqHeight:'unset')+'px'}">
		<div
			class="column-start-start linkLine_default"
			v-for="(item, s_index) in list"
			:key="s_index"
			:class="{
				linkLine_first: (s_index === 0) & (list.length > 1),
				linkLine_half_top: s_index === 0 && list.length === 1,
				linkLine_last: s_index === list.length - 1 && s_index !== 0,
				third_layer: !item.children,
				second_layer: item.children,
			}"
		>
			<div
				class="row-flex-start basic_banner"
				@click="itemClick(item)"
				@dblclick="dbclick(item)"
				:class="{
					active_color: item.expand,
				}"
			>
				<div
					v-if="item.children"
					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
					v-if="item.children==null"
					class="reTree_icon reTree_expand_icon"
					:style="{
						height: (size || 14 * 1.2) + 'px',
						width: (size || 14 * 1.2) + 'px',
					}"
				></div>
				<div
					class="layer_text nowrap"
					@contextmenu.prevent="openMenu($event, item,list)"
					:class="{
						active_color: item.expand,
					}"
				>
					{{ item.mc }}
				</div>
			</div>
			<line-item
				:list="item.children"
				v-on="$listeners"
				:size="size"
				v-if="item.expand && item.children && item.children.length > 0"
			></line-item>
		</div>
	</div>
</template>
<script>
import {getZdDetailList} from "../../api/common"
export default {
	name: "line-item",
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		formatData: {
			type: Array,
			default: () => {
				return [];
			},
		},
		size: {
			type: Number,
			default: 14,
		},
		visible: {
			type: Boolean,
			default: false,
		},
		islpb:{
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {
			time:null,
			treeXzqHeight:0,
		}
	},
	mounted(){
		this.$nextTick(()=>{
			this.treeXzqHeight = this.$parent.$el.clientHeight-(this.formatData.length-1)*26+60;
		})
	},
	methods: {
		itemClick(item) {
			let self = this;
			// 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
			clearTimeout(self.time);
			self.time = setTimeout(() => {
				item.expand = item.expand == undefined? true:!item.expand;
				// self.$emit("itemClick", item);
				if (!item.children && !item.type) {
					let data = {
						xzqbsm:item.xzq,
						djqbsm:item.djq,
						djzqbsm:item.djzq,
						syqlx:item.dm
					}
					getZdDetailList(data).then((res) => {
                        if (res.result.length>0) {
							res.result.forEach(i=>{
								if(i.children.length>0){
									i.expand = false;
								}
							})
							self.$emit("ownerMethod", item,res.result);
						}
                    })
                    .catch((error) => {

                    });
				}
			}, 300);
		},
		// 右键点击事件
		openMenu(e, item,list) {
			console.log(list,'右键list');
			this.$emit("changeTop", e.pageY);
			this.$emit("changeLeft", e.pageX);
			this.$emit("changeZdData",item);
			this.$emit("changeVisible", false);
			// //判断所有权类型
			// console.log(item.dm,'item.dm ');
			// if(item.dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
			// 	this.$emit("changeCreateVisible", true);
			// }
			//判断楼盘类型
			switch (item.type) {
				case 'zd':
					this.$emit("changeIsZD", true);
					this.$emit("changeVisible", true);
					break;
				case 'dz':
					this.$emit("changeDzVisible", true);
					break;
				case 'zrz':
					this.$emit("changeIsZD", false);
					this.$emit("changeVisible", true);
					break;
				case 'zdy':
					this.$emit("changeLpbVisible", true);
					break;
				case 'ljz':
					this.$emit("changeLpbVisible", true);
					break;
			
				default:
					break;
			}
		},
		// 左键双击事件
		dbclick(item) {
			clearTimeout(this.time);
			if (item.zdbsm || item.zrzbsm) {
				this.$router.push("/zd");
			}
		},
		closeMenu() {
			this.$emit("changeVisible", false);
		},
	},
	watch: {
		visible(value) {
			if (value) {
				document.body.addEventListener("click", this.closeMenu);
			} else {
				document.body.removeEventListener("click", this.closeMenu);
			}
		},
	},
};
</script>
<style lang="less">
.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_icon {
	width: 17px;
	height: 17px;
	margin-right: 10px;
}
.no_icon {
	width: 17px;
	height: 17px;
}
.tree_item_box {
	position: relative;
	width: 100%;
	cursor: pointer;
}
.ofy_scroll{
	overflow-y: scroll;
	overflow-x: hidden;
}
.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: 25px;
}
.white_layer {
	color: black!important;
}

.second_layer::before {
	content: "";
	position: absolute;
	height: 1px;
	width: 16px;
	left: 8px;
	top: 8px;
	opacity: .5;
	background: url('../../assets/images/rowline1.png');
    background-position-y: center;
}
.third_layer::before {
	content: "";
	position: absolute;
	height: 1px;
	width: 16px;
	left: 8px;
	top: 8px;
	opacity: .5;
	background: url('../../assets/images/rowline1.png');
    background-position-y: center;
}

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

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

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

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