<template>
    <div class='other-matter'>
        <van-tabs
            v-model='active'
            class='other-tabs'
            color='#025BAA'
            @change='changeTab'
            title-active-color='#025BAA'
            :line-width='70'
            :line-height='2'
        >
            <van-tab title='综合事项'>
                <ComprehensiveMatter />
            </van-tab>
            <van-tab title='辅助用房'>
                <AuxiliaryRoom />
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs)
import ComprehensiveMatter from './ComprehensiveMatter'
import AuxiliaryRoom from './AuxiliaryRoom'
export default {
    name: 'OtherMatter',
    props: {},
    components: { ComprehensiveMatter, AuxiliaryRoom },
    data() {
        return {
            active: 0,
            key0: 1,
            key1: 1,
        }
    },
    beforeMount() {},
    mounted() {},
    methods: {
        changeTab(active) {
            // if (this.active === 0) {
            //     this.key0++
            // } else {
            //     this.key1++
            // }
        },
    },
}
</script>
<style lang='less' scoped>
.other-matter {
    width: 100%;
    height: calc(100% - 100px);
    // background-color: #d3d3d3;
    .other-tabs {
        height: 100%;
        /deep/ .van-tab__text {
            font-size: 16px;
        }
        /deep/ .van-tabs__wrap {
            height: 45px;
            border-bottom: 1px solid #eaeaea;
            .van-tabs__nav--line {
                box-sizing: content-box;
                height: 100%;
                width: 80%;
                margin: 0 auto;
            }
        }
        /deep/ .van-tabs__content {
            height: calc(100% - 45px);
            .van-tab__pane {
                height: 100%;
            }
        }
    }
}
</style>