<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
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
  }
]);

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>
