<template>
	<div class="content_box">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
			<el-tab-pane label="分割" name="fg"><fg ref="fg" v-if="fgLoad"></fg></el-tab-pane>
			<el-tab-pane label="合并" name="hb"><hb ref="hb" v-if="hbLoad"></hb></el-tab-pane>
			<el-tab-pane label="范围属性变更" name="fwsxbg"><fwsxbg v-if="fwsxbgLoad"></fwsxbg></el-tab-pane>
			<el-tab-pane label="重新落宗" name="cxlz"><cxlz v-if="cxlzLoad"></cxlz></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import fg from "./fg";
import hb from "./hb";
import fwsxbg from "./fwsxbg";
import cxlz from "./cxlz";
export default {
	name: "",
	components: {
        fg,hb,fwsxbg,cxlz
    },
	props: {},
	data() {
		return {
			activeName: "fg",
			fgLoad:true,
			hbLoad:false, //默认不加载合并tab
			fwsxbgLoad:false, //默认不加载范围属性变更tab
			cxlzLoad:false, //默认不加载重新落宗tab
		};
	},
	methods: {
		handleClick(tab, event) {
			// this.$refs.fg.$refs.isSearch = true;
			if (tab.name != 'fg') {
				this.fgLoad = false;
			}
			if (tab.name != 'hb') {
				this.hbLoad = false;
			}
			if(!this.hbLoad){
				this.hbLoad = tab.name == 'hb' ? true : false
			}
			if(!this.fgLoad){
				this.fgLoad = tab.name == 'fg' ? true : false
			}
			if(!this.fwsxbgLoad){
				this.fwsxbgLoad = tab.name == 'fwsxbg' ? true : false
			}
			if(!this.cxlzLoad){
				this.cxlzLoad = tab.name == 'cxlz' ? true : false
			}
		},
	},
	created() {},
	mounted() {},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
	.el-tabs{
		height: calc(100% - 50px);
		/deep/.el-tabs__content{
			height: 100%;
			/deep/.el-tab-pane{
				height: 100%;
			}
			background: #eaedf5;
		}
		/deep/ .el-tabs__item {
			height: 48px;
		}
	}
</style>