<template>
	<div class="edit">
		<div class="tab-header">
			<div class="searchContent">
				<el-radio-group v-model="radio1">
					<el-radio-button class="radioBtn" label="1" border
						>实测</el-radio-button
					>
					<el-radio-button class="radioBtn" label="2" border
						>预测</el-radio-button
					>
				</el-radio-group>
				<el-input
					v-model="bdcdyh"
					class="searchInput"
					placeholder="输入不动产单元号"
				></el-input>
			</div>
			<div>
				<el-button class="radioBtn" label="1" @click="create" border
					>创建楼盘</el-button
				>
				<el-button class="radioBtn" label="2" border>实预测转换</el-button>
				<el-button class="radioBtn" label="3" border>批量户</el-button>
				<el-button class="radioBtn" label="4" border>批量层</el-button>
				<el-button class="radioBtn" label="5" border>批量室号</el-button>
				<el-button class="radioBtn" label="6" border>批量坐落</el-button>
				<el-button class="radioBtn" label="7" border>批量单元号</el-button>
			</div>
		</div>
		<div
			class="tab-content"
			ref="tabContent"
			:style="{ height: lpbContentHight + 'px' }"
		>
			<!-- 左侧树结构 -->
			<div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
				<LineTree :pd="pd" class="treeData" :islpb="islpb"></LineTree>
				<p
					@click="createFlag = false"
					style="width:20px;float:left;margin-top: 12px;margin-left:10px;cursor:pointer;"
				>
					X
				</p>
			</div>
			<!-- 楼盘表主体 -->
			<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
				<lpbContent></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="dyzt">
						<span>单元状态</span>
					</div>
					<div class="fwxz">
						<span>房屋性质</span>
					</div>
					<div class="fwyt">
						<span>房屋用途</span>
					</div>
				</div>
				<div
					class="legendTable-wrap"
					:style="{ width: legendToggleFlag ? '204px' : '0' }"
				>
					<table class="legendTable" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>状态</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in legendList" :key="index">
							<td>
								<i class="el-icon-star-on" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<el-dialog title="添加" :visible.sync="dialogVisible" width="50%" center>
			<!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容  -->
			<div class="addCh" v-show="menuType == 'ljz'">
				<addLjz ref="ljz"></addLjz>
			</div>
			<div class="addCh" v-show="menuType == 'zdy'">
				<addZdy ref="zdy"></addZdy>
			</div>
			<div class="addCh" v-show="menuType == 'ch'">
				<addCh ref="ch" :dialogVisible="dialogVisible" :treeData="treeData"></addCh>
			</div>
			<div class="btnGroup">
				<el-button type="primary" @click="saveInfo">保存</el-button>
				<el-button type="primary" @click="resetInfo">重置</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import LineTree from "../../../../components/lineTree/lineTree";
import addLjz from "./ljz/index";
import addZdy from "./zdy/index";
import addCh from "./ch/index";
import lpbContent from "./lpbContent/index";
import { getLpbMenuTree } from "../../../../api/lpb";
export default {
	name: "",
	components: { LineTree, addLjz, addZdy, addCh, lpbContent },
	props: {},
	data() {
		return {
			radio1: "",
			radio2: "",
			createFlag: false,
			bdcdyh: "",
			islpb: true,
			pd: [], //创建楼盘的树结构数据
			dialogVisible: false,
			menuType: "",
			treeData: {},
			legendList: [
				{
					name: "未确权",
					color: "#2591FD",
					ts: "12",
					mj: "1633",
				},
				{
					name: "已确权",
					color: "#2591FD",
					ts: "22",
					mj: "3109",
				},
				{
					name: "已注销",
					color: "#2591FD",
					ts: "13",
					mj: "1457",
				},
				{
					name: "已备案",
					color: "#2591FD",
					ts: "3",
					mj: "409",
				},
				{
					name: "预抵押",
					color: "#2591FD",
					ts: "11",
					mj: "1466",
				},
				{
					name: "在建抵押",
					color: "#2591FD",
					ts: "13",
					mj: "1792",
				},
				{
					name: "抵押",
					color: "#2591FD",
					ts: "14",
					mj: "13",
				},
				{
					name: "查封",
					color: "#2591FD",
					ts: "9",
					mj: "1436",
				},
				{
					name: "异议",
					color: "#2591FD",
					ts: "34",
					mj: "4342",
				},
				{
					name: "限制",
					color: "#2591FD",
					ts: "2",
					mj: "285",
				},
			],
			legendToggleFlag: false,
			lpbContentHight: "",
			lpbContentwidth: "",
		};
	},
	created() {
		window.addEventListener("resize", this.getHeight);
		this.getHeight();
	},
	mounted() {
		this.getLpbMenuTree("1e0c83dfe2e73284f834a80a0947f0c9");
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6; 
		}, 100);
	},
	methods: {
		//获取高度计算lpb内容区高度
		getHeight() {
			this.lpbContentHight = window.innerHeight - 340;
		},
		//创建楼盘
		create() {
			this.createFlag = true;
		},
		//获取自然幢树结构数据
		getLpbMenuTree(zrzbsm) {
			getLpbMenuTree(zrzbsm)
				.then((res) => {
					this.pd = res.result;
				})
				.catch((error) => {});
		},
		//打开新建楼盘树结构右键菜单唤起的弹框
		openLpbDialog(data, type) {
			this.treeData = data;
			this.menuType = type;
			this.dialogVisible = true;
		},
		//弹框中的保存按钮，根据不同菜单点击类型调用不同子组件的保存方法
		saveInfo() {
			switch (this.menuType) {
				case "ljz":
					this.$refs.ljz.onSave(this.$refs.ljz.form, this.treeData.bsm);
					break;
				case "zdy":
					this.$refs.zdy.submitForm("form", this.pd[0].bsm, this.treeData.bsm);
					break;
				case "ch":
					this.$refs.ch.onSave(this.pd[0].bsm);
					break;
				default:
					break;
			}
		},
		//弹框中的重置按钮
		resetInfo() {
			switch (this.menuType) {
				case "ljz":
					this.$refs.ljz.reset();
					break;
				case "zdy":
					this.$refs.zdy.reset();
					break;
				case "ch":
					this.$refs.ch.reset();
					break;

				default:
					break;
			}
		},
		//关闭弹框
		closeDaialog() {
			this.dialogVisible = false;
		},
		//图例的展开收起
		legendToggle() {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
	},
	computed: {
	},
	destroyed() {
		window.removeEventListener("resize", this.getHeight);
	},
	watch: {
		//树结构和图例伸缩时修改楼盘表主要内容区宽度
		legendToggleFlag(n) {
			if (n) {
				this.lpbContentwidth -= 204;
			} else {
				this.lpbContentwidth += 204;
			}
		},
		createFlag(n) {
			if (n) {
				this.lpbContentwidth -= 260;
			} else {
				this.lpbContentwidth += 260;
			}
		},
	},
};
</script>
<style scoped lang="less">
.edit {
	height: 100%;
	background-color: #eaedf5;
	.tab-header {
		border: 1px solid #dedede;
		border-top: 0;
		box-sizing: border-box;
		padding: 20px 0;
		background-color: #ffffff;
		margin-bottom: 20px;
		.searchContent {
			margin-bottom: 20px;
			.searchInput {
				width: 300px;
				margin-left: 20px;
				display: inline-block;
			}
		}
		.radioBtn {
			margin-left: 20px;
			/deep/.el-radio-button__inner {
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				box-shadow: 0 0 0 0 #409eff !important;
			}
		}
	}
	.tab-content {
		background-color: #ffffff;
		display: flex;
		overflow-y: scroll;
		.lp-tree {
			height: 100%;
			overflow: hidden;
			transition: 0.5s;
			.treeData {
				margin-top: 20px;
				margin-left: 20px;
				float: left;
			}
		}
		.w0 {
			width: 0;
		}
		.w260 {
			width: 260px;
		}
		.lp-overview {
			transition: 0.5s;
			flex: 1;
		}
		.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;
					border-bottom: 1px solid #e6e6e6;
				}
				.dyzt {
					height: 81px;
					line-height: 81px;
				}
				.fwxz,
				.fwyt {
					height: 122px;
				}
				.dyzt,
				.fwxz,
				.fwyt {
					border-bottom: 1px solid #e6e6e6;
					span {
						text-align: center;
						height: 100%;
						-webkit-writing-mode: vertical-rl;
						writing-mode: vertical-rl;
						line-height: 34px;
						letter-spacing: 2px;
					}
				}
			}
			.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;
						}
					}
				}
			}
		}
	}
	.btnGroup {
		margin: 20px auto 0;
		width: 230px;
	}
}
</style>