<template>
	<div class="edit">
		<el-tabs type="card" v-model="activeName" >
			<el-tab-pane label="楼盘页面" name="first"></el-tab-pane>
			<el-tab-pane label="单元列表页面" name="second"></el-tab-pane>
		</el-tabs>
		<div class="tab-content" v-if="activeName=='first'" 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="circle" :style="{ 'background-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="circle" :style="{ 'background-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="circle" :style="{ 'background-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="circle" :style="{ 'background-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>
    <!--    单元列表页面-->
    <selectAllHInfo v-else :sqywInfo="formData" />
	</div>
</template>

<script>
import lpbContent from "./lpbContent/index";
import selectAllHInfo from "../ywbl/ywsq/components/selectAllHInfo"
import { getLpbFwytAndQlxz,getLpbQsxtj } from '@/api/lpb'
export default {
	name: "lpb",
	props: {
		formData: {
			type: Object,
			default: {}
		}
	},
	components: {
		lpbContent,
    selectAllHInfo
	},
	data () {
		return {
      activeName:"first",
			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);
    console.log(this.formData);
		this.getHeight();
	},
	mounted () {
		//获取各项单元状态的户bsm
		// this.getDyztBsmList();
		//获取房屋用途统计数据
		this.getLpbFwytAndQlxz();
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
		}, 100);
	},
	methods: {
		/* handleTabClick(event){
			if(event.name=="first"){
				this.$router.push({
					path:"/lpb/index",
				})
			}else if(event.name=="second"){
				this.$router.push({
				path:"/ywbl/ywsq/components/selectAllHInfo",
				})
			}
			},*/
		//获取高度计算lpb内容区高度
		getHeight () {
			this.lpbContentHight = window.innerHeight - 190;
		},
		//图例的展开收起
		legendToggle () {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
		//切换房屋状态
		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: 'ca71bcc498794a1e0ec3ac93869719f6',
				scyclx: 1,
			};
			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 () {
			getLpbFwytAndQlxz('ca71bcc498794a1e0ec3ac93869719f6').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('ca71bcc498794a1e0ec3ac93869719f6').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-content {
		border: 1px solid #dedede;
		background-color: #ffffff;
		display: flex;
		&::-webkit-scrollbar {
			width: 1px;
		}
		.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;
					border-color: #e4ebf4 !important;
					border-collapse: collapse;
					border-spacing: 0;
					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;
							.circle{
								display: inline-block;
								width: 12px;
								height: 12px;
								border-radius: 6px;
								margin-right: 2px;
								position: relative;
								top: 1px;
							}
						}

						td:first-child {
							text-align: left;
							text-indent: 2px;
						}
					}
				}
			}
		}
	}
}
</style>