<template>
	<div class="lpbContent-wrap" ref="lpbContentWrap">
		<div class="lpbContent" ref="lpbContent">
			<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">
					<!-- 	:class="[{ 'mt30': ljzIndex == 0 }, { 'mt60': ljzIndex == 1 || lpbData.ljzs.length == 1 }]" -->

					<!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
					<!-- 循环逻辑幢下的幢单元 -->
					<div class="ljz-zdy-wrap" :style="{ 'marginTop': ljzs.zdys.length > 0 ? '0' : '30px' }">
						<div class="ljz-zdy column-reverse"
							:style="{ 'min-height': ljzzdyHeight + 'px', 'marginRight': zdyIndex < (ljzs.zdys.length - 1) || ljzs.cs.length > 1 ? '20px' : '0' }"
							ref="ljzzdy" v-show="ljzs.zdys.length > 0" v-for="(zdys, zdyIndex) in ljzs.zdys" :key="zdyIndex">
							<!-- 幢单元名称 -->
							<div class="zdy-name name">
								<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
									<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
								</p>
							</div>

							<!-- 循环幢单元下的层户 -->
							<!-- <div class="chTable-wrap"> -->
							<table class="chTable psr" border="0" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
								<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
									<!-- 显示层数 -->
									<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
										@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
										{{ cs.sjc }}层
									</td>
									<!-- 显示户 -->
									<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
										:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
										:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
										@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
										@contextmenu.prevent="openMenu($event, hs, 'h')">
										{{ hs.shbw }}
										<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
										<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
										<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
										<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
											<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
											<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
											<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
											<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
											<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
											<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
										</ul>
									</td>
								</tr>
							</table>

							<!-- </div> -->
						</div>
					</div>
					<!-- 循环逻辑幢下的层户 -->
					<div class="ljz-ch" ref="ljzDlch"
						:style="{ height: 'auto', marginTop: (ljzs.zdys.length > 0 ? '39' : 0) + 'px' }" v-if="ljzs.cs.length > 0">
						<table class="chTable prs" :style="{
							top:
								ljzzdyHeight + 40 - ljzs.cs.length * 65 < 0
									? 0
									: ljzzdyHeight + 40 - ljzs.cs.length * 65 + 'px',
						}" border="1" cellspacing="0" cellpadding="0">
							<tr v-for="cs in ljzs.cs" :key="cs.bsm">
								<!-- 显示层数 -->
								<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
									@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
									{{ cs.sjc }}层
								</td>
								<!-- 显示户 -->
								<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
									:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
									:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
									@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
									@contextmenu.prevent="openMenu($event, hs, 'h')">
									{{ hs.shbw }}
									<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
									<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
									<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
									<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
										<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
										<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
										<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
										<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
										<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
										<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
									</ul>
								</td>
							</tr>
						</table>
					</div>
					<!-- 逻辑幢名称 -->
					<div class="ljz-name name">
						<p class="cp" @dblclick="openZxx(ljzs.bsm, 'ljz')">
							{{ ljzs.ljzmc }}
						</p>
					</div>
				</div>
			</div>
			<div class="zdy-wrap"
				:style="{ width: zdyWidth + 'px', marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0' }">
				<!-- 循环自然幢下的幢单元 -->
				<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">
						<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
							<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
						</p>
					</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" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
								@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
								{{ cs.sjc }}层
							</td>
							<!-- 显示户 -->
							<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
								:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
								:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
								@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
								@contextmenu.prevent="openMenu($event, hs, 'h')">
								{{ hs.shbw }}
								<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
								<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
								<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
								<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
									<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
									<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
									<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
									<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
									<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
									<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
								</ul>
							</td>
						</tr>
					</table>
				</div>
				<!-- 循环自然幢下的独立层户 -->
				<!-- <template > -->
				<div class="zdy column-reverse" ref="zrzDlch" :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" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
								@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
								{{ cs.sjc }}层
							</td>
							<!-- 显示户 -->
							<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
								:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
								:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
								@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
								@contextmenu.prevent="openMenu($event, hs, 'h')">
								{{ hs.shbw }}
								<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
								<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
								<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
								<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
									<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
									<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
									<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
									<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
									<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
									<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
								</ul>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<!-- 层户 -->
			<div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
				<el-checkbox v-model="zrzChecked" @change='lpbSelectAll'>{{ lpbData.xmmc }}</el-checkbox>
			</div>
		</div>
		<!-- 双击户的弹出框 -->
		<el-dialog :close-on-click-modal="false" title="户编辑" class="hbjDialog" :visible.sync="hbjVisible" width="80%">
			<hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx" :lpbParent="lpbParent"></hbj>
		</el-dialog>
	</div>
</template>
<script>
import { getLpb } from '@/api/zhcx'
export default {
	name: "",
	components: { },
	props: {
		zrzbsm: {
			type: String,
			default: ''
		},
		lpbParent: {
			type: String,
			default: 'isLpb'
		},
		isHb: {
			type: Boolean,
			default: true
		},
	},
	data () {
		return {
			lpbData: {
				ljzs: [],
				cs: [],
				zdys: [],
			},
			hbjVisible: false,
			lpbContentWidth: 0,
			ljzWidth: 10000,
			zdyWidth: 1000,
			cHeight: 0, //独立层户的div高度
			zdyHeight: 0, //独立幢单元的div高度
			ljzcHeight: 0, //逻辑幢下层户的div高度
			ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
			loading: true,
			hbsm: '',
			hbsmList: [],
			hqsztList: [],
			cbsmList: [],
			time: null, //区分单双击事件的定时器
			searchNum: Math.random(),
			//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
			choosedList: [],
			borderColor: "#E6E6E6",
			lpbChVisible: false, //层户右键菜单显隐
			lpbChLeft: 100,
			lpbChTop: 100,
			//右键层户数据
			chData: "",
			rightClickFlag: "",

			formLabelWidth: "120px",
			yclpbData: {},
			sclpbData: {},
			
			
			zrzChecked: false, //自然幢全选
		};
	},
	mounted () {
		this.getLpb(this.zrzbsm ? this.zrzbsm : '9434bdb243ba342cc6c043065fc9e480');
		setTimeout(() => {
			//让滚动条滚动至最下面 -6是横向滚动条的高度
			this.$refs.lpbContent.scrollTop =
				this.$refs.lpbContent.scrollHeight -
				this.$refs.lpbContent.clientHeight -
				6;
		}, 200);
		window.lpbContent = this;
	},
	methods: {
		loadingData (zrzbsm, scyclx) {
			this.getLpb(zrzbsm, scyclx, true);
		},
		//获取楼盘表数据
		getLpb (zrzbsm, scyclx, actual) {
			getLpb(zrzbsm, scyclx).then((res) => {
				if (res.code == 200) {
					res.result.ljzs = res.result.ljzs
						.sort(this.compare("place"))
						.reverse();
					this.lpbData = res.result == null ? this.lpbData : res.result;
					this.$nextTick(() => {
						//渲染楼盘表
						this.dataChange();
					});
				} else {
					this.$message({
						message: res.message,
						type: "warning",
					});
				}
			});
		},
		compare (property) {
			return function (a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			};
		},
		//按照bdcdyh或shbw筛选户
		lpbDataMap (sh) {
			this.searchNum = sh;
			if (this.hbsmList.length > 0) {
				//清除之前选中户
				this.clearChoosedH();
			}
			// console.log("查询searchNum" + searchNum);
		},
		//自然幢下元素高度宽度计算
		dataChange () {
			//计算逻辑幢宽度  20为marginRight值
			this.ljzWidth = 0;
			if (this.$refs.ljzzdy != undefined) {
				this.$refs.ljzzdy.forEach((item) => {
					this.ljzWidth += item.offsetWidth + 20;
				});
				if (this.$refs.ljzDlch != undefined) {
					this.$refs.ljzDlch.forEach((item) => {
						this.ljzWidth += item.offsetWidth;
					});
				}
			} else {
				if (this.$refs.ljzDlch != undefined) {
					this.$refs.ljzDlch.forEach((item) => {
						this.ljzWidth += item.offsetWidth + 20;
					});
				}
			}
			//计算独立幢单元和独立层户宽度
			//考虑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 = 20;
				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;
					highest = 0;
					this.zdyWidth += this.$refs.ch.offsetWidth;
				} else {
					this.zdyHeight = highest;
					highest = 0;
				}
			} else {
				//有且仅有独立层户
				if (this.$refs.zrzDlch != undefined) {
					this.zdyWidth = this.$refs.zrzDlch.offsetWidth + 20;
				}
			}
			//计算逻辑幢下的幢单元和层户的高度
			this.ljzzdyHeight = 0;
			if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
				//判断自然幢下有没有比层户高的幢单元
				let higher = true;
				let zrzhighest = 0;
				//记录最高的幢单元高度 默认为第一个幢单元高度
				zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
				this.$refs.ljzzdy.forEach((item) => {
					this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
					zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
				});
				//判断有无独立层户
				if (this.$refs.ljzch != undefined) {
					//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
					higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
					this.$nextTick(() => {
						this.ljzzdyHeight = higher ? zrzhighest : this.$refs.ljzch.offsetHeight;
						zrzhighest = 0;
					});
				} else {
					this.$nextTick(() => {
						this.ljzzdyHeight = zrzhighest;
						zrzhighest = 0;
					});
				}
			} else {

			}
			this.$nextTick(() => {
				this.lpbContentWidth = this.zdyWidth > this.ljzWidth ? this.zdyWidth - 20 : this.ljzWidth - 20;
				if (this.lpbContentWidth == 0) {
					//his.lpbContentWidth = this.$refs.lpbContent.offsetWidth
				}
			})
		},
		//户单击事件
		handleTdClick (e, bsm, hs) {
			let self = this;
			// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
			clearTimeout(self.time);
			self.time = setTimeout(() => {
				this.closeMenu()
				//判断点击的户是否选中
				if (e.className.indexOf("tdSelect") == -1) {
					//未选中→选中
					e.className = "tdSelect"; //加边框
					this.hbsmList.push(bsm); // 将户bsm放进hbsmList
					this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
					switch (this.lpbParent) {
						case 'isHbfg':
							self.fghbChoosedList.push(hs);
							break;
						case 'isFwsxbg':

							break;
						case 'isCxlz':

							break;
						case 'isLpb':
							break;
						default:
							break;
					}
				} else {
					//选中→未选中
					e.className = "";
					this.hbsmList = this.hbsmList.filter(i => i != bsm);
					this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
					switch (this.lpbParent) {
						case 'isHbfg':
							self.fghbChoosedList = self.fghbChoosedList.filter(i => i != hs)
							break;
						case 'isFwsxbg':

							break;
						case 'isCxlz':

							break;
						case 'isLpb':
							this.hbsmList = this.hbsmList.filter(i => i != bsm);
							this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
							this.$parent.getHbsm(this.hbsmList, false);
							this.$parent.getQsztList(this.hqsztList, false);
							break;

						default:
							break;
					}
				}
			}, 200);
		},
		//户双击事件
		dbclick (bsm) {
			clearTimeout(this.time);
			this.hbsm = bsm;
			this.$store.state.hbsm = bsm;
			this.hbjVisible = true;
			this.$nextTick(function () {
				this.$refs.hbj.$refs.hbj.getHInfo(this.hbsm);
			});
		},
		//删除多重数组中的某一项
		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 = [];
			this.hqsztList = [];
			// });
		},
		//户右键点击事件
		openMenu (e, item, type) {
			this.lpbChLeft = e.pageX;
			this.lpbChTop = e.pageY;
			this.chData = item;
			switch (this.lpbParent) {
				case 'isHbfg':
					break;
				case 'isFwsxbg':
					break;
				case 'isCxlz':
					break;
				case 'isLpb':
					this.rightClickFlag = type;
					this.lpbChVisible = true;
					break;

				default:
					break;
			}
		},
		// 户单元状态点击事件
		hDyztClick (e, bsm, hs) {
			this.handleTdClick(e.target.parentNode, bsm, hs);
		},
		// 层选中事件
		handleClickC (e, item) {
			if (this.lpbParent == 'isLpb') {
				//判断点击的层是否选中
				if (e.target.className.indexOf("tdSelect") == -1) {
					//未选中→选中
					e.target.className += " tdSelect"; //加边框
					this.cbsmList.push(item.bsm);
				} else {
					//选中→未选中
					e.target.className = "floor";
					this.deleteArrOption(this.cbsmList, item.bsm);
				}
				this.$parent.getCbsm(this.cbsmList);
			} else {

			}
		},
		//关闭右键菜单
		closeMenu () {
			this.lpbChVisible = false;
		},
		//end
		//楼盘表户全选
		lpbSelectAll (val) {
			if (val) {
				this.$refs.hBsm.forEach((item) => {
					item.className = "tdSelect";
					this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
					this.hqsztList.push(item.dataset.qszt)
				});
			} else {
				this.$refs.hBsm.forEach((item) => {
					item.className = "";
					this.hbsmList = [];
					this.hqsztList = [];
				});
			}
			this.$nextTick(() => {
				this.$parent.getHbsm(this.hbsmList, false);
				this.$parent.getQsztList(this.hqsztList, false);
			})
		},
		//幢单元全选
		zdySelectAll (val, cs) {
			let zdyHbsmList = [];
			let zdyHqsztList = [];
			cs.forEach(i => {
				i.hs.forEach(j => {
					zdyHbsmList.push(j.bsm)
					zdyHqsztList.push(j.qszt)
				})
			});
			if (val) {
				this.$nextTick(() => {
					this.$refs.hBsm.forEach((item) => {
						if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
							item.className = "tdSelect";
						}
					});
					this.hbsmList = this.hbsmList.concat(zdyHbsmList);
					this.hqsztList = this.hqsztList.concat(zdyHqsztList);
				})
			} else {
				this.$refs.hBsm.forEach((item) => {
					console.log(item.dataset.bsm);
					if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
						item.className = "";
					}
					zdyHbsmList.forEach(j => {
						if (item.dataset.bsm == j) {
							this.hbsmList = this.hbsmList.filter(i => i != j)
						}
					})
					zdyHqsztList.forEach(j => {
						if (item.dataset.qszt == j) {
							this.hqsztList = this.hqsztList.filter(i => i != j)
						}
					})
				});
			}
			this.$nextTick(() => {
				this.$parent.getHbsm(this.hbsmList, false);
				this.$parent.getQsztList(this.hqsztList, false);
			})
		},
		//逻辑幢、幢单元、层双击
		openZxx (bsm, type) {
			if (this.lpbParent == 'isLpb') {
				this.$parent.taskTitle = '编辑';
				this.$parent.dialogVisible = true;
				this.$parent.curBsm = bsm;
				this.$parent.menuType = type;
			}
		}
	},
	computed: {
		createFlagChange () {
			return this.$parent.createFlag;
		},
		legendToggleFlagChange () {
			return this.$parent.legendToggleFlag;
		},
		scyclx () {
			return this.$parent.scyclx;
		},
	},
	watch: {
		scyclx (n) {
			this.hqsztList = [];
			// this.getLpb(this.$store.state.zrzbsm, n);
			if (n == '0') {
				this.lpbData = this.yclpbData;
			} else {
				this.lpbData = this.sclpbData;
			}
		},
		//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
		searchNum (n) {
			// 渲染查询到的户
			this.$nextTick(() => {
				this.$refs.hBsm.forEach((item) => {
					if (item.className == "tdSelect") {
						// console.log(item.offsetLeft,'offsetLeft');
						// console.log(item.offsetTop,'offsetHeight');
						//定位到最后一个户所在位置
						this.$refs.lpbContent.scrollTop = item.offsetTop;
						this.$refs.lpbContent.scrollLeft = item.offsetLeft;
						console.log(item.dataset.bsm, "item.dataset.bsm");
						// 判断hbsmList中是否已经存在
						if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
							this.hbsmList.push(item.dataset.bsm);
							this.hqsztList.push(item.dataset.qszt);
						}
					}
				});
			});
		},
		//父组件中选择单元状态改变选中户的边框颜色
		choosedList (n) {
			if (n.length > 0) {
				this.$refs.hBsm.forEach((item) => {
					this.choosedList.forEach((i, ind) => {
						if (item.dataset.bsm == i) {
							if (ind == 0) {
								//定位到第一个户所在位置
								this.$refs.lpbContent.scrollTop = item.offsetTop;
								this.$refs.lpbContent.scrollLeft = item.offsetLeft;
							}
							item.style.border = '1px solid ' + this.borderColor;
							item.className = "tdSelect"
						}
					});
				});
			}
		},
		lpbChVisible (value) {
			if (value) {
				document.body.addEventListener("click", this.closeMenu);
			} else {
				document.body.removeEventListener("click", this.closeMenu);
			}
		},
	},
};
</script>
<style scoped lang="scss">
.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;

			.ljz {
				display: table;

				// margin-top: 30px;
				.ljz-zdy-wrap {
					width: auto;
					display: table;
					float: left;

					.ljz-zdy {
						height: auto;
						float: left;
						position: relative;

						table {
							bottom: 40px;
						}

						.zdy-name {
							width: 100%;
							// bottom: 0;
							// position: absolute;
							height: 40px;
							// background-color: rosybrown;
							// border:1px solid #E6E6E6
						}

						// .chTable-wrap{
						// 	position: absolute;
						// 	bottom: 40px;
						// }
					}
				}

				div:last-child {
					margin-right: 0;
				}

				.ljz-ch {
					float: left;
				}

				.ljz-zdy:last-child {
					margin-right: 0;
				}

				.column-reverse {
					display: flex;
					flex-direction: column-reverse;
				}

				// }
				.ljz-name {
					width: calc(100% - 32px);
					height: 40px;
					// background-color: darkorange;

				}
			}

			.mt30 {
				margin-top: 30px;
			}

			.mt60 {
				margin-top: 60px;
			}

			div:last-child {
				margin-right: 0;
			}
		}

		.zdy-wrap {
			height: auto;
			overflow: hidden;

			// margin-top: 30px;
			.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;
							// border:1px solid #E6E6E6
						}
					}

					.zdy-zdy:last-child {
						margin-right: 0;
					}
				}

				.zdy-name {
					width: calc;
					height: 40px;
					// background-color: rosybrown;
					border: 1px solid #E6E6E6
				}
			}

			.column-reverse {
				display: flex;
				flex-direction: column-reverse;
			}
		}

		// 公共部分样式 start
		.chTable {
			margin-left: -1px;

			// position: relative;
			tr {
				.floor {
					background-color: #fff;
				}

				td {
					min-width: 138px;
					height: 72px;
					line-height: 72px;
					text-align: center;
					cursor: pointer;
					position: relative;
					border: 1px solid #d5d6da;

					.hqszt {
						display: inline-block;
						width: 16px;
						height: 16px;
						font-size: 12px;
						line-height: 16px;
						position: absolute;
						left: 6px;
						top: 6px;
						border: 1px solid;
						border-radius: 8px;
					}

					.lin {
						color: #F7B500;
						border-color: #F7B500;
					}

					.zheng {
						color: #1AD6E1;
						border-color: #1AD6E1;
					}

					.xian {
						color: #45AEFD;
						border-color: #45AEFD;
					}

					.dyzt {
						user-select: none;
						width: 138px;
						height: 18px;
						position: absolute;
						// background: orange;
						bottom: 32px;
						box-sizing: border-box;
						padding: 0 6px;

						li {
							display: inline-block;
							width: 18px;
							height: 18px;
							font-size: 12px;
							line-height: 18px;
							color: #ffffff;
							border: 1px solid;
							border-radius: 9px;
						}
					}
				}

				.tdSelect {
					border: 1px solid #006cff !important;
					background-image: url("./images/tdSelect.png");
					background-repeat: no-repeat;
					background-position: right top;
					background-size: 30px;
				}

				.hasBorder {
					border-width: 1px;
					border-style: solid;
				}
			}
		}

		.name {
			line-height: 40px;
			text-align: center;
			display: table-footer-group;

			p {
				width: calc(100% - 2px);
				height: 100%;
				// border: 1px solid #E6E6E6;
			}
		}

		// end
	}

	.column-reverse {
		display: flex;
		flex-direction: column-reverse;
	}

	.zrz {
		height: 60px;
		line-height: 60px;
		background-color: #ffffff;
		border: 1px solid #E6E6E6;
		// position: relative;
		// bottom: 66px;
		text-align: center;
		transition: 0.5s;
	}

	.cantHb {
		opacity: .5;
		cursor: not-allowed;
	}

	.btnGroup {
		margin: 20px auto 0;
		width: 150px;
	}

	.el-checkbox {
		font-size: 16px;

		/deep/.el-checkbox__label {
			font-size: 16px;
		}

		/deep/ .el-checkbox__inner {
			width: 16px;
			height: 16px;
		}

		/deep/ .el-checkbox__inner::after {
			height: 9px;
			left: 4px;
			top: 0px;
			width: 5px;
		}

		/deep/ .el-checkbox__input {
			top: 1px;
		}
	}

	.hbjDialog {
		/deep/.el-dialog {
			margin-top: 10vh !important;
		}
	}
}
</style>