import { shortcut, store } from '@core/core';
import { Tab, Vtape, Absolute } from 'ui';
import { TitleXtype } from './title/title';
import { PAGE_INDEX } from './constants/constant';
import { ConnectionXtype, DatebaseXtype, MaintainXtype, ConnectionPoolXtype } from './pages';
import { AppModel, AppModelXtype } from './app.model';
import './app.provider';
import '../less/index.less';

export const AppXtype = 'dec.dcm.main';
@store(AppModelXtype)
@shortcut(AppXtype)
export class App extends BI.Widget {
    tab: any;

    store: AppModel['store'];
    model: AppModel['model'];

    watch = {
        pageIndex: (index: string) => {
            this.tab.setSelect(index);
        },
    }

    render() {
        return {
            type: Vtape,
            items: [
                {
                    el: {
                        type: TitleXtype,
                        cls: 'bi-border-bottom',
                    },
                    height: 40,
                },
                {
                    type: Absolute,
                    cls: 'bi-background',
                    items: [{
                        el: {
                            type: Tab,
                            cls: 'bi-card',
                            single: true,
                            tgap: 10,
                            showIndex: this.model.pageIndex,
                            ref: (_ref: any) => {
                                this.tab = _ref;
                            },
                            cardCreator: (index: string) => {
                                switch (index) {
                                    case PAGE_INDEX.CONNECTION:
                                        return {
                                            type: ConnectionXtype,
                                        };
                                    case PAGE_INDEX.DATEBASE:
                                        return {
                                            type: DatebaseXtype,
                                        };
                                    case PAGE_INDEX.MAINTAIN:
                                        return {
                                            type: MaintainXtype,
                                        };
                                    default:
                                        return {
                                            type: ConnectionPoolXtype,
                                        };
                                }
                            },
                        },
                        left: 10,
                        top: 10,
                        right: 10,
                        bottom: 10,
                    }],
                },
            ],
        };
    }
}