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

defineOptions({ name: 'ProjectExecutionTaskSearch' });

interface Props {
  model: Api.Project.ProjectTaskSearchParams;
  userOptions: Api.SystemManage.UserSimple[];
  statusOptions: Api.Project.StatusBoardItem[];
  disabled?: boolean;
}

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

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

const emit = defineEmits<Emits>();

const ownerOptions = computed(() =>
  props.userOptions.map(item => ({
    label: item.nickname,
    value: item.id
  }))
);

const fields = computed<SearchField[]>(() => [
  {
    key: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '任务名称/说明'
  },
  {
    key: 'statusCode',
    label: '状态',
    type: 'select',
    options: props.statusOptions.map(item => ({
      label: item.statusName,
      value: item.statusCode
    })),
    placeholder: '全部状态'
  },
  {
    key: 'ownerId',
    label: '负责人',
    type: 'select',
    options: ownerOptions.value,
    placeholder: '全部负责人'
  },
  {
    key: 'updateTime',
    label: '更新时间',
    type: 'dateRange'
  }
]);
</script>

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

<style scoped></style>
