export default {
    props: {
        containerDivClass: { type: String, required: false },
        searchValue: { type: [String, Number], required: false },
        fieldName: { type: String, required: false },
        fieldLabel: { type: String, required: false },
        fieldDataType: { type: String, required: false, default: 'text' }, //'text', 'number'
        id: { type: String, required: false },
        disabled: { type: Boolean, required: false, default: false },
        maxLength: { type: Number, required: false, default: -1 },
    },
    data() {
        return {
            controlId: this.id ?? 'txt_ins_' + Math.ceil(1000 * 10000 * Math.random() * Math.random()).toString()
        };
    },
    methods: {
        blurHandler: function (e) { 
            if (e && e.target && (!e.target.value || e.target.value == ''))
                $(e.target).parent().removeClass('focused');
            this.changeHandler(e);
        },
        changeHandler: function (e) {
            this.$emit('inputSearchChange', { searchValue: e.target.value, fieldName: this.fieldName, id: this.id, submit: false });
        },
        changeHandler2: function (e) {
            this.$emit('inputSearchChange', { searchValue: e.target.value, fieldName: this.fieldName, id: this.id, submit: true });
        },
        focus: function (e) {
            $(e.target).parent().addClass('focused');
        },
        keyupHandler: function (e) {
            if (e && e.target && e.target.value)
                e.target.value = e.target.value.replace(/[\<\>]+/g, '');

            if (this.fieldDataType && this.fieldDataType != '' && this.fieldDataType.toLowerCase() == 'number' && e && e.target && e.target.value)
                e.target.value = e.target.value.replace(/[^0-9]/g, '');
        }
    },
    template: `
<div :class="containerDivClass">
    <div class="form-group form-float"> 
        <div class="form-line" :class="{focused: searchValue && searchValue != ''}">
            <input :id="controlId" type="text" :value="searchValue" class="form-control" :disabled="disabled" @focus='focus' @keyup='keyupHandler' @change="changeHandler" @blur="blurHandler" @keydown="focus" @keyup.enter="changeHandler2" :maxlength="maxLength > 0 ? maxLength : null"  />
            <span class="form-label">{{ fieldLabel }}</span>
        </div>
    </div>
</div>
`
}
