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

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

    props = { baseCls: "demo-func" };

    _createEl() {
        return {
            type: "bi.label",
            cls: "bi-border",
            height: "100%",
            text: "点击",
        };
    }

    oneCombo() {
        return createWidget({
            type: "bi.combo",
            direction: "right,innerRight",
            isNeedAdjustWidth: false,
            isNeedAdjustHeight: false,
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    width: 200,
                    height: 200,
                },
            },
        });
    }

    twoCombo() {
        return createWidget({
            type: "bi.combo",
            direction: "right,innerRight",
            isNeedAdjustWidth: false,
            isNeedAdjustHeight: false,
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    width: 1000,
                    height: 200,
                },
            },
        });
    }

    threeCombo() {
        return createWidget({
            type: "bi.combo",
            direction: "right,innerRight",
            isNeedAdjustWidth: false,
            isNeedAdjustHeight: false,
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    width: 400,
                    height: 200,
                },
            },
        });
    }

    render() {
        return {
            type: "bi.grid",
            hgap: 10,
            vgap: 5,
            items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]],
        };
    }
}