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

defineOptions({ name: 'ProductSearch' });

interface Props {
  managerOptions: Api.SystemManage.UserSimple[];
}

const props = defineProps<Props>();

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

const emit = defineEmits<Emits>();

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

const fields = computed<SearchField[]>(() => [
  {
    key: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '产品名称 / 编号'
  },
  {
    key: 'managerUserId',
    label: '产品经理',
    type: 'select',
    options: props.managerOptions.map(item => ({
      label: item.nickname,
      value: item.id
    })),
    placeholder: '筛选产品经理'
  },
  {
    key: 'directionCode',
    label: '产品方向',
    type: 'dict',
    dictCode: RDMS_OBJECT_DIRECTION_DICT_CODE,
    placeholder: '筛选产品方向'
  }
]);

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

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

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

<style scoped></style>
