<script setup>
const dataTableFilters = useDataTableFilters()

const props = defineProps({
  params: Object
})

const filterText = ref('')

const onInputChanged = () => {
  let filterValue = {
    ...(dataTableFilters.value?.['salesOrder'] ?? {}),
    trackingNo: filterText.value
  }
  if(dataTableFilters.value?.['salesOrder']) {
    dataTableFilters.value['salesOrder'] = filterValue
  } else {
    dataTableFilters.value = {
      salesOrder: filterValue
    }
  }
  props.params.parentFilterInstance((instance) => {
    instance.onFloatingFilterChanged('contains', filterText.value)
  })
}

const onParentModelChanged = (parentModel) => {
  filterText.value = parentModel?.value || ''
}

defineExpose({
  onParentModelChanged
})
</script>

<template>
  <input
    type="text"
    v-model="filterText"
    @input="onInputChanged"
    class="ag-floating-filter-input"
    placeholder="Search..."
    style="width: 100%; height: 100%; padding: 0 4px; border: none; outline: none;"
  />
</template>
