import _ from 'lodash'
import {baseConfig} from "../base";
import {text} from "../../Defaults";

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>'
                ];
            }

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

                    const value = newVal

                    if (value) {
                        me.getTrigger('clear').show();
                        me.updateLayout();
                    } else {
                        me.getTrigger('clear').hide();
                        me.updateLayout();
                    }
                }
            })

            initComponent.call(this)
        }
    });
}