<template>
  <Transition name="slide-fade">
    <div
      v-show="isSearchSearch"
    >
      <el-select
        ref="inputSearchRef"
        v-model="inputSearch"
        class="input-search"
        filterable
        remote
        :remote-method="handleSearch"
        placeholder="搜索"
        @mouseenter="onMouseenter"
        @mouseleave="onMouseLeave"
      >
        <el-option
          v-for="item in searchResult"
          :key="item.meta.title"
          :label="item.meta.title"
          :value="item.path"
          @mouseenter="onMouseenter"
          @mouseleave="onMouseLeave"
          @keyup.enter="goView(item.path)"
          @click="goView(item.path)"
        />
      </el-select>
    </div>
  </Transition>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    /**
     * 搜索菜单
     */
    import { useMenuSearch } from '@/hooks/useMenuSearch';
    import { menuStore } from '@/store/menu'
    import { useRouter } from 'vue-router';
    import { useOpenShowSearch } from '@/hooks/useOpenShowSearch';
    
    const inputSearchRef = ref()
    const store = menuStore()
    const { handleSearch,goView,onMouseenter,onMouseLeave,inputSearch,searchResult } = useMenuSearch(store,useRouter,inputSearchRef)
    const { isSearchSearch } = useOpenShowSearch()
</script>

<style lang="scss" scoped>

.input-search {
  width: 100%;
}
.el-select-dropdown__item.hover, 
.el-select-dropdown__item:hover {
    background-color: #0960bd;
    color: #fff;

}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>