<template>
  <div class="nav-action-item" @click="showSearchModal">
    <svg-icon icon-class="search" />
    <el-dialog
      v-model="visible"
      width="30%"
      :append-to-body="true"
      :show-close="false"
      @close="hideSearchModal"
    >
      <template #header>
        <el-input
          ref="menuSearchInput"
          v-model="searchKey"
          size="large"
          placeholder="搜索"
          clearable
          @keyup.enter="inputSearch"
          @input="inputSearch"
        >
          <template #prepend>
            <el-button icon="Search" />
          </template>
        </el-input>
      </template>
      <div class="search-content">
        <ul v-if="searchResult.length > 0">
          <li
            v-for="(item, index) in searchResult"
            :key="index"
            @click="toMenu(item)"
          >
            <el-icon
              v-if="item.icon && item.icon.startsWith('el-icon')"
              class="sub-el-icon"
            >
              <component :is="item.icon.replace('el-icon-', '')" />
            </el-icon>
            <svg-icon v-else-if="item.icon" :icon-class="item.icon" />
            <svg-icon v-else icon-class="menu" />
            {{ item.title }}
          </li>
        </ul>
        <div class="search-space" v-else>暂无数据</div>
      </div>
      <template #footer></template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import router from "@/router";

const visible = ref(false);
const searchKey = ref("");
import { usePermissionStore } from "@/store";
import { isExternal } from "@/utils";
import { RouteRecordRaw } from "vue-router";
const permissionStore = usePermissionStore();
//获取当前拥有的路由
const menuSearchInput = ref();
const noSearchRoutePath = ref(["/redirect", "/login", "/401", "/404"]);
const searchData = ref<SearchItem[]>([]);

const searchResult = ref<SearchItem[]>([]);
function showSearchModal() {
  searchKey.value = "";
  searchResult.value = [];
  visible.value = true;
  setTimeout(() => {
    menuSearchInput.value.focus();
  }, 100);
}
function hideSearchModal() {
  visible.value = false;
}

function inputSearch() {
  searchResult.value = [];

  if (searchKey.value) {
    let toLowerCaseKey = searchKey.value.toLowerCase();
    searchResult.value = searchData.value.filter((item) =>
      item.toLowerCaseTitle.includes(toLowerCaseKey)
    );
  }
}

onMounted(() => {
  searchResult.value = [];
  initSearchData(permissionStore.routes);
});

function initSearchData(routes: RouteRecordRaw[], parentPath: string = "") {
  parentPath = parentPath === "/" ? "" : parentPath;
  routes.forEach((item: any) => {
    if (noSearchRoutePath.value.includes(item.path)) {
      return;
    }
    let path = item.path.startsWith("/")
      ? item.path
      : parentPath + "/" + item.path;
    path = isExternal(item.path) ? item.path : path;
    if (item.children) {
      initSearchData(item.children, path);
    } else if (item.meta && item.meta.title && item.path) {
      let title = item.meta.title == "dashboard" ? "首页" : item.meta.title;
      let toLowerCaseTitle = title.toLowerCase();
      searchData.value.push({
        title: title,
        toLowerCaseTitle: toLowerCaseTitle,
        path: path,
        name: item.name,
        icon: item.meta.icon,
        redirect: item.redirect ? item.redirect : undefined,
      });
    }
  });
}

function toMenu(item: SearchItem) {
  hideSearchModal();
  if (isExternal(item.path)) {
    window.open(item.path, "_blank");
  } else {
    router.push(item.path);
  }
}

interface SearchItem {
  title: string;
  toLowerCaseTitle: string;
  path: string;
  name: string;
  icon?: string;
  redirect?: string;
}
</script>

<style scoped>
.search-content ul li {
  padding-left: 10px;
  line-height: 40px;
  text-align: left;

  &:hover {
    background-color: #f5f5f5;
  }
}

.search-space {
  padding: 20px;
  color: #999;
  text-align: center;
}
</style>
