<template>
	<div class="lpbContent-wrap"  ref="lpbContentWrap">
		<div class="lpbContent"  ref="lpbContent" v-loading='loading'>
			<div :class="(lpbData.cs.length == 0 && lpbData.zdys.length == 0) ? 'bottom40 ljz-wrap':'ljz-wrap'"  :style="{'width':ljzWidth+'px'}" v-show="lpbData.ljzs.length>0">
				<!-- 循环逻辑幢数据 -->
				<div class="ljz" ref="ljz" v-for="(ljzs,ljzIndex) in lpbData.ljzs" :key="ljzIndex">
					<div  class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}">
						<!-- 循环逻辑幢下的幢单元 -->
  						<div class="ljz-zdy"  :style="{'min-height':ljzzdyHeight+40+'px'}" ref="ljzzdy" v-show="ljzs.zdys.length>0" v-for="(zdys,zdyIndex) in ljzs.zdys" :key="zdyIndex" >
							<!-- 循环幢单元下的层户 -->
							<!-- <div class="chTable-wrap"> -->
								<table  class="chTable"  border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
									<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
										<!-- 显示层数 -->
										<td class="floor" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td>
										<!-- 显示户 -->
										<td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td>
									</tr>
								</table>
							<!-- </div> -->
							<!-- 幢单元名称 -->
							<div class="zdy-name name">
								{{zdys.zdymc}}
							</div>
						</div>
						<!-- 循环逻辑幢下的层户 -->
						<div class="ljz-ch" :style="{'min-height':ljzzdyHeight+40+'px'}"  v-if="ljzs.cs.length>0">
							<table  class="chTable"  border="1" cellspacing="0" cellpadding="0">
								<tr v-for="(cs) in ljzs.cs" :key="cs.bsm">
									<!-- 显示层数 -->
									<td class="floor" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td>
									<!-- 显示户 -->
									<td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)" @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td>
								</tr>
							</table>
						</div>
					</div>

					<!-- 逻辑幢名称 -->
					<div class="ljz-name name">
						{{ljzs.ljzmc}}
					</div>
				</div>
			</div>
			<div class="zdy-wrap" :style="{'width':zdyWidth+'px'}">
				<!-- 循环自然幢下的幢单元 -->
				<div class="zdy column-reverse" ref="zdy" v-for="(zdys,zdyIndex) in lpbData.zdys" :key="zdyIndex" :style="{'min-height':zdyHeight+'px'}">
					<!-- 幢单元名称 -->
					<div class="zdy-name name">
						{{zdys.zdymc}}
					</div>
					<!-- 循环幢单元下的层户 -->
					<table  class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length>0">
						<tr v-for="(cs,csIndex) in zdys.cs" :key="csIndex">
							<!-- 显示层数 -->
							<td class="floor" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td>
							<!-- 显示户 -->
							<td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)"  @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td>
						</tr>
					</table>
				</div>
				<!-- 循环自然幢下的独立层户 -->
				<!-- <template > -->
				<div class="zdy column-reverse" :style="{'min-height':cHeight+'px'}">
					<table  class="chTable" ref="ch" border="1"  cellspacing="0" cellpadding="0" v-show="lpbData.cs != null && lpbData.cs.length>0" >
						<tr v-for="(cs,csIndex) in lpbData.cs" :key="csIndex">
							<!-- 显示层数 -->
							<td class="floor" @contextmenu.prevent="openMenu($event, cs,'c')" @click="handleClickC($event,cs)">{{cs.sjc}}层</td>
							<!-- 显示户 -->
							<td v-for="(hs,hsIndex) in cs.hs" :data-bsm="hs.bsm" ref="hBsm" :key="hsIndex" :class="(searchNum == hs.shbw || searchNum == hs.bdcdyh) ? 'tdSelect':''" @click="handleTdClick($event,hs.bsm)"  @dblclick="dbclick(hs.bsm)" @contextmenu.prevent="openMenu($event, hs,'h')">{{hs.shbw}}</td>
						</tr>
					</table>
				</div>
				<!-- </template> -->
			</div>
			<!-- <div class="ch-wrap">层户</div> -->
		</div>
		<div
			class="zrz"
			:style="{ width: lpbContentWidth + 'px'}"
		>
			{{ lpbData.xmmc }}
		</div>
		<ul
			v-show="lpbChVisible"
			:style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
			class="contextmenu"
		>
			<li v-show='rightClickFlag=="h"' @click="handleAddH">添加</li>
			<li v-show='rightClickFlag=="h"' @click="handleMoveH">移动</li>
			<li v-show='rightClickFlag=="h"' @click="handleDeleteH">删除</li>
			<li v-show='rightClickFlag=="h"' @click="handleSyczh">实预测转换</li>
			<li v-show='rightClickFlag=="c"' @click="handleAddC">添加</li>
			<li v-show='rightClickFlag=="c"' @click="handleDeleteC">删除</li>
		</ul>
	</div>
</template>
<script>
import { getLpb } from "../../../../../api/lpb";
export default {
	name: "",
	components: {},
	props: {},
	data() {
		return {
			lpbData: {
				ljzs: [],
				cs: [],
				zdys: [],
			},
			lpbContentWidth: "",
			ljzWidth: 10000,
			zdyWidth: 1000,
			cHeight: 0, //独立层户的div高度
			zdyHeight: 0, //独立幢单元的div高度
			ljzcHeight: 0, //逻辑幢下层户的div高度
			ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
			loading: true,
			hbsmList: [],
			cbsmList:[],
			time: null, //区分单双击事件的定时器
			searchNum: Math.random(),
			//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
			choosedList: [],
			lpbChVisible:false, //层户右键菜单显隐
			lpbChLeft:100,
			lpbChTop:100,
			//右键层户数据
			chData:'',
			rightClickFlag:""
		};
	},
	created() {},
	mounted() {
		this.getLpb(this.$store.state.zrzbsm);
		setTimeout(() => {
			//tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
			this.lpbContentWidth = this.$store.state.contentWidth - 34 - 20;
			//让滚动条滚动至最下面 -6是横向滚动条的高度
			this.$refs.lpbContent.scrollTop =
				this.$refs.lpbContent.scrollHeight -
				this.$refs.lpbContent.clientHeight -
				6;
		}, 200);
	},
	methods: {
		//获取楼盘表数据
		getLpb(zrzbsm) {
			getLpb(zrzbsm).then((res) => {
				if (res.code == 200) {
					this.loading = false;
					this.lpbData = res.result == null ? this.lpbData : res.result;
					setTimeout(() => {
						//渲染楼盘表
						this.dataChange();
					}, 200);
				} else {
					this.$message({
						message: res.message,
						type: "warning",
					});
				}
			});
		},
		//按照bdcdyh或shbw筛选户
		lpbDataMap(sh) {
			//清除之前选中户
			this.clearChoosedH();
			this.searchNum = sh;
			console.log("查询searchNum" + searchNum);
		},
		//自然幢下元素高度宽度计算
		dataChange() {
			//计算逻辑幢宽度  20为marginRight值
			this.ljzWidth -= 9980;
			if (this.$refs.ljz != undefined) {
				this.$refs.ljz.forEach((item) => {
					this.ljzWidth += item.offsetWidth + 20;
				});
			} else {
			}
			//计算独立幢单元和独立层户宽度
			//考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
			if (this.$refs.zdy != undefined && this.$refs.zdy.length > 0) {
				//判断自然幢下有没有比层户高的幢单元
				let higher = true;
				//记录最高的幢单元高度 默认为第一个幢单元高度
				let highest = this.$refs.zdy[0].offsetHeight;
				this.zdyWidth -= 980;
				this.$refs.zdy.forEach((item) => {
					this.zdyWidth += item.offsetWidth + 21;
					this.cHeight =
						item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
					highest = highest > item.offsetHeight ? highest : item.offsetHeight;
				});
				//判断有无独立层户
				if (this.$refs.ch != undefined) {
					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
					higher = highest > this.$refs.ch.offsetHeight ? true : false;
					this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight;
					this.zdyWidth += this.$refs.ch.offsetWidth;
				} else {
					this.zdyHeight = highest;
				}
			} else {
				// this.zdyWidth = 124;
			}

			//计算逻辑幢下的幢单元和层户的高度
			if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
				//判断自然幢下有没有比层户高的幢单元
				let higher = true;
				//记录最高的幢单元高度 默认为第一个幢单元高度
				let highest = this.$refs.ljzzdy[0].offsetHeight;
				this.$refs.ljzzdy.forEach((item) => {
					this.ljzcHeight =
						item.offsetHeight > this.ljzcHeight
							? item.offsetHeight
							: this.ljzcHeight;
					highest = highest > item.offsetHeight ? highest : item.offsetHeight;
				});
				//判断有无独立层户
				if (this.$refs.ljzch != undefined) {
					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
					higher = highest > this.$refs.ljzch.offsetHeight ? true : false;
					this.ljzzdyHeight = higher ? highest : this.$refs.ljzch.offsetHeight;
				} else {
					this.ljzzdyHeight = highest;
				}
			} else {
				// this.zdyWidth = 124;
			}
		},
		//户单击事件
		handleTdClick(e, bsm) {
			let self = this;
			// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
			clearTimeout(self.time);
			self.time = setTimeout(() => {
				//判断点击的户是否选中
				if (e.target.className.indexOf("tdSelect") == -1) {
					//未选中→选中
					e.target.className = "tdSelect"; //加边框
					this.hbsmList.push(bsm); // 将户bsm放进hbsmList
				} else {
					//选中→未选中
					e.target.className = "";
					this.deleteArrOption(this.hbsmList, bsm);
				}
				this.$parent.getHbsm(this.hbsmList, false);
			}, 200);
		},
		//户双击事件
		dbclick(bsm) {
			clearTimeout(this.time);
			this.hbsmList.push(bsm); // 将户bsm放进hbsmList
			this.$parent.getHbsm(this.hbsmList, true);
		},
		//删除多重数组中的某一项
		deleteArrOption(arr, item) {
			for (var i = arr.length; i > 0; i--) {
				if (arr[i - 1] == item) {
					arr.splice(i - 1, 1);
				}
			}
		},
		//清除选中户
		clearChoosedH() {
			// this.$nextTick(() => {
				//将每个选中的户的选中状态清除
				this.$refs.hBsm.forEach((item) => {
					if (item.className == "tdSelect") {
						item.className = "";
					}
				});
				// 清空hbsmList
				this.hbsmList = [];
			// });
		},
		//户右键点击事件
		openMenu(e,item,type){
			debugger
			console.log(e,'e');
			this.lpbChLeft = e.pageX;
			this.lpbChTop = e.pageY;
			this.chData = item;
			this.rightClickFlag = type;
			this.lpbChVisible = true;
		},
		// 层选中事件
		handleClickC(e,item){
			//判断点击的层是否选中
			if (e.target.className.indexOf("tdSelect") == -1) {
				//未选中→选中
				e.target.className += " tdSelect"; //加边框
				this.cbsmList.push(item.bsm); // 将户bsm放进hbsmList
			} else {
				//选中→未选中
				e.target.className = "floor";
				this.deleteArrOption(this.cbsmList,item.bsm);
			}
			this.$parent.getCbsm(this.cbsmList);
		},
		//关闭右键菜单
		closeMenu(){
			this.lpbChVisible = false
		},
		//户右键菜单 start
		handleAddH(){

		},
		handleMoveH(){

		},
		handleDeleteH(){

		},
		handleSyczh(){

		},
		//end
		// 层右键菜单 start
		handleAddC(){

		},
		handleDeleteC(){

		},
		//end
	},
	computed: {
		createFlagChange() {
			return this.$parent.createFlag;
		},
		legendToggleFlagChange() {
			return this.$parent.legendToggleFlag;
		},
	},
	watch: {
		createFlagChange: function(val) {
			setTimeout(() => {
				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
			}, 501);
		},
		legendToggleFlagChange: function(val) {
			setTimeout(() => {
				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth - 6;
			}, 501);
		},
		//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
		searchNum(n) {
			// 渲染查询到的户
			this.$nextTick(() => {
				this.$refs.hBsm.forEach((item) => {
					if (item.className == "tdSelect") {
						console.log(item.dataset.bsm, "item.dataset.bsm");
						// 判断hbsmList中是否已经存在
						if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
							this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
						}
					}
				});
			});
		},
		//父组件中选择单元状态改变choosedList
		choosedList(n) {
			this.$refs.hBsm.forEach((item) => {
				this.choosedList.forEach((i) => {
					if (item.dataset.bsm == i) {
						console.log(item.dataset.bsm+'----分割线-----'+i);
						item.className = "tdSelect";
					}
				});
			});
		},
		lpbChVisible(value) {
			if (value) {
				document.body.addEventListener("click", this.closeMenu);
			} else {
				document.body.removeEventListener("click", this.closeMenu);
			}
		}
	},
};
</script>
<style scoped lang="less">
.lpbContent-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.lpbContent {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: scroll;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		.ljz-wrap {
			height: auto;
			overflow: hidden;
			margin-bottom: 20px;
			.ljz {
				float: left;
				margin-right: 20px;
				// position: relative;
				.ljz-zdy-wrap {
					.ljz-zdy {
						height: auto;
						margin-right: 20px;
						float: left;
						position: relative;
						.zdy-name {
							width: 100%;
							bottom: 0;
							position: absolute;
							height: 40px;
							background-color: rosybrown;
						}
						// .chTable-wrap{
						// 	position: absolute;
						// 	bottom: 40px;
						// }
					}
					.ljz-ch {
						float: left;
					}
					.ljz-zdy:last-child {
						margin-right: 0;
					}
					.column-reverse {
						display: flex;
						flex-direction: column-reverse;
					}
				}
				.ljz-name {
					width: 100%;
					height: 40px;
					background-color: darkorange;
				}
			}
			div:last-child {
				margin-right: 0;
			}
		}
		.bottom40 {
			position: absolute;
			bottom: 40px;
		}
		.zdy-wrap {
			height: auto;
			overflow: hidden;
			margin-bottom: 60px;
			.zdy {
				float: left;
				margin-right: 20px;

				.zdy-zdy-wrap {
					.zdy-zdy {
						height: auto;
						margin-right: 20px;
						display: inline-table;
						.zdy-name {
							bottom: 0;
							background-color: blanchedalmond;
						}
					}
					.zdy-zdy:last-child {
						margin-right: 0;
					}
				}
				.zdy-name {
					width: 100%;
					height: 40px;
					background-color: rosybrown;
				}
			}
			.column-reverse {
				display: flex;
				flex-direction: column-reverse;
			}
		}

		// 公共部分样式 start
		.chTable {
			position: relative;
			tr {
				.floor {
					background-color: blanchedalmond;
				}
				td {
					width: 124px;
					height: 64px;
					line-height: 64px;
					text-align: center;
					cursor: pointer;
				}
				.tdSelect {
					border: 1px solid #006cff !important;
					background-image: url("../../../../../assets/tdSelect.png");
					background-repeat: no-repeat;
					background-position: right top;
					background-size: 30px;
				}
			}
		}
		.name {
			line-height: 40px;
			text-align: center;
			display: inline-block;
		}
		// end
	}
	.zrz {
		height: 60px;
		line-height: 60px;
		background-color: darkgoldenrod;
		position: relative;
		bottom: 66px;
		text-align: center;
		transition: 0.5s;
	}
}
</style>