<script setup>
import { NInput, NIcon } from "naive-ui";
import pubsub from "pubsub-js";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getHotDetail, searchSuggest } from "@/network/search.js";
import { ref } from "vue";
import SvgSearchOutline from "@/assets/svgs/SearchOutline.svg";

const store = useStore();
const router = useRouter();

const keywords = ref("");
const elSearch = ref(null);

const search = async () => {
  if (keywords.value.trim().length > 0){
    pubsub.publish("zp.toggleSearch");
    // elSearch.value.blur()
    store.commit('addSearchHistory', keywords.value)
    await router.push(`/search/${keywords.value}`);
    pubsub.publish('zp.search', keywords.value);
  }
};

const handleInput = () => {
  pubsub.publish('zp.showSearch');
  pubsub.publish("zp.searchInput", keywords.value);
};


const result = ref({});
</script>
<template>
  <div id="search">
    <n-input
      ref="elSearch"
      size="small"
      round
      placeholder="请搜索..."
      clearable
      @activate="
        () => {
          pubsub.publish('zp.showSearch');
        }
      "
      v-model:value="keywords"
      @keydown.enter="search"
      @keyup.esc="pubsub.publish('zp.hideSearch');"
      @input="handleInput"
      style="width: 120px"
    >
      <template #prefix>
        <n-icon>
          <SvgSearchOutline />
        </n-icon>
      </template>
    </n-input>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
