<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">
						<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>
									<!-- {{ zdys.zdymc }} -->
									<el-checkbox @change='zdySelectAll($event,zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
								</p>
							</div>

							<!-- 循环幢单元下的层户 -->
							<!-- <div class="chTable-wrap"> -->
							<table
								class="chTable psr"
								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)"
									>
										{{ 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)"
								>
									{{ 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="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>
							<!-- {{ zdys.zdymc }} -->
							<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)"
							>
								{{ 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)"
							>
								{{ 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>
			<!-- <div class="ch-wrap">层户</div> -->
			<div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
				<el-checkbox v-model="zrzChecked" @change='lpbSelectAll'>{{ lpbData.xmmc }}</el-checkbox>
			</div>
		</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('up')">
				向上添加层
			</li>
			<li v-show="rightClickFlag == 'c'" @click="handleAddC('down')">
				向下添加层
			</li>
			<li v-show="rightClickFlag == 'c'" @click="handleDeleteC">删除层</li>
			<!-- 合并 -->
			<li v-show="rightClickFlag == 'hb'" :class="canHb!='zyhb'? 'cantHb':''" @click="handleHb('zyhb')">左右合并</li>
			<li v-show="rightClickFlag == 'hb'" :class="canHb!='sxhb'? 'cantHb':''" @click="handleHb('sxhb')">上下合并</li>
			<!-- 分割 -->
			<li v-show="rightClickFlag == 'fg'"  @click="handleFg">户分割</li>
			<!-- 范围属性变更 -->
			<li v-show="rightClickFlag == 'fwsxbg'"  @click="handleFwsxbg">变更信息</li>
			<!-- 重新落宗 -->
			<li v-show="rightClickFlag == 'cxlz'"  @click="handleCxlz">重新落宗</li>


		</ul>
		<!-- 层操作弹框 -->
		<el-dialog v-dialogDrag :close-on-click-modal="false"
			:title="addCData.title"
			:visible.sync="addCVisible"
			width="50%"
		>
			<el-form :model="addCData">
				<el-form-item label="层号" :label-width="formLabelWidth">
					<el-input
						disabled
						v-model="addCData.sjc"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="实际层" :label-width="formLabelWidth">
					<el-input
						disabled
						v-model="addCData.sjc"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="添加的户数" :label-width="formLabelWidth">
					<el-input v-model="addCData.hcount" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div class="btnGroup">
				<el-button type="primary" @click="saveAddC">保存</el-button>
				<el-button type="primary" @click="addCVisible = false">取消</el-button>
			</div>
		</el-dialog >
		<!-- 户分割弹框 -->
		<el-dialog v-dialogDrag :close-on-click-modal="false"
			title = "户分割"
			:visible.sync="hfgDialogVisible"
			width="800px"
		>
		<el-form :model="fgData">
			<el-form-item label="分割户数" required="" :label-width="formLabelWidth">
				<el-input
					:disabled="fgData.fgfx!=0"
					v-model="fgData.fghs"
					autocomplete="off"
				></el-input>
			</el-form-item>
		</el-form>
		<div class="btnGroup">
			<el-button type="primary" @click="savefgData">保存</el-button>
			<el-button type="primary" @click="hfgDialogVisible = false">取消</el-button>
		</div>
		</el-dialog>
		<move-h
			:hbsm="chData.bsm"
			@close="moveHClose"
			:move-hvisible="moveHvisible"
			:type="scyclx"
			@loading="loadingData($store.state.zrzbsm,$parent.scyclx)"
		></move-h>
		<!-- 双击户的弹出框 -->
		<el-dialog v-dialogDrag :close-on-click-modal="false" title="户编辑" class="hbjDialog" :visible.sync="hbjVisible" width="80%" >
			<hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx"></hbj>
		</el-dialog>
		<!-- 户重新落宗 -->
		<h-cxlz
			:h-cxlz-visble="hcxlzVisible"
			:bsms="hbsmList"
			@close="hcxlzVisible = false"
		></h-cxlz>
	</div>
</template>
<script>
import moveH from "@components/moveH/moveH";
import HCxlz from "@components/hCxlz/hCxlz";
import { getLpb, insertUpDownC, deleteCByBsm } from "@api/lpb";
import { hhb,hfg } from "@api/h";
import { Message } from 'element-ui';
import { fwsxbgbl } from "@api/common";
import hbj from "../hbj/index";
export default {
	name: "",
	components: { moveH,hbj,HCxlz, },
	props: {
		zrzbsm:{
			type:String,
			default:''
		},
		lpbParent:{
			type:String,
			default:'isLpb'
		},
		isHb:{
			type:Boolean,
			default:true
		},
	},
	data() {
		return {
			moveHvisible: false,
			lpbData: {
				ljzs: [],
				cs: [],
				zdys: [],
			},
			hbjVisible:false,
			hcxlzVisible: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: "",
			//层操作数据
			addCVisible: false,
			addCData: {
				title: "",
				cbsm: "", //层标识码
				hcount: "", //添加户数
				scyclx: "", //实测预测类型
				sjc: "", //当前的层的SJC +1
			},
			formLabelWidth: "120px",
			yclpbData:{},
			sclpbData:{},
			fghbChoosedList:[],
			canHb:'',//判断合并类型
			hfgDialogVisible:false, //户分割弹框
			fgData:{
				fghs:"",
				oldbsm:'',
				fgfx:0
			},
			zrzChecked:false, //自然幢全选
		};
	},
	created() {},
	mounted() {
		this.getLpb(this.zrzbsm, "0");
		this.getLpb(this.zrzbsm, "1");
		setTimeout(() => {
			//让滚动条滚动至最下面 -6是横向滚动条的高度
			this.$refs.lpbContent.scrollTop =
				this.$refs.lpbContent.scrollHeight -
				this.$refs.lpbContent.clientHeight -
				6;
		}, 200);
	},
	methods: {
		loadingData(zrzbsm,scyclx) {
			this.getLpb(zrzbsm,scyclx,true);
		},
		//获取楼盘表数据
		getLpb(zrzbsm, scyclx,actual) {
			getLpb(zrzbsm, scyclx).then((res) => {
				if (res.code == 200) {
					this.$parent.lpbloading = false;
					res.result.ljzs = res.result.ljzs
						.sort(this.compare("place"))
						.reverse();
					// this.lpbData = res.result == null ? this.lpbData : res.result;
					//给实预测楼盘表对象赋值，默认加载预测楼盘表数据
					if(scyclx == 0){
						this.yclpbData = res.result == null ? this.yclpbData : res.result;
						this.lpbData = this.yclpbData;
					}else{
						this.sclpbData = res.result == null ? this.sclpbData : res.result;
					}
					if(actual){
						this.lpbData = res.result == null ? this.yclpbData : res.result;
					}
					if (this.lpbParent == 'isFwsxbg') {
						this.lpbData = this.$parent.scyclx == '0' ? this.yclpbData:this.sclpbData;
					}
					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);
		},
		//接收范围属性变更传入的hbsm
		getFwsxbgHbsm(bsm){
			this.hbsmList.push(bsm);
		},
		//自然幢下元素高度宽度计算
		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) {
					this.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':
							this.$parent.getHbsm(this.hbsmList, false);
							this.$parent.getQsztList(this.hqsztList, false);
							break;
					
						default:
							break;
					}
				} else {
					//选中→未选中
					e.className = "";
					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;
					}
				}
			}, 100);
		},
		//户双击事件
		dbclick(bsm) {
			clearTimeout(this.time);
			this.hbsm = bsm;
			this.$store.state.hbsm=this.data;
			this.hbjVisible = true;
			this.$nextTick(function() {
				this.$refs.hbj.getHInfo(this.hbsm);
			});
			// if (this.isHbfg) {
				
			// }else{
			// this.hbsmList.push(bsm); // 将户bsm放进hbsmList
			// this.$parent.getHbsm(bsm, 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 = [];
			this.hqsztList = [];
			// });
		},
		//户右键点击事件
		openMenu(e, item, type) {
			this.lpbChLeft = e.pageX;
			this.lpbChTop = e.pageY;
			this.chData = item;
			switch (this.lpbParent) {
				case 'isHbfg':
					this.rightClickFlag = this.isHb ? 'hb':'fg';
					if (this.fghbChoosedList.length>1) {
						//合并
						this.lpbChVisible = true;
						//判断选中户可以执行的合并类型
						let chIsSame = this.fghbChoosedList.every((item)=> {
							return item.ch == this.fghbChoosedList[0].ch;
						});
						let hhIsSame = this.fghbChoosedList.every((item)=> {
							return item.hh == this.fghbChoosedList[0].hh;
						});
						this.$nextTick(()=>{
							if(chIsSame){
								this.canHb = 'zyhb'
							}else if(hhIsSame){
								this.canHb = 'sxhb'
							}else{
								this.canHb = ''
							}
						})
					}else{
						//分割
						this.lpbChVisible = true;
						this.fgData.oldbsm = item.bsm;
						console.log(item,'item');
						//判断户的实际sjcs为1，只能水平分割
						this.fgData.fgfx = item.sjcs == 1 ? 0 : 1;
						if(item.sjcs == 1){
							//判断户的实际sjcs为1，只能水平分割
							this.fgData.fgfx = 0;
							this.fgData.fghs = '';
						}else{
							this.fgData.fgfx = 1;
							//判断户的实际sjhs不为1，分割户数为sjhs的值
							this.fgData.fghs = item.sjcs;
						}
					}
					break;
				case 'isFwsxbg':
					if (this.hbsmList[0] == item.bsm) {
						this.rightClickFlag = 'fwsxbg';
						this.lpbChVisible = true;
					}else{
						this.lpbChVisible = false;
					}
					break;
				case 'isCxlz':
					this.rightClickFlag = 'cxlz';
					this.lpbChVisible = true;
					break;
				case 'isLpb':
					this.rightClickFlag = type;
					this.lpbChVisible = true;
					break;
			
				default:
					break;
			}
		},
		// 户单元状态点击事件
		hDyztClick(e,bsm,hs){
			this.handleTdClick(e.target.parentNode,bsm,hs);
		},
		dyztIconClick(){

		},
		// 层选中事件
		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;
		},
		//户右键菜单 start
		handleAddH() {},
		handleMoveH() {
			// 移动户
			console.log(this.chData, "chData");
			console.log(this.$parent.scyclx, "实预测类型");
			this.moveHvisible = true;
		},
		moveHClose() {
			this.moveHvisible = false;
		},
		handleDeleteH() {},
		handleSyczh() {},
		//end
		// 层右键菜单 start
		//添加
		handleAddC(type) {
			this.addCData.title = type == "up" ? "向上添加层" : "向下添加层";
			this.addCVisible = true;
			this.addCData.sjc =
				type == "up"
					? Number(this.chData.sjc) + 1
					: Number(this.chData.sjc) - 1;
			this.addCData.cbsm = this.chData.bsm;
			this.addCData.scyclx = this.$parent.scyclx;
		},
		//删除
		handleDeleteC() {
			let params = {
				cbsm: this.chData.bsm,
				scyclx: this.$parent.scyclx,
			};
			this.$confirm("是否确认删除该层?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteCByBsm(params).then((res) => {
						if (res.code == 200) {
							this.$message({
								message: "删除成功",
								type: "success",
							});
							this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
						} else {
							this.$message({
								message: res.message,
								type: "warning",
							});
						}
					});
				})
				.catch(() => {});
		},
		//确认添加
		saveAddC() {
			insertUpDownC(this.addCData).then((res) => {
				if (res.code == 200) {
					this.$message({
						message: "添加成功",
						type: "success",
					});
					this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
					this.addCVisible = false;
				} else {
					this.$message({
						message: res.message,
						type: "warning",
					});
				}
			});
		},
		//户合并
		handleHb(type){
			let olbBsms = '';
			this.hbsmList.forEach((item,index)=>{
				olbBsms+= index<this.hbsmList.length-1? item+',':item
			})
			if (type == this.canHb) {
				this.$confirm("是否确认合并选中户?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						//确定合并 调用合并接口 this.hbsmList为选中户bsm数组 TO DO 
						let params = {
							"newuserbsm": "",
							"oldBsms": olbBsms,
							"scyclx": this.$parent.scyclx,
							"ljzbsm": this.fghbChoosedList[0].ljzbsm,
							"zdybsm": this.fghbChoosedList[0].zdybsm,
							"zrzbsm": this.fghbChoosedList[0].zrzbsm
						}
						// console.log(params,'params');
						hhb(params).then((res) => {
							if(res.code == 200){
								Message.success('合并成功');
								// 清除选中户
								this.clearChoosedH();
								this.fghbChoosedList = [];
								// 更新楼盘表
								this.getLpb(this.zrzbsm, this.$parent.scyclx);
							}else{
								Message.error(res.message);
							}
						})
						.catch(() => {});
					})
					.catch(() => {});
			}else{

			}
		},
		//户分割
		handleFg(){
			this.hfgDialogVisible = true;
		},
		//户分割保存
		savefgData(){
			hfg(this.fgData).then((res) => {
				if(res.code == 200){
					Message.success('分割成功');
					// 清除选中户
					this.hfgDialogVisible = false
					this.clearChoosedH();
					this.fghbChoosedList = [];
					// 更新楼盘表
					this.getLpb(this.zrzbsm, this.$parent.scyclx);
				}else{
					Message.error(res.message);
				}
			})
			.catch(() => {});
		},
		//范围属性变更
		handleFwsxbg(){
			let params = { bsm: this.chData.bsm, type: 'h'};
			this.$confirm('是否确定范围属性变更?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					fwsxbgbl(params)
						.then((res) => {
							if (res.code == 200) {
								console.log('成功');
								this.getLpb(this.zrzbsm,this.scyclx);
								this.dbclick(this.chData.bsm);
							} else {
								this.$message({
									message: res.message,
									type: "warning",
								});
							}
						}).catch((error) => {
							
						});
				}).catch(() => {

				});
		},
		//户重新落宗
		handleCxlz(){
            if (this.hbsmList.length <= 0) {
              this.hbsmList.push(this.chData);
            }
            this.hcxlzVisible = true
		},
		//楼盘表户全选
		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.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;
						}
					});
				});
			}
		},
		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;
			.ljz {
				// margin-bottom: 20px;
				display: table;
				margin-top: 30px;
				// position: relative;
				.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 {
			// position: relative;
			tr {
				.floor {
					background-color: #fff;
				}
				td {
					min-width: 138px;
					height: 72px;
					line-height: 72px;
					text-align: center;
					cursor: pointer;
					position: relative;
					.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("../../../../../assets/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;
		}
	}
}
</style>