<template>
	<div ref="lpb" class="content_box">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
			<el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane>
			<el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
			<el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane>
			<el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import zrzxx from "./zrzxx";
import yzgy from "./yzgy";
import djb from "./djb";
import lpb from "./lpb";
import lshs from "./lshs";
export default {
	name: "",
	components: {
        zrzxx,yzgy,djb,lpb,lshs
    },
	props: {},
	data() {
		return {
			activeName: "zrzxx",
			lpbLoad:false, //默认不加载楼盘表组件
		};
	},
	methods: {
		handleClick(tab, event) {
			if(!this.lpbLoad){
				this.lpbLoad = tab.name == 'lpb' ? true : false
			}
		},
	},
	created() {},
	mounted() {
		this.$store.state.contentWidth = this.$refs.lpb.offsetWidth - 40;
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.content_box{
	box-sizing: border-box;
    padding: 0 20px;
	.el-tabs{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	/deep/.el-tabs__content{
		width: 100%;
		height: 100%;
		flex:1;
		position: unset;
	}
	.el-tab-pane{
		width: 100%;
		height: 100%;
	}
}
</style>