<!-- components/SearchInput.vue -->
<script setup>
import { CloseCircle } from "@vicons/ionicons5";
import { Camera, Search } from "lucide-vue-next";
import { computed } from 'vue';
import { useRoute } from "vue-router";
const modalStore = useModalStore();

const route = useRoute();
// const currentPath = route.path;
const searchType = ref({
  "/picture-square": "image",
  "/work-square": "workFlow",
});
// const props = defineProps({
//   modelValue: {
//     type: String,
//     default: "",
//   },
// });
// const emit = defineEmits(["update:modelValue", "initSearch"]);
const keyword = ref("");
if (modalStore.searchQuery) {
  keyword.value = modalStore.searchQuery;
}
function handleSearch() {
  if (keyword.value) {
    modalStore.updateSearchQuery(keyword.value);
    if (route.path !== "/search") {
      const baseUrl = window.location.origin;
      const type = searchType.value[route.path]
      debugger
      window.open(
        `${baseUrl}/search?keyword=${keyword.value}&type=${type}`,
        "_blank",
        "noopener,noreferrer"
      );
      // router.push({
      //   path: `/search`,
      //   query: {
      //     keyword: props.modelValue,
      //     type:searchType[currentPath]
      //   },
      // });
    } else {
      // modalStore.updateSearchQuery(keyword.value);
      // this.$store.dispatch('updateSearchQuery', props.modelValue)
    }
  }
}
function clearInput() {
  keyword.value = ''
  modalStore.searchQuery = ''
  // modalStore.updateSearchQuery('')
  // emit("update:modelValue", "");
}

const searchQuery = computed(() => modalStore.searchQuery);
watch(searchQuery, (newValue) => {
  keyword.value = newValue
});
</script>

<template>
  <!-- // @input="$emit('update:modelValue', $event.target.value)" -->
  <!-- :value="modalStore.searchQuery" -->

  <div class="relative flex items-center bg-[#f1f2f7] rounded-md px-2 py-2">
    <input
      type="text"
      v-model="keyword"
      placeholder="搜索模型/图片/创作者寻找灵感"
      class="w-[280px] h-4 bg-[#f1f2f7] rounded-md border-0 outline-none text-gray-800 text-[12px] placeholder:text-gray-400"
      @keyup.enter="handleSearch"
    />
    <div class="flex items-center w-5 mr-2">
      <n-icon v-if="keyword" size="20" color="#ccc" class="cursor-pointer" @click="clearInput">
        <CloseCircle />
      </n-icon>
    </div>

    <Camera class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" />
    <Search class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" @click="handleSearch" />
  </div>
</template>

<style scoped></style>
