<script setup lang="ts">
import { computed, h } from 'vue';
// import { useDict } from '@/hooks/business/dict';
import TableSearchFields from '@/components/custom/table-search-fields.vue';
import MemberSelectOption from './member-select-option.vue';

defineOptions({ name: 'ProjectRequirementSearch' });

interface MemberUserOption {
  id: string;
  nickname: string;
  roleName?: string;
}

interface Props {
  memberOptions: MemberUserOption[];
  categoryDictCode: string;
  priorityDictCode: string;
  statusOptions: Array<{ label: string; value: string }>;
}

const props = defineProps<Props>();

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

const emit = defineEmits<Emits>();

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

// const { enabledDictData: sourceTypeDictData } = useDict(RDMS_REQ_SOURCE_TYPE_DICT_CODE);
// const sourceTypeOptions = computed(() => {
//   return sourceTypeDictData.value.map(item => ({
//     label: item.label,
//     value: item.value
//   }));
// });

const memberSelectOptions = computed(() => {
  return props.memberOptions.map(item => ({
    label: item.nickname,
    value: item.id,
    roleName: item.roleName
  }));
});

function renderMemberOption(option: { label: string; value: string | number; roleName?: string }) {
  return h(MemberSelectOption, {
    nickname: option.label,
    roleName: option.roleName || ''
  });
}

const fields = computed(() => [
  {
    key: 'title',
    label: '需求名称',
    type: 'input' as const,
    placeholder: '输入需求名称'
  },
  {
    key: 'priority',
    label: '优先级',
    type: 'dict' as const,
    dictCode: props.priorityDictCode,
    placeholder: '筛选优先级'
  },
  {
    key: 'statusCode',
    label: '状态',
    type: 'select' as const,
    placeholder: '筛选状态',
    options: props.statusOptions
  },
  {
    key: 'category',
    label: '需求类型',
    type: 'dict' as const,
    dictCode: props.categoryDictCode,
    placeholder: '筛选需求类型'
  },
  // {
  //   key: 'sourceType',
  //   label: '需求来源',
  //   type: 'select' as const,
  //   placeholder: '筛选需求来源',
  //   options: sourceTypeOptions.value
  // },
  {
    key: 'sourceBizCode',
    label: '业务编号',
    type: 'input' as const,
    placeholder: '输入来源业务编号'
  },
  {
    key: 'currentHandlerUserId',
    label: '负责人',
    type: 'select' as const,
    placeholder: '筛选负责人',
    options: memberSelectOptions.value,
    filterable: true,
    renderOption: renderMemberOption
  }
]);
</script>

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

<style scoped></style>
