<script setup>
import { ref } from "vue";
import BaseInput from "@/components/common/BaseInput.vue";
import DateInput from "@/components/common/DateInput.vue";
import { useRoute, useRouter } from "vue-router";


let route = useRoute()
let router = useRouter()
let commonSearchInput = ref("")
let advancedSearchOn = ref(false)
let dateRangeFrom = ref(null)
let dateRangeTo = ref(null)


// Окна расширенного поиска
const typesOfSearch = [
  {image: "Поиск фотодокументов"},
  {audio: "Поиск фонодокументов"},
  {video: "Поиск киновидеодокументов"}
]
let currentSearchWindow = ref("image")

const image_fields = {
  annotation: { param: 'annotation__icontains'},
  keywords: { param: 'keywords__icontains'},
  persons: { param: 'persons__icontains'},
  creation_place: { param: 'creation_place__icontains'},
  author: { param: 'author__icontains'}
}

const imageFormData = ref(
  Object.keys(image_fields).reduce((acc, field) => {
    acc[field] = "";
    return acc;
  },{})
)

function stringToDate(dateString) {
  if (dateString) {
    const [day, month, year] = dateString.split('.')
    return new Date(year, month - 1, day)
  }
}

  const formatDate = (date) => {
    if (!date || !(date instanceof Date)) return null;
    return `${ date.getFullYear() }-${ String(date.getMonth() + 1).padStart(2, '0') }-${ String(date.getDate()).padStart(2, '0') }`
  }



const handleSubmit = () => {
  const min_input_length = 3

  const query = {
    page: 1,
    page_size: 5,
    material_type: currentSearchWindow.value
  };

  if (commonSearchInput.value.length >= min_input_length) {
    query.common_search_query = commonSearchInput.value
  }

  if (advancedSearchOn.value) {
    query.is_advanced_search = true

    Object.entries(image_fields).forEach(([field, { param }]) => {
      if (imageFormData.value[field] && imageFormData.value[field].length >= min_input_length) {
        query[param] = imageFormData.value[field];
      }
    })

    if (dateRangeFrom.value) {
      const fromDate = stringToDate(dateRangeFrom.value)
      if (fromDate) {
        query.creation_date__gte = formatDate(fromDate)
      }
    }

    if (dateRangeTo.value) {
      const toDate = stringToDate(dateRangeTo.value)
      if (toDate) {
        query.creation_date__lte = formatDate(toDate)
      }
    }

  }

  if (Object.keys(query).length > 3 || (advancedSearchOn.value && (dateRangeFrom.value || dateRangeTo.value))) {
    router.push({
      name: "search",
      query
    })
  }
}


</script>

<template>
  <div class="home">
    <div id="datepicker-container"/>
    <div class="wrapper wrapper__indent">
      <div class="search-box">
        <base-input @keyup.enter="handleSubmit" v-model="commonSearchInput" :value="route.query.common_search_query || ''" style="width: 400px; padding: 24px;" placeholder="Я ищу"/>
        <v-btn @click="handleSubmit" variant="outlined" class="search-button">
          <v-icon size="28" class="search-icon" color="primary">mdi-magnify</v-icon>
        </v-btn>
      </div>
      <div class="search-switch">
        <v-switch v-model="advancedSearchOn" label="Расширенный поиск" color="primary-blue"/>
      </div>
      <div v-if="advancedSearchOn" class="advanced-search-box">
        <v-window v-model="currentSearchWindow" show-arrows :continuous="true" style="width: 1000px;">
          <template v-slot:prev="{ props }">
            <button @click="props.onClick" class="arrow-button prev-arrow">
              <v-icon size="36" color="primary">mdi-chevron-left</v-icon>
            </button>
          </template>
          <template v-slot:next="{ props }">
            <button @click="props.onClick" class="arrow-button next-arrow">
              <v-icon size="36" color="primary">mdi-chevron-right</v-icon>
            </button>
          </template>
          <v-window-item v-for="(item, index) in typesOfSearch" :key="Object.keys(item)[0]" :value="Object.keys(item)[0]">
            <v-card class="d-flex justify-center">
              <div class="search-window">
                <p class="d-block ml-10 mt-2 fs-18 fw-regular color-primary-blue">{{ Object.values(item)[0] }}</p>
                <div class="pl-10 pr-10 pt-3">
                  <v-divider/>
                </div>
                <template v-if="currentSearchWindow === 'image'">
                  <div class="d-flex justify-space-between mt-5">
                    <base-input class="base-input-size ml-10" placeholder="Аннотация" v-model="imageFormData.annotation" :value="route.query.annotation__icontains || ''" />
                    <base-input class="base-input-size mr-10" placeholder="Ключевые слова" v-model="imageFormData.keywords" :value="route.query.keywords__icontains || ''" />
                  </div>
                  <div class="d-flex justify-space-between mt-5 pl-10 pr-10" style="height: 30px;">
                    <div class="d-flex justify-spaаce-between">
                      <date-input placeholder="Дата от" teleport="#datepicker-container" v-model="dateRangeFrom" :value="route.query.creation_date__gte ? route.query.creation_date__gte.split('-').reverse().join('.') : null" style="width: 155px; margin-right: 13px" />
                      <date-input placeholder="Дата до" teleport="#datepicker-container" :min-date="stringToDate(dateRangeFrom)" v-model="dateRangeTo" :value="route.query.creation_date__lte ? route.query.creation_date__lte.split('-').reverse().join('.') : null" style="width: 155px; margin-left: 13px" />
                    </div>
                    <base-input class="base-input-size" placeholder="Место съемки" v-model="imageFormData.creation_place" :value="route.query.creation_place__icontains || ''" />
                  </div>
                  <div class="d-flex justify-space-between mt-5" style="height: 30px;">
                    <base-input class="base-input-size ml-10" placeholder="Персоналии" v-model="imageFormData.persons" :value="route.query.persons__icontains || ''" />
                    <base-input class="base-input-size mr-10" placeholder="Автор съемки" v-model="imageFormData.author" :value="route.query.author__icontains || ''" />
                  </div>
                </template>
                <template v-else>
                  <div class="d-flex justify-space-between mt-5">
                    <base-input class="base-input-size ml-10" placeholder="Название" />
                    <base-input class="base-input-size mr-10" placeholder="Описание" />
                  </div>
                  <div class="d-flex justify-space-between mt-5 pl-10 pr-10" style="height: 30px;">
                    <div class="d-flex justify-space-between">
                      <date-input placeholder="Дата от" teleport="#datepicker-container" :value="stringToDate(dateRangeFrom)" style="width: 155px; margin-right: 13px" />
                      <date-input placeholder="Дата до" teleport="#datepicker-container" :value="stringToDate(dateRangeTo)" style="width: 155px; margin-left: 13px" />
                    </div>
                    <base-input class="base-input-size" placeholder="Архивный номер" />
                  </div>
                  <div class="d-flex justify-space-between mt-5" style="height: 30px;">
                    <base-input class="base-input-size ml-10" placeholder="Авторы" />
                    <base-input class="base-input-size mr-10" placeholder="Персоналии" />
                  </div>
                </template>
              </div>
            </v-card>
          </v-window-item>
        </v-window>
      </div>
      <router-view :key="route.fullPath" />
    </div>
  </div>
</template>

<style lang="scss" scoped>

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-icon {
  height: 60px;
  width: 60px;
  border-radius: 8px;
}

.search-button {
  height: 60px;
  width: 60px;
  border: solid 1px darkgray;
  margin-left: 10px;
}

.search-switch {
  display: flex;
  justify-content: left;
  margin-left: 310px;
}

.advanced-search-box {
  display: flex;
  justify-content: center;
}

.search-window {
  width: 800px;
  height: 250px;
  padding: 15px;
}

.base-input-size {
  width: 340px!important;
  height: 20px!important;
  padding: 15px;
}

v-window-item {
  border: none;
  box-shadow: none;
}
v-window {
  overflow: hidden;
  border: none;
}

.arrow-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border: none;
  background: transparent;
}

.arrow-button.prev-arrow {
  left: 10px;
}

.arrow-button.next-arrow {
  right: 10px;
}

.advanced-search-box:hover .arrow-button {
  opacity: 1;
}

.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  justify-content: left;
}

.item-label {
  display: block;
  font-size: 12px;
}


</style>M
make filtering logic more similar to <script setup> import { ref, onMounted, watch } from "vue"; import BaseInput from "@/components/common/BaseInput.vue"; import DateInput from "@/components/common/DateInput.vue"; import { useRoute, useRouter } from "vue-router"; const route = useRoute() const router = useRouter() let commonSearchInput = ref(route.query.common_search_query) let advancedSearchOn = ref(route.query.is_advanced_search === "true") let currentSearchWindow = ref(route.query.material_type || 'image') let dateRangeFrom = ref(route.query.creation_dategte?.split("-").reverse().join(".")) let dateRangeTo = ref(route.query.creation_datelte?.split("-").reverse().join(".")) let formData = ref({ annotation: route.query.annotationicontains, keywords: route.query.keywordsicontains, persons: route.query.personsicontains, creation_place: route.query.creation_placeicontains, author: route.query.authoricontains }) const typesOfSearch = [ {image: "Поиск фотодокументов"}, {audio: "Поиск фонодокументов"}, {video: "Поиск киновидеодокументов"} ] function stringToDate(dateString) { if (!dateString) return null; const [day, month, year] = dateString.split("."); return ${year}-${month}-${day}; } const handleSubmit = () => { const minInputLength = 3 const query = { page: 1, page_size: 5, material_type: currentSearchWindow.value, }; if (commonSearchInput.value) { query.common_search_query = commonSearchInput.value; } Object.entries(formData.value).forEach(([field, value]) => { if (value?.length >= minInputLength) { query[${field}icontains] = value } }) const dateFrom = stringToDate(dateRangeFrom.value); const dateTo = stringToDate(dateRangeTo.value); if (dateFrom) { query.creation_dategte = dateFrom; } if (dateTo) { query.creation_datelte = dateTo; } router.push({ name: "search", query }); }; function scrollToOneThirdHeight() { const height = window.innerHeight; window.scrollTo({ top: height / 2, behavior: 'smooth', }); } watch([advancedSearchOn, currentSearchWindow], ([newVal]) => { if (newVal) { scrollToOneThirdHeight(); } }); onMounted(() => { advancedSearchOn.value = route.query.material_type && route.query.material_type }); </script> but in context of my code. write whole modified corrected code