<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RDMS_REQ_SOURCE_TYPE_DICT_CODE } from '@/constants/dict';
import { fetchGetRequirementStatusDict } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import DictSelect from '@/components/custom/dict-select.vue';
import TableSearchPanel from '@/components/custom/table-search-panel.vue';
import MemberSelectOption from './member-select-option.vue';

defineOptions({ name: 'RequirementSearch' });

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

interface Props {
  memberOptions: MemberUserOption[];
  categoryDictCode: string;
  priorityDictCode: string;
}

defineProps<Props>();

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

const emit = defineEmits<Emits>();

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

const requirementStatusOptions = ref<Array<{ label: string; value: string }>>([]);

const { enabledDictData: sourceTypeDictData } = useDict(RDMS_REQ_SOURCE_TYPE_DICT_CODE);

const sourceTypeOptions = computed(() => {
  return sourceTypeDictData.value
    .filter(item => item.value !== 'product_requirement')
    .map(item => ({
      label: item.label,
      value: item.value
    }));
});

async function loadStatusOptions() {
  const { error, data } = await fetchGetRequirementStatusDict();

  if (error || !data) {
    requirementStatusOptions.value = [];
    return;
  }

  requirementStatusOptions.value = data.map(item => ({
    label: item.statusName,
    value: item.statusCode
  }));
}

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

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

onMounted(async () => {
  await loadStatusOptions();
});
</script>

<template>
  <TableSearchPanel :model="model" :action-col-lg="6" @reset="reset" @search="search">
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="需求名称">
        <ElInput v-model="model.title" clearable placeholder="输入需求名称" />
      </ElFormItem>
    </ElCol>
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="需求类型">
        <DictSelect
          v-model="model.category"
          :dict-code="categoryDictCode"
          clearable
          filterable
          placeholder="筛选需求类型"
        />
      </ElFormItem>
    </ElCol>
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="优先级">
        <DictSelect v-model="model.priority" :dict-code="priorityDictCode" clearable placeholder="筛选优先级" />
      </ElFormItem>
    </ElCol>
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="状态">
        <ElSelect v-model="model.statusCode" clearable placeholder="筛选状态">
          <ElOption
            v-for="item in requirementStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </ElSelect>
      </ElFormItem>
    </ElCol>
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="负责人">
        <ElSelect
          v-model="model.currentHandlerUserId"
          clearable
          filterable
          placeholder="筛选负责人"
          :filter-method="(val: string) => val"
        >
          <ElOption v-for="item in memberOptions" :key="item.id" :label="item.nickname" :value="item.id">
            <MemberSelectOption :nickname="item.nickname" :role-name="item.roleName || ''" />
          </ElOption>
        </ElSelect>
      </ElFormItem>
    </ElCol>
    <ElCol :lg="6" :md="12" :sm="12">
      <ElFormItem label="需求来源">
        <ElSelect v-model="model.sourceType" clearable placeholder="筛选需求来源">
          <ElOption v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
    </ElCol>
  </TableSearchPanel>
</template>

<style scoped></style>
