<template>
	<div class="tree_item_box">
		<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,
			curNode: $route.query.bsm && $route.query.bsm == item.bsm,
			zxxNode: item.qszt,
			iszd: item.qszt && item.type == 'zd',
			isdz: item.qszt && item.type == 'dz',
			iszrz: item.qszt && item.type == 'zrz',
			isgzw: item.qszt && item.type == 'gzw'
		}">
			<div class="row-flex-start basic_banner" @click="itemClick(item)" @dblclick="dbclick(item, item.zdbsm)" :class="{
				active_color: item.expand,
			}">
				<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item, list)" :class="{
					active_color: item.expand
				}" :ref="($route.query.bsm && $route.query.bsm == item.bsm) ? 'curZxx' : ''" :data-zdbsm="item.zdbsm"
					:title=item.mc>
					<i v-show="!islpb && !item.qszt && !item.type" class="iconfont iconguoyou" style="margin-right:6px"></i>
					<template v-if="islpb && item.type == 'ljz' && item.children.length > 0">
						<i v-if="!item.expand" class="iconfont iconxiala lpbTree-node"></i>
						<i v-if="item.expand" class="iconfont iconxialazhankai lpbTree-node"></i>
					</template>
					<!-- <i v-show="islpb && item.expand && item.children.length > 0" class="iconfont iconxiala" style="margin-right:6px"></i>
					<i v-show="islpb && !item.expand && item.children.length > 0" class="iconfont iconxialazhankai" style="margin-right:6px"></i> -->
					<span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != '' && item.bhqkbsm != null)">
						<!-- <span class="qsztFont"  style="color: #9e9b9b">变</span>  -->
						<i
							:class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconbianing' : 'iconfont iconbian'"></i>
					</span>
					<template v-else>
						<span class="qsztImg" v-if="item.qszt == '0'">
							<!-- <span class="qsztFont" style="color: #2FA3FA; ">临</span>  -->
							<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconlining' : 'iconfont iconlin'"
								style="color: #F7B500;"></i>
						</span>
						<span class="qsztImg" v-if="item.qszt == '1'">
							<!-- <span class="qsztFont" style="color: #1AD6E1; ">正</span>  -->
							<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconzhenging' : 'iconfont iconzheng'"
								style="color: #15D7E2;"></i>
						</span>
						<span class="qsztImg" v-if="item.qszt == '2'">
							<!-- <span class="qsztFont" style="color: #45AEFD; ">现</span>  -->
							<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconxianing' : 'iconfont iconxian'"
								style="color: #2FA3FA;"></i>
						</span>
					</template>
					<i class="iconfont iconziranchuang1 mr4" v-if="item.type == 'zrz'"></i>
					<i class="iconfont iconduochuang1 mr4" v-if="item.type == 'dz'"></i>
					<i class="iconfont icongouzhuwu mr4" v-if="item.type == 'gzw'"></i>
					<span v-if="islpb">({{ item.type | bdcLxFilter }})</span>
					<span>{{ item.mc }}</span>

				</div>
				<div v-if="item.children" class="reTree_icon" :style="{
					height: 10 + 'px',
					width: 10 + 'px',
				}" :class="{
					reTree_default_icon: item.children.length === 0,
					reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
					reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
				}"></div>
				<div v-if="item.children == null" class="reTree_icon" :class="{
					reTree_default_icon: item.dm != 'G' && item.dm != 'J' && item.dm != 'Z',
					reTree_expand_icon: item.dm == 'G' || item.dm == 'J' || item.dm == 'Z',
				}" :style="{
					height: 10 + 'px',
					width: 10 + 'px',
				}"></div>
			</div>
			<line-item :list="item.children" v-on="$listeners" :islpb="islpb" :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: {
		ype: Array,
			ault: () => {
			turn [];
		,
	},
	formatData: {
		ype: Array,
			ault: () => {
			turn [];
			
						: {
			e: Number,
			ault: 16,
						ble: {
			e: Boolean,
			ault: false,
						b: {
			e: Boolean,
		efault: false,
	}
	,
		a () {
			rn {
			e: null,
		reeXzqHeight: 0,
		linshi: require("@/image/lpb/lin.png"),
		zhengshi: require("@/image/lpb/zheng.png"),
		ianshi: require("@/image/lpb/xian.png"),
	}
	,
		nted () {
			onsole.log(this.$refs.curZxx,'this.$refs.curZxx');
			this.$refs.curZxx) {
		onsole.log(this.$refs.curZxx[0].dataset.zdbsm);
		his.$store.state.oldZdbsm = this.$refs.curZxx[0].dataset.zdbsm;
										: {
			Click (item) {
			 self = this;
			开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
		learTimeout(self.time);
		elf.time = setTimeout(() => {
			em.expand = item.expand == undefined ? true : !item.expand;
			 self.$emit("itemClick", item);
				source = ''
			itch (this.$route.path) {
			ase '/add':
			source = '1,2'
				break;
			case '/change':
			source = '2'
				break;
			case '/panel':
				source = '0,1,2'
			break;
				e '/modify':
			source = '1'
			break;
				e '/search':
			source = '0,1,2'
			break;
					default:
				break;
			
			目录树的所有权类型单击时加载子节点
			 (!item.children && !item.type) {
			et data = {
			xzqbsm: item.xzq,
			djqbsm: item.djq,
				djzqbsm: item.djzq,
				syqlx: item.dm,
				source: source
			
			/ 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) => {
			/ });
			
				0);
						键点击事件
		enMenu (e, item, list) {
		onsole.log(item, '右键list');
		his.$emit("changeTop", e.pageY);
			s.$emit("changeLeft", e.pageX);
			s.$emit("changeZdData", item);
				$emit("changeVisible", false);
					所有权类型
						e.log(item.dm,'item.dm ');
							dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
							mit("changeCreateVisible", true);
												
					(item.type) {
					zd':
					$emit("changeIsZD", true);
						mit("changeVisible", true);
					;
					dz':
					$emit("changeDzVisible", true);
					;
				 'zrz':
					$emit("changeIsZD", false);
				s.$emit("changeVisible", true);
					;
					zdy':
					$emit("changeLpbVisible", true);
						
					ljz':
				s.$emit("changeLpbVisible", true);
			reak;
		case 'gzw':
			this.$emit("changeGzwVisible", true);
			break;
			fault:
			reak;
									键双击事件
			ick (item, bsm) {
				Timeout(this.time);
					tore.state.newZdbsm = bsm;
						tem.type) {
						':
						tore.state.zdbsm = item.bsm;
						
							:
						tore.state.zrzbsm = item.bsm;
					;
				 'dz':
			his.$store.state.dzbsm = item.bsm;
			reak;
				 'gzw':
			his.$store.state.gzwbsm = item.bsm;
			reak;
							fault:
			reak;
									m.type == 'zd' || item.type == 'dz' || item.type == 'zrz' || item.type == 'gzw') {
						 = {
						 2,
							.bsm,
						his.$route.query.auth ? this.$route.query.auth : '0,1,2'
													.$route.query.workitemInstanceId) {
					workitemInstanceId = this.$route.query.workitemInstanceId;
							 (this.$route.query.ywbsm) {
			data.ywbsm = this.$route.query.ywbsm;
			}
				this.$router.push({
					path: '/' + item.type,
					query: data
				});
			}
		},
		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="scss">
.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: 16px;
}

.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: #4a4a4a;
	cursor: pointer;

	.layer_text {
		flex: 1;
		line-height: 40px;
	}
}

.first_vertical_line {
	content: "";
	position: absolute;
	width: 1px;
	left: 6px;
	top: 17px;
	background: #c3c5c8;
}

.basic_banner {
	position: relative;
	width: 279px;
	height: 40px;
	box-sizing: border-box;
	padding-left: 20px;
}

.lpb_basic_banner {
	padding-left: 42px;
}

.second_layer {
	position: relative;
	width: calc(100% - 20px);
	cursor: pointer;
	padding-left: 20px;

	.basic_banner {
		width: 100%;
	}
}

.zxxNode {
	width: 279px !important;
	position: relative;
	left: -80px;
	text-indent: 80px;
}

.iszd {
	.tree_item_box {
		.zxxNode {
			padding-left: 0;
			left: 0;
		}
	}
}

.iszrz,
.isgzw {
	left: 0px !important;
	text-indent: 96px;
}

.isdz {
	text-indent: 96px !important;

	.iszrz {
		left: 0 !important;
		text-indent: 112px !important;
	}
}

.third_layer {
	position: relative;
	width: calc(100% - 20px);
	cursor: pointer;
	padding-left: 20px;
}

.white_layer {
	color: black !important;
}

.lpbTree-node {
	position: absolute;
	top: 1px;
	left: 0;
}

// .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: -16px;
// 	height: calc(100% + 16px);
// 	width: 1px;
// 	left: 7px;
// 	opacity: .5;
// 	background: url('../../assets/images/colline1.png');
// 	background-position-x: center;
// }
// // 上半截
// .linkLine_half_top::after {
// 	content: "";
// 	position: absolute;
// 	height: 23px;
// 	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_default_icon {
	// opacity: .5;
	background-size: contain;
}

.reTree_collapse_icon {
	// opacity: .5;
	background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
	background-size: contain;
}

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

.lpbTree_collapse_icon {
	// opacity: .5;
	background-size: contain;
}

.lpbTree_expand_icon {
	// opacity: .5;
	background: url("../../assets/images/arrow-left-bold.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;
}

.qsztImg {
	width: 16px;
	margin-right: 6px;
	// border-radius: 50%; height: 20px; width: 20px;  display: inline-block;
}

.curNode {
	>.basic_banner {
		background: #E9F5FF;
		box-shadow: inset 2px 0 0 0 #0C71FB;
		color: #0C71FB;
	}
}

.qsztFont {
	text-align: center;

	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 12px;
	line-height: 16px;
	border: 1px solid;
	border-radius: 8px;
}

.mr4 {
	margin-right: 4px;
}
</style>