<template>
	<div class="edit">
		<!-- <div class="tab-header">
			<el-row class="searchContent">
				<el-col :span="24" style="margin:0 0 10px 18px;">
					<el-radio-group v-model="scyclx" @change="scyclxChange">
						<el-radio-button label="0">预测</el-radio-button>
						<el-radio-button label="1">实测</el-radio-button>
					</el-radio-group>
					<el-input maxlength="28" v-model="" :style="{ width: inputWidth + 'px' }" class="searchInput"
						placeholder="输入不动产单元号或室号"><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i>
					</el-input>
				</el-col>
			</el-row>
		</div> -->
		<div class="tab-content" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag">
			<!-- 楼盘表主体 -->
			<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
				<lpbContent ref="lpbContent" :zrzbsm="formData.bsm" :key="time"></lpbContent>
			</div>
			<!-- 右侧图例 -->
			<div class="lp-legend">
				<div class="handleCol">
					<div class="btn" @click="legendToggle">
						<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
						<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
					</div>
					<div :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'" @click="selectedZt = 'dyzt'">
						<span>单元状态</span>
					</div>
					<div :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'" @click="selectedZt = 'fwxz'">
						<span>房屋性质</span>
					</div>
					<div :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'" @click="selectedZt = 'fwyt'">
						<span>房屋用途</span>
					</div>
					<div :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'">
						<span>缺失项</span>
					</div>

				</div>
				<div class="legendTable-wrap" :style="{ width: legendToggleFlag ? '204px' : '0' }">
					<table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>状态</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in dyztList" :key="index" class="cp"
							@click="handleChoosedH(item.bsms, item.color)">
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
					</table>
					<table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>性质</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in fwxzList" :key="index" class="cp"
							@click="handleChoosedH(item.bsms, item.color)">
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
						<tr v-show="fwxzList.length < 1">
							<td colspan="3" class="tac">暂无数据</td>
						</tr>
					</table>

					<table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>用途</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in fwytList" :key="index" class="cp"
							@click="handleChoosedH(item.bsms, item.color)">
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
						<tr v-show="fwytList.length < 1">
							<td colspan="3" class="tac">暂无数据</td>
						</tr>
					</table>

					<table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>数据缺失项</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>0</td>
						</tr>
						<tr v-show="qsxList.length < 1">
							<td colspan="3" class="tac">暂无数据</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import lpbContent from "./lpbContent/index";
export default {
	name: "lpb",
	props: {
		formData: {
			type: Object,
			default: {}
		}
	},
	components: {
		lpbContent		
	},
	data () {
		return {
			bsms: [],
			dialogVisible: false,
			scyclx: "0", //1是实测  0是预测
			menuType: "",
			selectedZt: "dyzt", //图例选中项，默认选中单元状态
			dyztList: [
				{
					name: "未确权",
					color: "#83AAFE",
					ts: "12",
					mj: "1633",
				},
				{
					name: "已确权",
					color: "#6EDEE1",
					ts: "22",
					mj: "3109",
				},
				{
					name: "已备案",
					color: "#8ADC88",
					ts: "3",
					mj: "409",
				},
				{
					name: "预抵押",
					color: "#F2AD67",
					ts: "11",
					mj: "1466",
				},
				{
					name: "在建抵押",
					color: "#F191C8",
					ts: "13",
					mj: "1792",
				},
				{
					name: "抵押",
					color: "#FF8282",
					ts: "14",
					mj: "13",
				},
				{
					name: "查封",
					color: "#D7CECF",
					ts: "9",
					mj: "1436",
				},
				{
					name: "异议",
					color: "#D4A3EB",
					ts: "34",
					mj: "4342",
				},
				{
					name: "限制",
					color: "#A5A3FB",
					ts: "2",
					mj: "285",
				},
			],
			fwxzList: [],
			fwytList: [],
			qsxList: [],
			legendToggleFlag: false,
			lpbContentHight: "",
			lpbContentwidth: "",
			time: "",
			dyztBsmList: {}, //单元状态bsmList
			bjztFlag: true,
			qsztList: [],
		};
	},
	created () {
		window.addEventListener("resize", this.getHeight);
		this.getHeight();
	},
	mounted () {
		//获取各项单元状态的户bsm
		// this.getDyztBsmList();
		//获取房屋用途统计数据
		// this.getLpbFwytAndQlxz();
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
		}, 100);
	},
	methods: {

		loading () {
			this.getLpbMenuTree(this.$store.state.zrzbsm);
		},
		lodding () {
			this.getlpbData();
		},

		//获取高度计算lpb内容区高度
		getHeight () {
			this.lpbContentHight = window.innerHeight - 190;
		},

		//图例的展开收起
		legendToggle () {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
		//获取选中户bsm
		getHbsm (data, type) {
			if (type) {
				// 双击

			} else {
				//单击 TO DO
				this.bsms = data;
			}
		},
		//调用楼盘表信息查询和图例统计接口
		getlpbData () {
			this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, this.scyclx);
			this.getDyztBsmList();
			this.getLpbFwytAndQlxz();
			//改变楼盘表子组件的key值，重新渲染
			// this.time = new Date().getTime();
		},
		//切换房屋状态
		handleChoosedH (bsms, color) {
			//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
			this.$refs.lpbContent.choosedList = [];
			this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
				item.style.border = '';
				item.className = '';
			});
			this.bsms = bsms;
			//清除选中户
			this.$nextTick(() => {
				//给hBsmList传值
				// console.log(bsms,'bsms');
				this.$refs.lpbContent.choosedList = bsms;
				this.$refs.lpbContent.borderColor = color;
			})
		},


		//获取各项单元状态统计数据
		getDyztBsmList () {
			let data = {
				zrzbsm: this.$store.state.zrzbsm,
				scyclx: this.scyclx,
			};
			getLpbTj(data).then((res) => {
				if (res.code === 200) {
					this.dyztList = res.result;
					this.dyztList.splice(1, 0, this.dyztList[8]);
					this.dyztList.pop();
					this.dyztList.forEach(item => {
						item.ts = item.bsms.length;
						switch (item.name) {
							case 'Qqzt':
								item.color = "#6EDEE1";
								item.name = "已确权"
								break;
							case 'Wqqzt':
								item.color = "#83AAFE";
								item.name = "未确权"
								break;
							case 'Bazt':
								item.color = "#8ADC88";
								item.name = "已备案"
								break;
							case 'Ydyzt':
								item.color = "#F2AD67";
								item.name = "预抵押"
								break;
							case 'Zjgcdyzt':
								item.color = "#F191C8";
								item.name = "在建抵押"
								break;
							case 'Dyzt':
								item.color = "#FF8282";
								item.name = "抵押"
								break;
							case 'Cfzt':
								item.color = "#D7CECF";
								item.name = "查封"
								break;
							case 'Yyzt':
								item.color = "#D4A3EB";
								item.name = "异议"
								break;
							case 'Xzzt':
								item.color = "#A5A3FB";
								item.name = "限制"
								break;
							default:
								break;
						}
					})
				}
			});
		},
		// 获取房屋用途和房屋性质及缺失项统计数据
		getLpbFwytAndQlxz () {
			let data = {
				zrzbsm: this.$store.state.zrzbsm,
				scyclx: this.scyclx,
			};
			getLpbFwytAndQlxz(data).then((res) => {
				if (res.code === 200) {
					// this.fwytList = res.result
					this.fwytList = res.result.fwyt;
					this.fwxzList = res.result.qlxz;
					if (this.fwytList.length > 0) {
						this.fwytList.forEach(item => {
							item.color = "#2591FD";
							item.ts = item.bsms.length
						})
					}
					if (this.fwxzList.length > 0) {
						this.fwxzList.forEach(item => {
							item.color = "#2591FD";
							item.ts = item.bsms.length
						})
					}
				}
			});
			getLpbQsxtj(data).then((res) => {
				if (res.code === 200) {
					this.qsxList = [
						{
							name: '坐落',
							bsms: res.result.zl.bsms,
							color: '#2591FD',
							ts: res.result.zl.bsms.length
						},
						{
							name: '分层分户图',
							bsms: res.result.fcfht.bsms,
							color: '#2591FD',
							ts: res.result.fcfht.bsms.length
						},
						{
							name: '室号',
							bsms: res.result.shbw.bsms,
							color: '#2591FD',
							ts: res.result.shbw.bsms.length
						}
					]
				}
			});
		}

	},
	computed: {},
	destroyed () {
		window.removeEventListener("resize", this.getHeight);
	},
	watch: {
		//树结构和图例伸缩时修改楼盘表主要内容区宽度
		legendToggleFlag (n) {
			if (n) {
				this.lpbContentwidth -= 204;
			} else {
				this.lpbContentwidth += 204;
			}
		},
		selectedZt (n) {
			this.legendToggleFlag = true;
		},
	},
};
</script>
<style scoped lang="scss">
.edit {
	height: 100%;
	background-color: #F4F9FF;
	.tab-header {
		border: 1px solid #dedede;
		box-sizing: border-box;
		padding: 20px 0;
		background-color: #ffffff;
		margin-bottom: 10px;
		position: relative;
		.searchContent {
			margin-left: 62px;
			box-sizing: border-box;
			padding: 0 20px;
			.searchInput {
				transition: 0.5s;
				margin-left: 20px;
				display: inline-block;
			}
		}
		.change {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 80px;
			border-right: 1px solid #dedede;
			i {
				cursor: pointer;
				color: #0090FF;
				font-size: 36px;
				display: inherit;
				text-align: center;
				line-height: 128px;
			}
		}

		.radioBtn {
			margin-left: 10px;
			padding: 12px 10px;
			border: 0;
			i {
				font-size: 13px;
				padding-right: 4px;
			}
			/deep/.el-radio-button__inner {
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				box-shadow: 0 0 0 0 #409eff !important;
			}
		}
	}

	.tab-content {
		border: 1px solid #dedede;
		background-color: #ffffff;
		display: flex;
		.lp-tree {
			height: 100%;
			overflow: hidden;
			transition: 0.5s;
			.treeData {
				margin-top: 20px;
				margin-left: 26px;
				float: left;
			}
		}

		.w0 {
			width: 0;
		}

		.w260 {
			width: 260px;
		}

		.lp-overview {
			transition: 0.5s;
			flex: 1;
			border: 1px solid rgb(236, 236, 236);
			border-top: 0;
			border-bottom: 0;
			margin-right: 10px;
			box-sizing: border-box;
		}

		.lp-legend {
			transition: 0.5s;
			height: 100%;
			font-size: 14px;

			.handleCol {
				width: 34px;
				float: right;
				height: 100%;

				.btn {
					cursor: pointer;
					height: 40px;
					line-height: 40px;
					text-align: center;
					background-color: #0091ff;
					color: #fff;
					border-bottom: 1px solid #e6e6e6;
				}

				.dyzt,
				.fwxz,
				.fwyt,
				.qsx {
					height: 122px;
				}

				.dyzt,
				.fwxz,
				.fwyt,
				.qsx {
					cursor: pointer;
					border-bottom: 1px solid #e6e6e6;
					border-left: 1px solid #e6e6e6;

					span {
						text-align: center;
						height: 100%;
						-webkit-writing-mode: vertical-rl;
						writing-mode: vertical-rl;
						line-height: 34px;
						letter-spacing: 2px;
					}
				}

				.selectedZt {
					background-color: #0091ff;
					color: #fff;
				}
			}

			.legendTable-wrap {
				transition: 0.5s;
				float: right;
				overflow: hidden;

				.legendTable {
					margin-top: -1px;

					tr {
						height: 40px;
						line-height: 40px;

						th:first-child {
							width: 80px;
						}

						th {
							width: 60px;
							height: 40px;
							white-space: nowrap;
						}

						td {
							height: 40px;
							text-align: center;
							white-space: nowrap;
						}

						td:first-child {
							text-align: left;
							text-indent: 2px;
						}
					}
				}
			}
		}
	}

	.tab-content::-webkit-scrollbar {
		width: 1px;
	}

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

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

	.fa {
		padding-right: 4px;
	}

	.wrap {
		width: 100%;
		height: 30px;
		position: relative;

		.main-button {
			display: -webkit-flex;
			display: flex;
			flex-direction: column-reverse;
			flex-wrap: nowrap;
			position: absolute;
			left: 165px;
			top: 18px;
		}

		.download {
			position: absolute;
			left: 312px;
			top: 19px;
		}
	}
}
</style>