<template>
    <div style="height: 100%">
        <el-tabs v-model="activeName" class="api-tabs">
            <template v-for="(item,index) in options">
                <el-tab-pane :label="item.label" :name="'tab' + index" class="api-tab">
                    <component :is="item.component"></component>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>

<script>
// 批量导入modules下的组件
const allComponents = require.context('./../tabs', false, /\.vue$/)
const apiComponents = {}
allComponents.keys().forEach(fileName => {
    const comp = allComponents(fileName)
    apiComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default {
    name: "ApiTabs",
    components: apiComponents,
    props: {
        options: {
            type: Array,
        }
    },
    data() {
        return {
            activeName: 'tab0',
        }
    }
}
</script>

<style scoped>
.api-tabs {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.api-tab {
    height: 100%;
}

.api-tabs /deep/ .el-tabs__content {
    flex: 1;
    overflow: scroll;
}
</style>
