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

const props = defineProps({
  keyword: {
    type: String,
    required: true,
  },
  field: {
    type: String,
    required: true,
  },
  placeholder: {
    type: String,
    required: true,
  }
});

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

// 搜索框字段选择项列表
const fieldOptions = ref<SelectProps['options']>([
  { value: 'TP', label: '主题', },
  { value: 'TI', label: '标题', },
  { value: 'AU', label: '作者', },
  { value: 'KW', label: '关键词', },
  { value: 'AB', label: '摘要' },
  { value: 'UN', label: '机构' },
]);

function onSearch() {
  const kwd = props.keyword.trim();
  if (kwd.length == 0) {
    message.warning("请输入查询关键词");
    return;
  }
  emits("search", props.field, props.keyword);
}

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

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


</script>

<template>
  <a-row type="flex">
    <a-col>
      <a-select
        ref="select"
        :value="field"
        style="width: 120px"
        :options="fieldOptions"
        @change="onFieldChange"
        size="large"
      ></a-select>
    </a-col>
    <a-col flex="1">
      <a-input-search
        :value="keyword"
        :placeholder="placeholder"
        enter-button
        size="large"
        @change="onKeywordChange"
        @search="onSearch"
      />
    </a-col>
  </a-row>
</template>
