<template>
    <div class="content_box">
        <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
            <el-tab-pane label="户基本信息表" name="hjbxx">
                <hbj v-if="hbjVisible"></hbj>
            </el-tab-pane>
            <el-tab-pane label="登记簿" name="djb">
                <djb v-if="djbVisible"></djb>
            </el-tab-pane>
            <el-tab-pane label="附件材料" name="fjcl">
                <fjcl v-if="fjclVisible"></fjcl>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import hbj from "./../zrz/lpb/bjlp/hbj/index"
    import djb from "./../zd/djb/index";
    import fjcl from "./../zd/fjcl/fjcl"

    export default {
        name: "index",
        components: {
            hbj, djb, fjcl
        },
        data() {
            return {
                activeName: "hjbxx",
                djbVisible: false,
                fjclVisible: false,
                hbjVisible: false
            }
        },
        mounted() {

        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
                switch (tab.name) {
                    case 'hjbxx':
                        this.hbjVisible = true;
                        break
                    case 'djb':
                        this.djbVisible = true;
                        break;
                    case 'fjcl':
                        this.fjclVisible = true;
                        break;
                    default:
                        break;
                }
            },
        },
        watch: {}
    }
</script>

<style scoped>

</style>