<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="户基本信息表" name="hjbxx">
            <hbj ref="hbj" :bsm="hbsm"></hbj>
        </el-tab-pane>
        <el-tab-pane label="登记簿" name="djb">
            <djb v-if="djbVisible" :style="{'height' : formHeight+'px'}"></djb>
        </el-tab-pane>
        <el-tab-pane label="附件材料" name="fjcl">
            <fjcl v-if="fjclVisible" ref="fjcl" :style="{'height' : formHeight+'px'}" :is-disabled="isDisabled"></fjcl>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import hbj from "../index"
    import djb from "../../../../../zd/djb/index";
    import fjcl from "../../../../../zd/fjcl/fjcl"
    import {queryStatus} from "@api/search"
    export default {
        name: "index",
        components: {
            hbj, djb, fjcl
        },
        data() {
            return {
                isDisabled:false,
                hbsm:this.$store.state.hbsm,
                activeName: "hjbxx",
                djbVisible: false,
                fjclVisible: false,
                formHeight:0,
            }
        },
        mounted() {
            this.formHeight =  (document.documentElement.clientHeight || document.body.clientHeight) - 260
        },
        methods: {
            loadingStatus() {
                debugger
                let bsm=this.$store.state.hbsm;
                queryStatus(bsm).then(res => {
                    if (res.success) {
                        let qszt = res.result.qszt;
                        this.isDisabled = +qszt !== 0;
                    }
                })
            },
            handleClick(tab, event) {
                this.loadingStatus()
                // console.log(tab, event);
                switch (tab.name) {
                    case 'djb':
                        this.djbVisible = true;
                        break;
                    case 'fjcl':
                        this.fjclVisible = true;
                        break;
                    default:
                        break;
                }
            },
        },
        watch: {}
    }
</script>

<style scoped lang="less">
.el-tabs{
    /deep/.el-tabs__nav-scroll{
        margin-left: -35px;
    }
}
</style>