<template>
  <view class="pt-52rpx pl-30rpx bg-#fff" v-if="searchStore.historyList?.length">
    <view class="text-40rpx lh-40rpx text-#333 font-bold mb-24rpx tracking-[.04em]">{{ t('pages.search.recently') }}</view>
    <view class="">
      <template v-for="(item, index) in searchStore.historyList" :key="index">
        <wd-swipe-action>
          <view @click="handleSearch(item,index)" class="w-full h-110rpx flex items-center">
            <image src="@img/chef/130.png" class="w-28rpx h-28rpx mr-44rpx"></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] line-clamp-1">{{ item.text }}</view>
          </view>
          <template #right>
            <view @click="handleRemove(index)" class="w-110rpx h-110rpx bg-#FF4848 center">
              <image src="@img/chef/129.png" class="w-44rpx h-50rpx"></image>
            </view>
          </template>
        </wd-swipe-action>
      </template>
    </view>
  </view>
  <wd-message-box/>
</template>

<script lang="ts" setup>
import {useSearchStore} from "@/store";
import {useMessage,} from "wot-design-uni";

const {t} = useI18n()

const message = useMessage()
const searchStore = useSearchStore()
const isRemove = ref(false)


function handleSearch(item: { text: string }, index: number) {
  if (isRemove.value) {
    handleRemove(index)
    return
  }
  console.log(item)
  nextTick(() => {
    searchStore.setHistoryList(item.text)
    uni.navigateTo({
      url: `/pages/search/result?keyword=${item.text}`,
    })
  })
}

function handleRemove(index: number) {
  searchStore.historyList.splice(index, 1)
  if (searchStore.historyList.length === 0) {
    isRemove.value = false
  }
}
</script>

<style lang="scss" scoped></style>
