<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import { ref, type PropType } from "vue";

export type FieldType = 'title' | 'companyName' | 'keyword' | 'reportName';

const props = defineProps({
  field: {
    type: String as PropType<FieldType>,
    required: true,
  },
  keyword: {
    type: String,
    required: true,
  }
});

const fieldOptions = ref<SelectProps['options']>([
  { value: 'title', label: '按报告类型' },
  { value: 'companyName', label: '按企业名称' },
  { value: 'reportName', label: '按项目名称' },
  { value: 'keyword', label: '按关键词' },
]);

const emits = defineEmits<{
  (e: "update:field", field: string): void;
  (e: "update:keyword", keyword: string): void;
  (e: "search", data: { field: string, keyword: string }): void;
}>();

function onFieldChange(value: string) {
  emits("update:field", value);
}

function onKeywordChange(e: InputEvent) {
  const value = (e.target as HTMLInputElement).value
  emits("update:keyword", value);
}

function onSearch() {
  emits("search", { field: props.field, keyword: props.keyword })
}
</script>

<template>
  <a-row type="flex">
    <a-col>
      <a-select
        ref="select"
        :value="field"
        style="width: 140px"
        :options="fieldOptions"
        @change="onFieldChange"
        size="large"
      ></a-select>
    </a-col>
    <a-col flex="1">
      <a-input-search
        :value="keyword"
        placeholder="请输入关键词进行查询"
        enter-button
        size="large"
        @change="onKeywordChange"
        @search="onSearch"
      />
    </a-col>
  </a-row>
</template>
