<template>
	<div ref="lpb" class="content_box">
		<el-tabs v-model="activeName" class="tabs" @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-tab-pane label="附件材料" name="fjcl"><fjcl></fjcl></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";
import fjcl from "./../zd/fjcl/fjcl";
export default {
	name: "",
	components: {
        zrzxx,yzgy,djb,lpb,lshs,fjcl
    },
	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 - 37;
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.content_box{
	padding: 0 0 16px;
//     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>