<script setup lang="ts">
import { ref } from "vue";

const keyword = ref('');

const emits = defineEmits<{
  (e: "search", keyword: string[]): void;
  (e: "searchWithIn", keyword: string[]): void;
}>();

function getKeywords(keyword: string) {
  return keyword.split(' ').filter((item) => item.trim() != "")
}

function onSearch() {
  emits("search", getKeywords(keyword.value));
}

function onSearchWithIn() {
  emits("searchWithIn", getKeywords(keyword.value));
}
</script>

<template>
  <a-row type="flex" :gutter="8">
    <a-col flex="1">
      <a-input v-model:value="keyword" placeholder="请输入查询词进行检索，使用空格区分多个查询词" />
    </a-col>
    <a-col>
      <a-space>
        <a-button type="primary" @click="onSearch">重新检索</a-button>
        <a-button @click="onSearchWithIn">在结果中检索</a-button>
      </a-space>
    </a-col>
  </a-row>
</template>