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

defineOptions({ name: 'PerformanceSearch' });

interface Option {
  label: string;
  value: string | number;
}

interface Props {
  subordinateOptions?: Option[];
  deptOptions?: Option[];
}

const props = withDefaults(defineProps<Props>(), {
  subordinateOptions: () => [],
  deptOptions: () => []
});

const model = defineModel<Api.Performance.Sheet.SearchParams>('model', { required: true });

const emit = defineEmits<{
  reset: [];
  search: [];
}>();

const fields = computed<SearchField[]>(() => [
  {
    key: 'periodMonthRange',
    label: '绩效月份',
    type: 'dateRange',
    dateRangeType: 'monthrange',
    valueFormat: 'YYYY-MM-DD',
    placeholder: '选择月份区间'
  },
  { key: 'employeeId', label: '员工', type: 'select', placeholder: '请选择员工', options: props.subordinateOptions },
  { key: 'employeeDeptId', label: '部门', type: 'select', placeholder: '请选择部门', options: props.deptOptions },
  { key: 'managerName', label: '直属上级', type: 'input', placeholder: '请输入直属上级' },
  { key: 'statusCode', label: '状态', type: 'select', placeholder: '请选择状态', options: performanceStatusOptions }
]);
</script>

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