<template>
	<div class="lpbContent-wrap" ref="lpbContentWrap">
		<div
			:class="lpbData.ljzs.length == 0 ? ' lpbContent' : '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"
					:style="{'marginTop':'30px'}"
				>
					<!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
					<!-- <div  class="ljz-zdy-wrap" :style="{'min-height':ljzzdyHeight+40+'px'}"> -->
					<!-- 循环逻辑幢下的幢单元 -->
					<div
						class="ljz-zdy"
						:style="{ 'min-height': ljzzdyHeight + 'px','marginRight':zdyIndex<(ljzs.zdys.length-1)?'20px':'0'}"
						ref="ljzzdy"
						v-show="ljzs.zdys.length > 0"
						v-for="(zdys, zdyIndex) in ljzs.zdys"
						:key="zdyIndex"
					>
						<!-- 循环幢单元下的层户 -->
						<!-- <div class="chTable-wrap"> -->
						<table
							class="chTable psr"
							:style="{ top: (ljzzdyHeight - zdys.cs.length * 65) - 80  + '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"
									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"
									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="zdy-name name">
							<p>
								{{ zdys.zdymc }}
							</p>
						</div>
					</div>
					<!-- 循环逻辑幢下的层户 -->
					<div
						class="ljz-ch"
						ref="ljzDlch"
						:style="{ height: 'auto' }"
						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"
									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>
							{{ ljzs.ljzmc }}
						</p>
					</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">
						<p>
							{{ zdys.zdymc }}
						</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"
								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"
								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' }">
				{{ lpbData.xmmc }}
			</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 == 'fg'" :class="canHb!='sxhb'? 'cantHb':''" @click="handleHb('sxhb')">上下合并</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>
	</div>
</template>
<script>
import moveH from "@components/moveH/moveH";
import { getLpb, insertUpDownC, deleteCByBsm } from "@api/lpb";
import { hhb,hfg } from "@api/h";
import { Message } from 'element-ui';
export default {
	name: "",
	components: { moveH },
	props: {
		isHbfg:{
			type:Boolean,
			default:false
		},
		zrzbsm:{
			type:String,
			default:''
		},
		isHb:{
			type:Boolean,
			default:true
		}
	},
	data() {
		return {
			moveHvisible: false,
			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: [],
			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
			}
		};
	},
	created() {},
	mounted() {
		this.getLpb(this.zrzbsm, "0");
		this.getLpb(this.zrzbsm, "1");
		setTimeout(() => {
			//tab-content宽度 - 右侧图例宽度 - lp-overview滚动条宽度 - lpbContent的pandingRight
			this.lpbContentWidth = this.$store.state.contentWidth - 39 - 20;
			//让滚动条滚动至最下面 -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.loading = 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;
					}
					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.clearChoosedH();
			this.searchNum = sh;
			// console.log("查询searchNum" + searchNum);
		},
		//自然幢下元素高度宽度计算
		dataChange() {
			//计算逻辑幢宽度  20为marginRight值
			this.ljzWidth = 20;
			if (this.$refs.ljzzdy != undefined) {
				this.$refs.ljzzdy.forEach((item) => {
					this.ljzWidth += item.offsetWidth + 20;
				});
			} 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 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.$nextTick(() => {
						this.ljzzdyHeight = higher? highest : this.$refs.ljzch.offsetHeight;
						highest = 0;
					});
				} else {
					this.$nextTick(() => {
						this.ljzzdyHeight = highest;
						highest = 0;
					});
				}
			} else {

			}
		},
		//户单击事件
		handleTdClick(e, bsm,hs) {
			let self = this;
			// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
			clearTimeout(self.time);
			self.time = setTimeout(() => {
				//判断点击的户是否选中
				if (e.className.indexOf("tdSelect") == -1) {
					//未选中→选中
					e.className = "tdSelect"; //加边框
					if(this.isHbfg){
						this.fghbChoosedList.push(hs);
						this.hbsmList.push(bsm); // 将户bsm放进hbsmList
					}else{
						this.hbsmList.push(bsm); // 将户bsm放进hbsmList
					}
				} else {
					//选中→未选中
					e.className = "";
					if(this.isHbfg){
						this.deleteArrOption(this.fghbChoosedList, hs)
						this.deleteArrOption(this.hbsmList, bsm);
					}else{
						this.deleteArrOption(this.hbsmList, bsm);
					}
				}
				if(this.isHbfg){

				}else{
					this.$parent.getHbsm(this.hbsmList, false);
				}
			}, 200);
		},
		//户双击事件
		dbclick(bsm) {
			clearTimeout(this.time);
			// 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 = [];
			// });
		},
		//户右键点击事件
		openMenu(e, item, type) {
			this.lpbChLeft = e.pageX;
			this.lpbChTop = e.pageY;
			if (this.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;
					}
				}
			}else{
				console.log(e, "e");
				this.chData = item;
				this.rightClickFlag = type;
				this.lpbChVisible = true;
			}
		},
		// 户单元状态点击事件
		hDyztClick(e,bsm,hs){
			this.handleTdClick(e.target.parentNode,bsm,hs);
		},
		dyztIconClick(){

		},
		// 层选中事件
		handleClickC(e, item) {
			if (this.isHbfg) {
				
			}else{
				//判断点击的层是否选中
				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() {
			// 移动户
			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);
							}
						})
						.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);
				}
			})
			.catch(() => {});
		}
	},
	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;
			}
		},
		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.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); // 将户bsm放进hbsmList
						}
					}
				});
			});
		},
		//父组件中选择单元状态改变选中户的边框颜色
		choosedList(n) {
			this.$refs.hBsm.forEach((item) => {
				this.choosedList.forEach((i) => {
					if (item.dataset.bsm == i) {
						//定位到最后一个户所在位置
						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;
				// position: relative;
				// .ljz-zdy-wrap {
				// 	width: auto;
				// 	display: table;
				.ljz-zdy {
					height: auto;
					float: left;
					position: relative;
					.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;
					
				}
			}
			div:last-child {
				margin-right: 0;
			}
		}
		.bottom40 {
			margin-bottom: -30px;
		}
		.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;
				border-top:0;
			}
		}
		// 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;
	}
}
</style>