<script setup lang="ts">
import { computed } from 'vue';
import { dictStatusOptions } from '@/constants/business';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
import { $t } from '@/locales';

defineOptions({ name: 'DictDataSearch' });

interface Props {
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Api.Dict.DictDataSearchParams>('model', { required: true });

const fields = computed<SearchField[]>(() => [
  {
    key: 'label',
    label: $t('page.system.dict.dictLabel'),
    type: 'input',
    placeholder: $t('page.system.dict.form.dictLabel')
  },
  {
    key: 'status',
    label: $t('page.system.dict.dictStatus'),
    type: 'select',
    placeholder: $t('page.system.dict.form.dictStatus'),
    options: dictStatusOptions.map(item => ({
      label: $t(item.label),
      value: item.value
    }))
  }
]);

function handleReset() {
  emit('reset');
}

function handleSearch() {
  emit('search');
}
</script>

<template>
  <TableSearchFields
    v-model="model"
    :fields="fields"
    :columns="3"
    :disabled="props.disabled"
    @reset="handleReset"
    @search="handleSearch"
  />
</template>
