<template>
  <view class="Mall4j page-search-page">
    <!-- 搜索栏 -->
    <view class="search-top">
      <view
        class="switch-type"
        @tap="onSwitchSearchType"
      >
        <text>{{ currentType===1 ? '商品' : '店铺' }}</text>
        <image src="/static/images/switch.png" />
      </view>
      <view class="search-box">
        <view class="icon">
          <image src="/static/images/search.png" />
        </view>
        <input
          v-model="searchKeyword"
          placeholder="输入商品名或店铺名"
          class="input"
          @confirm="onToSearchListPage"
        >
      </view>
      <view
        class="search-cancel"
        @tap="onBackPreviousPage"
      >
        取消
      </view>
    </view>

    <!-- 搜索历史 -->
    <view
      v-if="showSearchHistoryList.length > 0"
      class="search-con"
    >
      <view class="search-tit">
        <view class="text">
          搜索历史
        </view>
        <view
          class="del"
          @tap="onClearSearchHistory"
        >
          <image src="/static/images/del.png" />
        </view>
      </view>
      <view class="search-history">
        <block
          v-for="(item, index) in showSearchHistoryList"
          :key="index"
        >
          <view
            class="item"
            @tap="onClickKeywordSearch(item)"
          >
            {{ item }}
          </view>
        </block>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view
      v-if="showHotSearchList.length > 0"
      class="search-con"
    >
      <view class="search-tit">
        <view class="text">
          热门搜索
          <view class="hot-icon">
            <image src="/static/images/search-hot.png" />
          </view>
        </view>
      </view>
      <view class="search-hot">
        <block
          v-for="(item, index) in showHotSearchList"
          :key="index"
        >
          <view
            class="item"
            @tap="onClickKeywordSearch(item.content)"
          >
            {{ item.title }}
          </view>
        </block>
      </view>
    </view>
    <!-- 为空 -->
    <empty-all-tips
      v-if="isLoaded"
      :is-empty="!showHotSearchList.length && !showSearchHistoryList.length"
    />
  </view>
</template>

<script setup>

const currentType = ref(1) // 1:商品 2:店铺
// 生命周期函数--监听页面加载
onLoad((options) => {
  currentType.value = options.type ? Number(options.type) : 1
  let keyword = ''
  // #ifndef MP-WEIXIN
  keyword = options.keyword ? options.keyword : ''
  // #endif
  // #ifdef MP-WEIXIN
  keyword = options.keyword ? decodeURIComponent(decodeURIComponent(options.keyword)) : ''
  // #endif
  // #ifdef APP-PLUS
  keyword = options.keyword ? decodeURIComponent(options.keyword) : ''
  // #endif
  searchKeyword.value = keyword // 获取页面传递的关键词
  onGetHotSearchList(1) // 获取商品热搜列表
  onGetHotSearchList(2) // 获取店铺热搜列表
  onGetSearchHistoryList() // 获取搜索历史列表
})

const prodSearchHistoryList = ref([]) // 商品搜索历史列表
const prodHotSearchList = ref([]) // 商品热搜列表
const shopSearchHistoryList = ref([]) // 店铺搜索历史列表
const shopHotSearchList = ref([]) // 店铺热搜列表
const showHotSearchList = ref([]) // 用来展示的热搜列表
const showSearchHistoryList = ref([]) // 用来展示的搜索历史列表
watch(() => currentType.value,
  (val) => {
    if (val === 1) {
      showHotSearchList.value = prodHotSearchList.value
      showSearchHistoryList.value = prodSearchHistoryList.value
    } else {
      showHotSearchList.value = shopHotSearchList.value
      showSearchHistoryList.value = shopSearchHistoryList.value
    }
  }
)

/**
 * 获取热搜列表
 * @param {Number} type 1:商品 2:店铺
 */
const isLoaded = ref(false) // 列表是否加载完毕
const searchKeyword = ref('') // 关键词
const onGetHotSearchList = (type) => {
  isLoaded.value = false
  const params = {
    url: '/tmerclub_admin/ua/app/hot_search/list',
    method: 'GET',
    data: {
      shopId: 0,
      type
    }
  }
  http.request(params).then(res => {
    isLoaded.value = true
    if (type === 1) {
      prodHotSearchList.value = res
    } else {
      shopHotSearchList.value = res
    }
    showHotSearchList.value = currentType.value === 1 ? prodHotSearchList.value : shopHotSearchList.value
  })
}

// 获取搜索历史
const onGetSearchHistoryList = () => {
  prodSearchHistoryList.value = uni.getStorageSync('cloudProdSearchHistory')
  shopSearchHistoryList.value = uni.getStorageSync('cloudShopSearchHistory')
  if (currentType.value === 1) {
    showSearchHistoryList.value = prodSearchHistoryList.value
  } else {
    showSearchHistoryList.value = shopSearchHistoryList.value
  }
}

// 搜索店铺/商品(跳转到搜索列表页)
const onToSearchListPage = () => {
  // 判断搜索框是否为空
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入关键字',
      icon: 'none'
    })
    return
  }
  let searchHistoryList = currentType.value === 1 ? uni.getStorageSync('cloudProdSearchHistory') : uni.getStorageSync('cloudShopSearchHistory')
  searchHistoryList = !searchHistoryList ? [] : searchHistoryList
  // 过滤掉重复的搜索关键词
  searchHistoryList = searchHistoryList.filter(item => item !== searchKeyword.value)
  searchHistoryList.unshift(searchKeyword.value)
  if (searchHistoryList.length > 10) {
    searchHistoryList.pop()
  }
  // 将搜索内容放到缓存中
  if (currentType.value === 1) {
    uni.setStorageSync('cloudProdSearchHistory', searchHistoryList)
  } else {
    uni.setStorageSync('cloudShopSearchHistory', searchHistoryList)
  }

  // 跳转到搜索列表页
  uni.redirectTo({
    url: `/pages/search-list/search-list?keyword=${encodeURIComponent(searchKeyword.value)}&type=${currentType.value}`
  })
}

// 切换搜索类型(0:商品 || 1:店铺)
const onSwitchSearchType = () => {
  currentType.value = currentType.value === 1 ? 2 : 1
}

// 清空搜索历史
const onClearSearchHistory = () => {
  if (currentType.value === 1) {
    uni.removeStorageSync('cloudProdSearchHistory')
  } else {
    uni.removeStorageSync('cloudShopSearchHistory')
  }
  onGetSearchHistoryList()
}

// 点击历史搜索/热门搜索关键词跳转到搜索列表页
const onClickKeywordSearch = (keyword) => {
  searchKeyword.value = keyword
  onToSearchListPage()
}

// 返回上一页
const onBackPreviousPage = () => {
  // #ifndef H5
  uni.navigateBack()
  // #endif

  // #ifdef H5
  history.back()
  // #endif
}

</script>

<style lang="sass" scoped>
@use './search-page.scss'
</style>
