<template>
    <Tabs v-model="page"
        size="small"
        name="main">
        <TabPane name="prop"
            label="属性"
            style="overflow: auto"
            :style="tabAdjust"
            tab="main">
            <Prop></Prop>
        </TabPane>
        <TabPane name="ds"
            label="数据源"
            style="overflow: auto"
            :style="tabAdjust"
            tab="main">
            <Tabs type="card"
                size="small"
                name="ds-item">
                <TabPane label="JDBC"
                    tab="ds-item">
                    <Datasource></Datasource>
                </TabPane>
                <TabPane label="内置数据源"
                    tab="ds-item">
                    <BuildInDatasource></BuildInDatasource>
                </TabPane>
            </Tabs>
        </TabPane>
        <TabPane name="filter"
            label="过滤"
            style="overflow: auto"
            :style="tabAdjust"
            tab="main">
            <FilterPane></FilterPane>
        </TabPane>
        <!--         <TabPane name="navigator"
            label="浏览"
            style="overflow: auto"
            :style="tabAdjust">
            <Navigator></Navigator>
        </TabPane> -->
    </Tabs>
</template>
<script>
import Hub from '../../Hub'
import Prop from './prop';
import Datasource from './datasource';
import BuildInDatasource from './buildInDatasource';
import FilterPane from './filter-pane';
import Navigator from './navigator'

export default {
    name: 'Properties',
    data() {
        return {
            page: undefined
        }
    },
    components: {
        Prop,
        Datasource,
        BuildInDatasource,
        FilterPane,
        Navigator
    },
    props: {
        panelHeight: {
            type: Number
        }
    },
    computed: {
        tabAdjust() {
            return {
                height: this.panelHeight + 'px'
            }
        }
    },
    methods: {

    },
    mounted() {
        Hub.$on('cell-click', () => {
            this.page = "prop";
        });
    }
};
</script>
<style>
</style>