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

defineOptions({ name: 'MenuSearch' });

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.SystemManage.MenuSearchParams>('model', { required: true });

const fields = computed<SearchField[]>(() => [
  {
    key: 'name',
    label: $t('page.system.menu.menuName'),
    type: 'input',
    placeholder: $t('page.system.menu.form.menuName')
  },
  {
    key: 'status',
    label: $t('page.system.menu.menuStatus'),
    type: 'select',
    placeholder: $t('page.system.menu.form.menuStatus'),
    options: commonStatusOptions.map(item => ({
      label: $t(item.label),
      value: item.value
    }))
  }
]);

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

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

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

<style scoped></style>
