import { shortcut, Widget, createWidget, each } from "@/core";
import { Bubbles, Msg } from "@/base";

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

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

    render() {
        const btns = [];
        const bubble = createWidget({
            type: "bi.left",
            items: [
                {
                    el: {
                        type: "bi.button",
                        text: "bubble测试",
                        height: 30,
                        handler() {
                            Bubbles.show("singleBubble1", "bubble测试", this);
                            btns.push("singleBubble1");
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "bubble测试(居中显示)",
                        height: 30,
                        handler() {
                            Bubbles.show("singleBubble2", "bubble测试", this, {
                                offsetStyle: "center",
                            });
                            btns.push("singleBubble2");
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "bubble测试(右边显示)",
                        height: 30,
                        handler() {
                            Bubbles.show("singleBubble3", "bubble测试", this, {
                                offsetStyle: "right",
                            });
                            btns.push("singleBubble3");
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "隐藏所有 bubble",
                        height: 30,
                        cls: "layout-bg2",
                        handler() {
                            each(btns, (index, value) => {
                                Bubbles.hide(value);
                            });
                        },
                    },
                }
            ],
            hgap: 20,
        });

        const title = createWidget({
            type: "bi.vertical",
            items: [
                {
                    type: "bi.label",
                    cls: "layout-bg1",
                    height: 50,
                    title: "title提示",
                    text: "移上去有title提示",
                    textAlign: "center",
                },
                {
                    type: "bi.label",
                    cls: "layout-bg6",
                    height: 50,
                    disabled: true,
                    warningTitle: "title错误提示",
                    text: "移上去有title错误提示",
                    textAlign: "center",
                },
                {
                    type: "bi.label",
                    cls: "layout-bg2",
                    height: 50,
                    disabled: true,
                    tipType: "success",
                    title: "自定义title提示效果",
                    warningTitle: "自定义title提示效果",
                    text: "自定义title提示效果",
                    textAlign: "center",
                }
            ],
            hgap: 20,
            vgap: 20,
        });

        const toast = createWidget({
            type: "bi.vertical",
            items: [
                {
                    el: {
                        type: "bi.button",
                        text: "简单Toast测试",
                        height: 30,
                        handler() {
                            Msg.toast("这是一条简单的数据");
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "很长的Toast测试",
                        height: 30,
                        handler() {
                            Msg.toast(
                                "这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"
                            );
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "非常长的Toast测试",
                        height: 30,
                        handler() {
                            Msg.toast(
                                "这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"
                            );
                        },
                    },
                },
                {
                    el: {
                        type: "bi.button",
                        text: "错误提示Toast测试",
                        level: "warning",
                        height: 30,
                        handler() {
                            Msg.toast("错误提示Toast测试", "warning");
                        },
                    },
                }
            ],
            vgap: 20,
        });

        return {
            type: "bi.horizontal_auto",
            vgap: 20,
            hgap: 20,
            items: [bubble, title, toast],
        };
    }
}