<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 15:09:34
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="menu-search-wrap" :class="isCollapse ? '!my-[12px]' : ''">
    <div
      v-show="isCollapse"
      class="w-[32px] h-[32px] flex justify-center items-center bg-gray-1 rounded-[4px] cursor-pointer"
    >
      <t-tooltip placement="right" theme="light" overlay-class-name="custom-tooltip">
        <template #content>
          <div class="p-[16px]">
            <t-auto-complete
              ref="menuInputRef"
              style="width: 240px"
              v-model="searchMenu"
              :options="options"
              highlight-keyword
              :filterable="false"
              placeholder="请输入关键词搜索"
              clearable
              @change="onChange"
              :on-select="handleClickMenu"
            />
          </div>
        </template>
        <template #default>
          <t-icon name="search" size="16" />
        </template>
      </t-tooltip>
    </div>

    <!-- <t-tooltip placement="top" theme="light" overlay-class-name="custom-tooltip"> </t-tooltip> -->

    <t-auto-complete
      ref="menuInputRef"
      v-show="!isCollapse"
      v-model="searchMenu"
      :options="options"
      highlight-keyword
      :filterable="false"
      placeholder="请输入关键词搜索"
      clearable
      @change="onChange"
      :on-select="handleClickMenu"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@/stores/modules/global'
import { useAuthStore } from '@/stores/modules/auth'

const router = useRouter()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const isCollapse = computed(() => globalStore.isCollapse)

const searchMenu = ref('')
const menuInputRef = ref()
const options = ref()

const menuList = computed(() => authStore.flatMenuListGet.filter((v: { menuLevel: number }) => v.menuLevel !== 1))
const onChange = (val: string) => {
  options.value = menuList.value
    .filter((v: { menuName: string }) => v.menuName.includes(val))
    .map(v => ({ label: v.menuName, ...v }))
}
const handleClickMenu = (label: string) => {
  searchMenu.value = ''
  const menu = options.value.find((v: { label: string }) => v.label === label)
  if (menu.meta?.isLink) {
    window.open(menu.meta.isLink, '_blank')
  } else {
    nextTick(() => {
      setTimeout(() => {
        menuInputRef.value.blur()
      })
    })
    router.push({
      name: menu.menuSign
    })
  }
}

// function handleCollapse() {
//   globalStore.setGlobalState('isCollapse', !globalStore.isCollapse)
// }
</script>

<style lang="less" scoped>
.menu-search-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 8px 0;

  :deep(.t-input) {
    background-color: var(--td-gray-color-1);
    border: none;
  }

  :deep(.t-input--focused) {
    box-shadow: none;
  }

  :deep(.t-input.t-input--prefix.t-input--suffix) {
    padding: 0 4px 0 14px;

    .t-input__inner::placeholder {
      font-size: 14px;
      color: var(--font-gray-4);
    }
  }

  :deep(.t-icon) {
    color: var(--td-font-gray-6);
  }
}
</style>
