import _ from 'lodash'
import {baseConfig} from "../base"
import {text} from "../../Defaults"
import {
    PropertyDescriptionTable,
    YvBase,
    fieldLabel,
    value,
    disabled,
    gravity,
    tooltip,
    metaId,
    width,
    height
} from "../../PropertyDescriptionTable"
import $ from 'jquery'
import {PropertyDescription} from "../../PropertyDescription"

export default function () {

    const cc = Ext.form.field.Text.prototype.constructor
    const {initComponent} = Ext.form.field.Text.prototype
    Ext.form.field.Text.override({
        constructor(config) {
            const newConfig = _.defaultsDeep({
                // 强制属性
                triggers: {
                    clear: {
                        weight: -1,
                        cls: Ext.baseCSSPrefix + 'form-clear-trigger',
                        hidden: true,
                        handler: 'onClearClick',
                    },
                }

            }, baseConfig(config, 'col-item'), config, text)

            cc.call(this, newConfig)
        },

        /**
         * 清空所有值
         */
        onClearClick(sender, e) {
            const me = this
            me.setValue('')
        },

        initComponent() {

            /**
             * 改变必填项之前加星号
             */
            if (this.allowBlank === false || this.validateBlank === true) {
                // this.beforeLabelTextTpl = [
                //     '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
                // ];
                this.afterLabelTextTpl = [
                    '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
                ];
            }

            const me = this
            this.on({
                change(sender, newVal) {
                    const {hideTrigger, disabled, readOnly, hideClear} = sender
                    if (hideTrigger || disabled || readOnly || hideClear) {
                        // 禁用、隐藏、只读、隐藏清空状态下，不需要显示清空按钮
                        return
                    }

                    const value = newVal

                    if (value) {
                        me.getTrigger('clear').show();
                        me.updateLayout();
                    } else {
                        me.getTrigger('clear').hide();
                        me.updateLayout();
                    }
                },
                afterrender(sender) {
                    if(sender.inputEl?.dom) {
                        sender.inputEl.dom.setAttribute('spellcheck', "false");
                        $(sender.inputEl.dom).on('click', (e)=>{
                            sender.fireEvent('click', this, e)
                        })
                    }
                }
            })

            initComponent.call(this)
        }
    });

    PropertyDescriptionTable.set(
        'textfield',
        new PropertyDescription(YvBase, {
            props: [
                fieldLabel, value, disabled,
                gravity, tooltip, metaId, width, height
            ],
        })
    )

}