import { shortcut, Widget, Stores } from "@/core";

@shortcut()
export class Main extends Widget {
    static xtype = "demo.main";

    props = { baseCls: "demo-main bi-background" };

    _store() {
        return Stores.getStore("demo.store.main");
    }

    beforeInit(cb) {
        this.store.init(cb);
    }

    render() {
        const self = this;
        
        return {
            type: "bi.border",
            items: {
                north: {
                    height: 50,
                    el: {
                        type: "demo.north",
                        listeners: [
                            {
                                eventName: Demo.North.EVENT_VALUE_CHANGE,
                                action (v) {
                                    self.store.handleTreeSelectChange(v);
                                },
                            }
                        ],
                    },
                },
                west: {
                    width: 230,
                    el: {
                        type: "demo.west",
                        listeners: [
                            {
                                eventName: Demo.West.EVENT_VALUE_CHANGE,
                                action (v) {
                                    self.store.handleTreeSelectChange(v);
                                },
                            }
                        ],
                    },
                },
                center: {
                    el: {
                        type: "demo.center",
                        ref (_ref) {
                            self.center = _ref;
                        },
                    },
                },
            },
        };
    }
}