jxlcpy_base_daoshi_vue_ts/src/composables/useSearchShop.ts

import { computed, shallowRef, watch } from 'vue'
import { useStore } from '@/store/root'
import type { Ref, ShallowRef } from 'vue'
/**
 *`
 *
 * @param {*} watchName
 * @param {Ref<UnwrapRef<number>>} [searchType=0] 0:键盘搜索 1:手写搜索
 * @return {*} [searchShopListRef]
 */
export const useSearchShop = (watchName: Ref<string>, searchType: Ref<0 | 1>): { searchShopListRef: ShallowRef<Shop[]> } => {
  const store = useStore()
  const searchShopListRef = shallowRef<Shop[]>([])
  const cacheFirstSearchListRef = shallowRef<Shop[]>([]) //缓存第一次检索首字母后的列表结果
  const shopListRef = computed(() => store.shopList)

  watch(watchName, val => {
    if (val.length) {
      if (searchType.value === 0) {
        let _shopList: Shop[] = []
        if (val.length === 1) {
          //缓存第一次搜索结果
          cacheFirstSearchListRef.value = shopListRef.value.filter(
            item =>
              item.initials?.toUpperCase()?.startsWith(val) ||
              item.shopNameEn?.toUpperCase()?.startsWith(val) ||
              item.shopName?.toUpperCase()?.startsWith(val)
          )
        } else {
          const searchName = val.slice(1)
          _shopList = cacheFirstSearchListRef.value.filter(
            item =>
              item.initials?.toUpperCase()?.includes(searchName) ||
              item.shopNameEn?.toUpperCase()?.includes(searchName) ||
              item.shopName?.toUpperCase()?.includes(searchName)
          )
        }
        searchShopListRef.value = val.length === 1 ? cacheFirstSearchListRef.value : _shopList
      } else {
        searchShopListRef.value = val.length ? shopListRef.value.filter(item => item.shopName.includes(val)) : []
      }
    } else {
      searchShopListRef.value = []
      cacheFirstSearchListRef.value = []
    }
  })
  return { searchShopListRef }
}