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

defineOptions({ name: 'ProjectSearch' });

interface Props {
  productOptions: Array<{ id: string; name: string }>;
}

const props = defineProps<Props>();

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

const emit = defineEmits<Emits>();

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

const fields = computed<SearchField[]>(() => [
  {
    key: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '项目编码 / 名称'
  },
  {
    key: 'productId',
    label: '所属产品',
    type: 'select',
    options: props.productOptions.map(item => ({
      label: item.name,
      value: item.id
    })),
    placeholder: '筛选所属产品'
  },
  {
    key: 'projectType',
    label: '项目类型',
    type: 'dict',
    dictCode: RDMS_PROJECT_TYPE_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>
