<template>
	<div class="lpbContent-wrap" ref="lpbContent">
		<div class="lpbContent">
			<div class="ljz">逻辑幢</div>
			<div class="zdy">幢单元</div>
			<div class="ch">层户</div>
		</div>
		<div
			class="zrz"
			:style="{ width: lpbContentWidth + 'px'}"
		>
			{{ lpbData.xmmc }}
		</div>
	</div>
</template>

<script>
export default {
	name: "",
	components: {},
	props: {},
	data() {
		return {
			lpbData: {
				bsm: "e9d1d425c30dd51b72d6f9daacd65d51",
				xmmc: "金星小区A幢",
				type: "zrz",
				max_singlefloorhouse: "10",
				zrzh: "600000 000 000 GB 00000 F0001",
				total_floors: "10",
				min_floor: "-2",
				max_floor: "8",
				ljzs: [
					{
						bsm: "ljzljz0101010101",
						ljzmc: "地下车库",
						type: "ljz",
						max_singlefloorhouse: "10",
						total_hs: "2",
						min_c: "1",
						max_c: "2",
						zdys: [
							{
								bsm: "zdybsm01",
								zdymc: "一单元",
								type: "zdy",
								max_singlefloorhouse: "2",
								total_floors: "2",
								min_floor: "1",
								max_floor: "2",
								cs: [
									{
										bsm: "c_01",
										type: "c",
										sjc: "1",
										ch: "1",
										maxhs: "2",
										hs: [
											{
												BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
												SHBW: "S01-01(1)",
												SJCS: "1",
												SJHS: "1",
												HH: "1",
												BDCDYH: "F0001",
												status: "10101011",
											},
											{
												BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
												SHBW: "S01-02(2)",
												SJCS: "2",
												SJHS: "1",
												HH: "2",
												BDCDYH: "F0002",
												status: "10101011",
											},
										],
									},
									{
										bsm: "c_02",
										type: "c",
										sjc: "2",
										ch: "2",
										maxhs: "2",
										hs: [
											{
												BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
												SHBW: "S01-01(1)",
												SJCS: "1",
												SJHS: "1",
												HH: "1",
												BDCDYH: "F0001",
												status: "10101011",
											},
											{
												BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
												SHBW: "S01-02(2)",
												SJCS: "2",
												SJHS: "1",
												HH: "2",
												BDCDYH: "F0002",
												status: "10101011",
											},
										],
									},
								],
							},
						],
					},
					{
						bsm: "ljzljz0101010101",
						ljzmc: "商业",
						type: "ljz",
						max_singlefloorhouse: "10",
						total_hs: "2",
						min_c: "1",
						max_c: "2",
					},
					{
						bsm: "ljzljz0101010101",
						ljzmc: "住宅",
						type: "ljz",
						max_singlefloorhouse: "10",
						total_hs: "2",
						min_c: "1",
						max_c: "2",
					},
				],
				zdys: [
					{
						bsm: "zdybsm01",
						zdymc: "一单元",
						type: "zdy",
						max_singlefloorhouse: "2",
						total_floors: "2",
						min_floor: "1",
						max_floor: "2",
						cs: [
							{
								bsm: "c_01",
								type: "c",
								sjc: "1",
								ch: "1",
								maxhs: "2",
								hs: [
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-01(1)",
										SJCS: "1",
										SJHS: "1",
										HH: "1",
										BDCDYH: "F0001",
										status: "10101011",
									},
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-02(2)",
										SJCS: "2",
										SJHS: "1",
										HH: "2",
										BDCDYH: "F0002",
										status: "10101011",
									},
								],
							},
							{
								bsm: "c_02",
								type: "c",
								sjc: "2",
								ch: "2",
								maxhs: "2",
								hs: [
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-01(1)",
										SJCS: "1",
										SJHS: "1",
										HH: "1",
										BDCDYH: "F0001",
										status: "10101011",
									},
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-02(2)",
										SJCS: "2",
										SJHS: "1",
										HH: "2",
										BDCDYH: "F0002",
										status: "10101011",
									},
								],
							},
						],
					},
					{
						bsm: "zdybsm02",
						zdymc: "二单元",
						type: "zdy",
						max_singlefloorhouse: "2",
						total_floors: "2",
						min_floor: "1",
						max_floor: "2",
						cs: [
							{
								bsm: "c_01",
								type: "c",
								sjc: "1",
								ch: "1",
								maxhs: "2",
								hs: [
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-01(1)",
										SJCS: "1",
										SJHS: "1",
										HH: "1",
										BDCDYH: "F0001",
										status: "10101011",
									},
									{
										BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
										SHBW: "S01-02(2)",
										SJCS: "2",
										SJHS: "1",
										HH: "2",
										BDCDYH: "F0002",
										status: "10101011",
									},
								],
							},
							{
								bsm: "c_02",
								type: "c",
								sjc: "2",
								ch: "2",
								maxhs: "2",
								hs: [
									{
										ID: "e9d1d425c30dd51b72d6f9daacd65d51",
										RoomNo: "S01-01(2)",
										SJCS: "2",
										SJHS: "1",
										SXH: "1",
										REUN: "F0001",
										status: "10101011",
									},
									{
										ID: "e9d1d425c30dd51b72d6f9daacd65d51",
										RoomNo: "S01-02",
										SJCS: "1",
										SJHS: "2",
										SXH: "2",
										REUN: "F0002",
										status: "10101011",
									},
								],
							},
						],
					},
				],
				cs: [
					{
						bsm: "c_01",
						type: "c",
						sjc: "1",
						ch: "1",
						maxhs: "2",
						hs: [
							{
								BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
								SHBW: "S01-01(1)",
								SJCS: "1",
								SJHS: "1",
								HH: "1",
								BDCDYH: "F0001",
								status: "10101011",
							},
							{
								BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
								SHBW: "S01-02(2)",
								SJCS: "2",
								SJHS: "1",
								HH: "2",
								BDCDYH: "F0002",
								status: "10101011",
							},
						],
					},
					{
						bsm: "c_02",
						type: "c",
						sjc: "2",
						ch: "2",
						maxhs: "2",
						hs: [
							{
								BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
								SHBW: "S01-01(1)",
								SJCS: "1",
								SJHS: "1",
								HH: "1",
								BDCDYH: "F0001",
								status: "10101011",
							},
							{
								BSM: "e9d1d425c30dd51b72d6f9daacd65d51",
								SHBW: "S01-02(2)",
								SJCS: "2",
								SJHS: "1",
								HH: "2",
								BDCDYH: "F0002",
								status: "10101011",
							},
						],
					},
				],
			},
			lpbContentWidth: "",
		};
	},
	created() {},
	mounted() {
		setTimeout(() => {
			this.lpbContentWidth = this.$store.state.contentWidth - 34 - 6;
		}, 100);
	},
	methods: {},
	computed: {
		createFlagChange() {
			return this.$parent.createFlag;
		},
		legendToggleFlagChange() {
			return this.$parent.legendToggleFlag;
		},
	},
	watch: {
		createFlagChange: function(val) {
			setTimeout(() => {
				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
			}, 501);
		},
		legendToggleFlagChange: function(val) {
			setTimeout(() => {
				this.lpbContentWidth = this.$refs.lpbContent.offsetWidth -6;
			}, 501);
		},
	},
};
</script>
<style scoped lang="less">
.lpbContent-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	.lpbContent {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: scroll;
		.ljz {
			width: 500px;
			height: 400px;
			background-color: darkorange;
		}
		.zdy {
			width: 1580px;
			height: 200px;
			background-color: rosybrown;
		}
		.ch {
			width: 800px;
			height: 200px;
			background-color: rgb(165, 136, 62);
		}
	}
	.zrz {
		height: 60px;
		line-height: 60px;
		background-color: darkgoldenrod;
		position: absolute;
		bottom: 0;
		text-align: center;
		transition: 0.5s;
	}
}
</style>