import { IconButton, Label } from "@/base";
import { HTapeLayout, shortcut, extend, createWidget } from "@/core";
import { MultiPopupView } from "./layer.multipopup";

/**
 * 可以理解为MultiPopupView和Panel两个面板的结合体
 * @class BI.PopupPanel
 * @extends BI.MultiPopupView
 */

@shortcut()
export class PopupPanel extends MultiPopupView {
    static xtype = "bi.popup_panel";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_CLOSE = "EVENT_CLOSE";
    static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-popup-panel`,
            title: "",
        });
    }

    _createTool() {
        const o = this.options;
        const close = createWidget({
            type: IconButton.xtype,
            cls: "close-h-font",
            width: 25,
            height: 25,
        });
        close.on(IconButton.EVENT_CHANGE, () => {
            this.setVisible(false);
            this.fireEvent(PopupPanel.EVENT_CLOSE);
        });

        return createWidget({
            type: HTapeLayout.xtype,
            cls: "popup-panel-title bi-header-background",
            height: 25,
            items: [
                {
                    el: {
                        type: Label.xtype,
                        textAlign: "left",
                        text: o.title,
                        height: 25,
                        lgap: 10,
                    },
                },
                {
                    el: close,
                    width: 25,
                }
            ],
        });
    }
}