<template>
	<div class="content_box">
		<el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
			<el-tab-pane label="分割" name="fg"><fg></fg></el-tab-pane>
			<el-tab-pane label="合并" name="hb"><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",
			hbLoad:false, //默认不加载合并tab
			fwsxbgLoad:false, //默认不加载范围属性变更tab
			cxlzLoad:false, //默认不加载重新落宗tab
		};
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab.name);
			if(!this.hbLoad){
				this.hbLoad = tab.name == 'hb' ? 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"></style>