<script lang="ts" setup>
import { ref } from 'vue';
import { selectFilterOptionRefMod } from 'src/stores/utils';

const model = defineModel<string | Date | null>();
const option = defineModel<[]>('option', { default: [] });

const props = defineProps<{
  id?: string;
  readonly?: boolean;
  clearable?: boolean;
  label?: string;
  rules?: ((value: string) => string | true)[];
  disabledDates?: string[] | Date[] | ((date: Date) => boolean);
}>();

const options = ref<Record<string, unknown>[]>([]);
let typeBusinessFilter = selectFilterOptionRefMod(option, options, 'label');
</script>
<template>
  <q-select
    outlined
    clearable
    use-input
    fill-input
    emit-value
    map-options
    hide-selected
    hide-bottom-space
    :hide-dropdown-icon="readonly"
    input-debounce="0"
    option-value="value"
    option-label="label"
    v-model="model"
    class="col-md-6 col-12"
    dense
    :readonly="readonly"
    :label="label"
    :options="options"
    :for="`${prefixId}-select-business-type`"
    @filter="typeBusinessFilter"
    :rules="[(val: string) => !!val || $t('form.error.required')]"
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">
          {{ $t('general.noData') }}
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>
