<template>
    <el-tabs v-model="activeTab" @tab-click="handleClick" tab-position="left" class="config-tab" style="height: 100%;">
        <el-tab-pane label="我的配置" name="status1" style="height: 100%;">
            <dev-my-config v-if="status1"/>
        </el-tab-pane>
        <el-tab-pane label="数据源管理" name="status2" style="height: 100%;">
            <dev-db-source v-if="status2"/>
        </el-tab-pane>
        <el-tab-pane label="数据源授权" name="status3" style="height: 100%;">
            <dev-db-user-source v-if="status3"/>
        </el-tab-pane>
        <el-tab-pane label="文档历史表" name="status4" style="height: 100%;">
            <dev-doc-history v-if="status4"/>
        </el-tab-pane>
        <el-tab-pane label="组件基础模板" name="status5" style="height: 100%;">
            <dev-cpt-base v-if="status5"/>
        </el-tab-pane>
        <el-tab-pane label="组件配置" name="status6" style="height: 100%;">
            <dev-cpt v-if="status6"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import DevMyConfig from './DevMyConfig'
    import DevDbSource from './DevDbSource'
    import DevDbUserSource from './DevDbUserSource'
    import DevDocHistory from './DevDocHistory'
    import DevCpt from './DevCpt'
    import DevCptBase from './DevCptBase'

    export default {
        name: 'ConfigPanel',
        components: {
            DevMyConfig,
            DevDbSource,
            DevDbUserSource,
            DevDocHistory,
            DevCpt,
            DevCptBase,
        },
        data() {
            return {
                activeTab: 'status1',
                status1: true,
                status2: false,
                status3: false,
                status4: false,
                status5: false,
                status6: false,
                status7: false,
                status8: false,
            }
        },
        methods: {
            handleClick(tab, event) {
                this[tab.name] = true;
            },
        }
    }
</script>

<style scoped>
    .config-tab /deep/ .el-tabs__header.is-left {
        margin-right: 0px !important;
    }

    .config-tab /deep/ .el-tabs__content {
        height: 100% !important;
    }
</style>
