<script setup lang="ts">
import SearchHistory from './components/search-history/index.vue'
import SearchSkeleton from './components/search-skeleton.vue'
import {useSearchStore} from '@/store'
import {appSearchListPost,appRecipeCategoryListGet} from '@/service'

const {t} = useI18n()
const searchStore = useSearchStore()

const keyword = ref('')
function handleSearch() {
  nextTick(() => {
    if (!keyword.value) {
      return uni.showToast({title: t('common.prompt.please-enter-keyword-search'), icon: 'none'})
    }
    searchStore.setHistoryList(keyword.value)
    uni.navigateTo({
      url: `/pages/search/result?keyword=${keyword.value}`,
    })
    keyword.value = ''
  })
}

function handleHotSearch(item: any) {
  nextTick(() => {
    searchStore.setHistoryList(item.categoryName)
    uni.navigateTo({
      url: `/pages/search/result?keyword=${item.categoryName}`,
    })
  })
}

const loading = ref(true)
onMounted(() => {
  loading.value = true
  // 查询热门搜索词列表
  getHotSearchList()
})

const hotSearchList = ref([])
function getHotSearchList() {
  appRecipeCategoryListGet({}).then(res=> {
    console.log('热门搜索词列表', res)
    hotSearchList.value = res.data
  }).finally(() => {
    loading.value = false
  })
}
</script>

<template>
  <view class="">
    <view
        class="animate-in fade-in animate-ease-out animate-duration-300"
        v-show="loading"
    >
      <search-skeleton />
    </view>
    <view
        class="animate-in fade-in animate-ease-in animate-duration-300"
        v-show="!loading"
    >
      <header-search focus class="" v-model="keyword" :placeholder="t('components.search.placeholder')" @search="handleSearch"/>
      <search-history/>
      <view class="pl-30rpx mt-52rpx">
        <view class="text-40rpx lh-40rpx text-#333 font-bold mb-24rpx tracking-[.04em]">
          {{ t('pages.search.hot-title') }}
        </view>
        <template v-for="item in hotSearchList">
          <view  @click="handleHotSearch(item)" class="w-full h-144rpx flex items-center">
            <image :src="item?.categoryImage" class="w-64rpx h-64rpx mr-28rpx rounded-50%" mode="aspectFill"></image>
            <view class="flex-1 border-b-solid border-b-1rpx border-b-#DFDFDF h-full flex items-center text-30rpx text-primary font-500 tracking-[.06em]">
              {{  item?.categoryName }}
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
