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

defineOptions({ name: 'FeedbackSearch' });

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

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

// 提交人下拉选项（全员简表；value 使用用户 id，ID 铁律 string）
const userOptions = ref<{ label: string; value: string }[]>([]);

// 分类保留在左侧分面；搜索区补充标题关键词、提交人、状态
const fields = computed<SearchField[]>(() => [
  { key: 'title', label: '标题', type: 'input', placeholder: '请输入标题关键词' },
  {
    key: 'creator',
    label: '提交人',
    type: 'select',
    placeholder: '请选择提交人',
    filterable: true,
    options: userOptions.value
  },
  {
    key: 'status',
    label: '状态',
    type: 'dict',
    dictCode: FEEDBACK_STATUS_DICT_CODE,
    placeholder: '请选择状态',
    resolveValue: value => (value === null || value === undefined || value === '' ? undefined : String(value)),
    transformValue: value => (value === null || value === undefined || value === '' ? undefined : String(value))
  }
]);

async function loadUserOptions() {
  const { data, error } = await fetchGetUserSimpleList();
  if (!error && data) {
    userOptions.value = data.map(item => ({ label: item.nickname, value: item.id }));
  }
}

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

function search() {
  // 输入期不实时 trim，避免受控 input 吃掉词间空格；提交前规整一次，空串归一为 undefined
  model.value.title = model.value.title?.trim() || undefined;
  emit('search');
}

onMounted(loadUserOptions);
</script>

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

<style scoped></style>
