<template>
  <view class="Mall4j container page-shop-search">
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-box">
        <input
          v-model="prodName"
          style="font-size: 24rpx"
          placeholder="搜索您想要的商品"
          class="sear-input"
          confirm-type="search"
          @confirm="toSearchProdPage"
        >
        <image
          src="@/static/images/search.png"
          class="search-img"
        />
      </view>
      <text
        class="search-hint"
        :data-shopid="shopId"
        @tap="toSearchProdPage"
      >
        搜索
      </text>
    </view>

    <view class="search-display">
      <!-- 热门搜索 -->
      <view
        v-if="hotSearchList.length > 0"
        class="hot-search"
      >
        <view class="title-text">
          热门搜索
        </view>
        <view class="hot-search-tags">
          <block
            v-for="(item, index) in hotSearchList"
            :key="index"
          >
            <text
              class="tags"
              @tap="onHistSearch(item.content)"
            >
              {{ item.title }}
            </text>
          </block>
        </view>
      </view>

      <!-- 搜索历史 -->
      <view
        v-if="shopRecentSearches.length > 0"
        class="history-search"
      >
        <view class="title-text history-line">
          搜索历史
          <view class="clear-history">
            <image
              src="@/package-shop/static/images/clear-his.png"
              @tap="clearSearch"
            />
          </view>
        </view>
        <block
          v-for="(item, index) in shopRecentSearches"
          :key="index"
        >
          <view class="his-search-tags">
            <text
              class="tags"
              @tap="onHistSearch(item)"
            >
              {{ item }}
            </text>
          </view>
        </block>
      </view>
    </view>

    <!-- 空列表或加载全部提示 -->
    <empty-all-tips
      v-if="isLoaded"
      :is-empty="!hotSearchList.length && !shopRecentSearches.length"
    />
  </view>
</template>

<script setup>

const shopId = ref(0)

onLoad((options) => {
  const shopInfo = uni.getStorageSync('cloudShopInfo') || {}
  shopId.value = options.shopId || shopInfo.shopId
  uni.setStorageSync('cloudShopId', shopId.value)
})

onMounted(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: '店铺搜索'
  })

  // 获取搜索历史
  getRecentSearch()
  // 获取热搜
  getHotSearch()
})

const isLoaded = ref(false) // 列表是否加载完毕
const hotSearchList = ref([])
/**
 * 获取热搜列表
 */
const getHotSearch = () => {
  isLoaded.value = false
  http.request({
    url: '/tmerclub_admin/ua/app/hot_search/list',
    method: 'GET',
    data: {
      sort: 1,
      type: 1,
      shopId: shopId.value
    }
  }).then((res) => {
    isLoaded.value = true
    hotSearchList.value = res
  })
}

const shopRecentSearches = ref([])
/**
 * 获取历史搜索
 */
const getRecentSearch = () => {
  shopRecentSearches.value = uni.getStorageSync('cloudShopRecentSearches')
}

const prodName = ref('')
/**
 * 点击搜素历史
 */
const onHistSearch = (item) => {
  prodName.value = item
  toSearchProdPage()
}

/**
 * 搜索
 */
const toSearchProdPage = () => {
  // 判断搜索框是否为空
  if (!prodName.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键字',
      icon: 'none'
    })
    return
  }
  // 记录最近搜索
  let shopRecentSearches = uni.getStorageSync('cloudShopRecentSearches') || []
  shopRecentSearches = shopRecentSearches.filter(item => item !== prodName.value)
  shopRecentSearches.unshift(prodName.value)
  if (shopRecentSearches.length > 10) {
    shopRecentSearches.pop()
  }
  // 将最近搜索保存到本地缓存
  uni.setStorageSync('cloudShopRecentSearches', shopRecentSearches)
  // 跳转到商品列表页
  uni.navigateTo({
    url: '/package-shop/shop-page/shop-prods/shop-prods?shopId=' + shopId.value + '&searchKey=' + encodeURIComponent(prodName.value)
  })
}

/**
 * 清空搜索历史
 */
const clearSearch = () => {
  uni.removeStorageSync('cloudShopRecentSearches')
  getRecentSearch()
}

</script>

<style lang="scss" scoped>
@use "../shop-page";
</style>
<style lang="scss" scoped>
.page-shop-search {
  background-color: #f2f3f7;
  height: calc(100vh - 52.38px);
}
</style>
