<script setup lang="ts">
import {appSearchDishInMerchantPost} from "@/service";
const props = defineProps<{
  keyword?: string;
  id?: string;
}>();
const { t } = useI18n();
const keyword = ref(props.keyword || "");
function handleSearch() {
  nextTick(() => {
    if (keyword.value) {
      paging.value?.refresh()
    }
  });
}
const {paging, dataList, queryList, loading} = usePage<any>((pageNum: number, pageSize: number) =>
    appSearchDishInMerchantPost({
      params: {
        pageNum,
        pageSize,
      },
      body: {
        keyword: keyword.value,
        merchantId: props.id,
      }
    }),
)

function navigateToDishes(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/store/dishes?id=' + item.id + '&storeId=' + props.id,
  })
}
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bg-color="#fff">
    <template #top>
      <header-search
          class="pb-42rpx"
          v-model="keyword"
          @search="handleSearch"
      />
    </template>
    <view class="grid grid-cols-2 gap-x-30rpx gap-y-46rpx pb-40rpx px-30rpx">
      <template v-for="item in dataList">
        <view @click="navigateToDishes(item)" class="w-330rpx overflow-hidden">
          <view class="search-result-img-wrap">
            <view v-if="item.isNew == 1" class="dish-new-ribbon">
              <text class="dish-new-ribbon__text">NEW</text>
            </view>
            <image
                :src="item?.dishImage?.split(',')[0]"
                class="w-full h-186rpx rounded-24rpx"
                mode="aspectFill"
            ></image>
          </view>
          <text class="text-30rpx lh-30rpx text-#333 line-clamp-1 tracking-[.04em] font-500"
          >{{ item.dishName }}</text
          >
        </view>
      </template>
    </view>
  </z-paging>
</template>

<style scoped lang="scss">
.search-result-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
}

.dish-new-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 184rpx;
  height: 184rpx;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;

  &__text {
    position: absolute;
    top: 26rpx;
    left: -66rpx;
    width: 240rpx;
    text-align: center;
    font-size: 22rpx;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2rpx;
    line-height: 44rpx;
    background: #E23636;
    transform: rotate(-45deg);
  }
}
</style>