import { shortcut, Widget, createWidget } from "@/core";
import { Editor as BIEditor} from "@/base";

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

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

    render() {
        const editor1 = createWidget({
            type: "bi.editor",
            cls: "bi-border",
            watermark: "报错信息显示在控件上方",
            errorText: "字段不可重名!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",
            width: 200,
            height: 24,
        });
        editor1.on(BIEditor.EVENT_ENTER, () => {
            editor1.blur();
        });
        const editor2 = createWidget({
            type: "bi.editor",
            cls: "bi-border",
            watermark: "输入'a'会有错误信息",
            disabled: true,
            errorText: "字段不可重名",
            validationChecker(v) {
                if (v == "a") {
                    return false;
                }

                return true;
            },
            allowBlank: true,
            width: 200,
            height: 24,
        });
        const editor3 = createWidget({
            type: "bi.editor",
            cls: "bi-border",
            watermark: "输入'a'会有错误信息且回车键不能退出编辑",
            errorText: "字段不可重名",
            value: "a",
            validationChecker(v) {
                if (v == "a") {
                    return false;
                }

                return true;
            },
            quitChecker(v) {
                return false;
            },
            allowBlank: true,
            width: 300,
            height: 24,
        });
        const editor4 = createWidget({
            type: "bi.editor",
            cls: "bi-border",
            inputType: "password",
            autocomplete: "new-password",
            watermark: "请输入密码",
            allowBlank: true,
            width: 300,
            height: 24,
        });
        createWidget({
            type: "bi.absolute",
            element: this,
            items: [
                {
                    el: editor1,
                    left: 0,
                    top: 0,
                },
                {
                    el: editor2,
                    left: 250,
                    top: 30,
                },
                {
                    el: editor3,
                    left: 500,
                    top: 60,
                },
                {
                    el: editor4,
                    left: 700,
                    top: 60,
                },
                {
                    el: {
                        type: "bi.button",
                        text: "disable",
                        handler() {
                            editor1.setEnable(false);
                            editor2.setEnable(false);
                            editor3.setEnable(false);
                        },
                        height: 30,
                    },
                    left: 100,
                    bottom: 60,
                },
                {
                    el: {
                        type: "bi.button",
                        text: "enable",
                        handler() {
                            editor1.setEnable(true);
                            editor2.setEnable(true);
                            editor3.setEnable(true);
                        },
                        height: 30,
                    },
                    left: 200,
                    bottom: 60,
                }
            ],
        });
    }
}