<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" :style="{'top':(ljzzdyHeight-1-zdys.cs.length*65)+'px'}" 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">{{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)">{{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" :style="{'top':(ljzzdyHeight+40-1-ljzs.cs.length*65)+'px'}" border="1" cellspacing="0" cellpadding="0">
								<tr v-for="(cs) in ljzs.cs" :key="cs.bsm">
									<!-- 显示层数 -->
									<td class="floor">{{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)">{{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">{{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)">{{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">{{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)">{{hs.shbw}}</td>
						</tr>
					</table>
				</div>
				<!-- </template> -->
			</div>
			<!-- <div class="ch-wrap">层户</div> -->
		</div>
		<div
			class="zrz"
			:style="{ width: lpbContentWidth + 'px'}"
		>
			{{ lpbData.xmmc }}
		</div>
	</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:[],
			time:null, //区分单双击事件的定时器
			searchNum:Math.random()
		};
	},
	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){
			// console.log('查询'+sh);
			this.searchNum = sh;
		},
		//自然幢下元素高度宽度计算
		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 = [];
			})
		}
	},
	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.clearChoosedH();
			// 渲染查询到的户
			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
						}
					}
				})
			})
		}
	},
};
</script>
<style scoped lang="less">
.lpbContent-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	.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 #0091FF!important;
				}
			}
		}
		.name{
			line-height: 40px;
			text-align: center;
		}
		// end
	}
	.zrz {
		height: 60px;
		line-height: 60px;
		background-color: darkgoldenrod;
		position: absolute;
		bottom: 6px;
		text-align: center;
		transition: 0.5s;
	}
}
</style>