<script setup lang="ts">
defineProps({
  query: {
    type: String,
    required: true,
  }
});

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

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

function onSearch(query: string) {
  emits("search", query);
}
</script>

<template>
  <a-input-search
    :value="query"
    placeholder="请输入查询表达式"
    enter-button
    size="large"
    @search="onSearch"
    @change="onQueryChange"
  />
</template>