<template>
    <el-tabs v-model="activeTab" @tab-click="handleClick" tab-position="left" class="db-design" style="height: 100%;">
        <!--        <el-tab-pane label="名词标准" style="height: 100%;">-->
        <!--            <dev-db-field/>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane label="字段标准" name="status1" style="height: 100%;">
            <dev-db-field v-if="status1"/>
        </el-tab-pane>
        <el-tab-pane label="表设计" name="status2" style="height: 100%;">
            <dev-db-table v-if="status2"/>
        </el-tab-pane>
        <el-tab-pane label="结构同步" name="status3" style="height: 100%;">
            <dev-db-sync v-if="status3"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import DevDbField from './DevDbField'
import DevDbTable from './DevDbTable'
import DevDbSync from './DevDbSync'

export default {
    name: 'DbDesignPanel',
    components: {
        DevDbField,
        DevDbTable,
        DevDbSync,
    },
    data() {
        return {
            activeTab: 'status1',
            status1: true,
            status2: false,
            status3: false,
            status4: false,
            status5: false,
        }
    },
    methods: {
        handleClick(tab, event) {
            this[tab.name] = true;
        },
    }
}
</script>

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

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