
import {Widget} from "widget/Widget";
import {EventHub} from "event/EventHub";
import {MessageType} from "event/MessageType";
import {Event} from "event/Event";
import {Text} from "widget/Text";
import {RequisiteUtil} from "util/RequisiteUtil";

export class TextArea extends Text {


    private static TemplateNormal = `
        <div class="input-field">
            <i class="icon_normal"></i>
            <textarea class="materialize-textarea"></textarea>
            <label></label>
            <span class="span_base"></span>
        </div>`;


    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        let own = this;
        this.$thisNode = $(TextArea.TemplateNormal).attr({
            id: this.id + "_containerNode",
        });
        this.$inputNode = this.$thisNode.find("textarea");
        this.$inputNode.attr("id", this.id).on("input", function (e) {
            // 如果是中文正在输入
            if ($(this).prop("comStart")) return;
            own.handleOnInput();
            EventHub.dispatchEvent(MessageType.WIDGET, {
                id: id,
                text: $(this).val(),
                evtType: Event.MODIFY,
                syncAttrName: "text"
            });
        }).on("focus", function () {
            own.sendFocusGain();
        }).on("blur", function () {
            RequisiteUtil.checkRequisite(own.requisite, own, own.editable, own.$inputNode.val(), "请输入数据!");
        }).on("compositionstart", function () {
            // 中文开始输入
            $(this).prop("comStart", true);
        }).on('compositionend', function () {
            // 中文输入结束
            $(this).prop("comStart", false);
        });
        this.$thisNode.find("label").attr("for", this.id);
    }

} 