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

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

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

    render() {
        let ref;

        return {
            type: "bi.vertical",
            items: [
                {
                    type: "bi.button_group",
                    ref(_ref) {
                        ref = _ref;
                    },
                    chooseType: ButtonGroup.CHOOSE_TYPE_NONE,
                    layouts: [
                        {
                            type: "bi.vertical",
                            items: [
                                {
                                    type: "bi.vtape",
                                    height: 200,
                                }
                            ],
                        }
                    ],
                    items: [
                        {
                            el: {
                                type: "bi.label",
                                text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)",
                            },
                            height: 150,
                        },
                        {
                            el: {
                                type: "bi.button",
                                text: "1",
                            },
                        }
                    ],
                },
                {
                    type: "bi.button",
                    text: "populate",
                    handler() {
                        ref.populate([
                            {
                                el: {
                                    type: "bi.label",
                                    text: "1",
                                },
                                height: 50,
                            },
                            {
                                el: {
                                    type: "bi.button",
                                    text: "2",
                                },
                                height: 50,
                            },
                            {
                                el: {
                                    type: "bi.label",
                                    text: "3",
                                },
                            }
                        ]);
                    },
                }
            ],
        };
    }
}