<!-- XXX 弃用 -->
<template>
  <div class="search">
    <el-button
      :icon="Search"
      size="small"
      circle
      @click="hanleOpenModal"
    />
    <Teleport to="body">
      <transition
        name="zoom-fade"
        mode="out-in"
      />
      <div
        v-show="visible"
        class="app-search-modal"
        @click="handleClose"
      >
        <div
          class="content"
          @click.stop 
        >
          <div class="search-top">
            <el-input
              v-model="inputSearch"
              size="large"
              placeholder="菜单搜索"
              @input="handleSearch"
            /> 
          </div>
          <div class="search-modal-list">
            <div v-for="item in searchResult" :key="item.icon">
              <div class="list-item" v-for="(item2,index) in item.children" @click="hanleGoPath(item.children,index)">
                <div class="align-center"> 
                  <el-icon class="pr-2">
                    <component class="icons" :is="item.icon" />
                  </el-icon>
                  {{ item.name }} 
                </div> 
                <el-icon class="px-4"><ArrowRight /></el-icon>
                <div class="align-center">
                  <el-icon class="pr-2">
                    <component class="icons" :is="item2.meta.icon" />
                  </el-icon>
                  {{ item2.meta.title }}
                </div>
              </div>
            </div>
          </div>
        </div>   
      </div>
    </Teleport>
  </div>    
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { menuStore } from '@/store/menu'
import RootTitle from './RootTitle.vue';
import { useRouter } from 'vue-router';
// import { useMenuSearch } from '@/hooks/useMenuSearch';

const mstore = menuStore()
const  { push } = useRouter()

// const { handleSearch,inputSearch,searchResult } = useMenuSearch(mstore)
const inputSearch = ref("")
const searchResult = ref<any[]>([])
const  handleSearch = () => {}

const visible = ref<boolean>(false)

// 显示隐藏
const hanleOpenModal = () => {
  visible.value = true
}
const handleClose = () => {
  visible.value = false;
  inputSearch.value = "";
}

// 点击跳转
const hanleGoPath = (children: any,index: number) => {
  push(children[index].path)
  searchResult.value = [];
  handleClose();
}
</script>
<style lang="scss"> 
.search {
  margin-left: 20px;
}
.pr-2 {
  padding-right: 2px;
}
.px-4 {
  padding: 0px 4px;
}
.align-center {
  display: flex;
  align-items: center;
}
.app-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 50px;
    background-color: #00000040;
    justify-content: center;

    .content {
        position: relative;
        width: 632px;
        margin: 0 auto auto;
        background-color: #fff;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px #00000040;

        .search-top {
          padding: 14px 14px 0;
        }

        .search-modal-list {
          max-height: 472px;
          padding: 0 14px 20px;
          margin: 14px auto 0;
          overflow: auto;
          .list-item {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 46px;
            padding-bottom: 4px;
            padding-left: 14px;
            margin-top: 8px;
            font-size: 14px;
            color: #000000d9;
            cursor: pointer;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px #d4d9e1;
            box-sizing: border-box;

            &:hover {
              color: #fff;
              background-color: #0960bd;
            }
          }
        }
    }
}

// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
}

.zoom-out-enter-from,
.zoom-out-leave-to {
  opacity: 0;
  transform: scale(0);
}

// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}

.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}

.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.06);
}

</style>