Vue.component("costom-text-column-filter", {
    template: `
        <div class="ibiz-ag-filter text-filter">
            <input type="text" :value="value" @change="valueChanged($event)"/>
            <Icon :class="{selectClear: value != ''}" type="ios-close-circle" @click="clear"/>
        </div>
    `,
    data: function () {
        return {
            value: "",
            grid: null,
            searchName: ''
        };
    },
    beforeMount() {
        let column = this.params.column.colDef;
        this.searchName = column.searchName;
        this.grid = this.params.grid;
    },
    mounted() {
        this.$nextTick(() => {
            if(this.grid && this.grid.colFilterParams) {
                this.value = this.grid.colFilterParams[this.searchName];
                if(this.value) {
                    this.params.onFloatingFilterChanged({
                        model: this.buildModel()
                    });
                }
            }
        })
    },
    methods: {
        valueChanged(event) {
            this.value = event.target.value;
            this.params.onFloatingFilterChanged({
                model: this.buildModel()
            });
        },
        // onParentModelChanged(parentModel) {
        // 	if(parentModel) {
        // 		this.value = !parentModel ? "" : parentModel.filter
        // 	} else {
        //         if(this.value) {
        //             setTimeout(() => {
        //                 this.params.onFloatingFilterChanged({
        //                     model: this.buildModel()
        //                 });
        //             }, 50)
        //         }
        //     }
        // },
        clear() {
        	this.value = "";
        	this.params.onFloatingFilterChanged({
                model: this.buildModel()
            });
        },
        buildModel() {
            return {
                filterType: 'text',
                type: 'contains',
                filter: this.value ? this.value : 'undefined'
            };
        }
    }
})