<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">
          <image
              :src="item?.dishImage?.split(',')[0]"
              class="w-full h-186rpx rounded-24rpx mb-16rpx"
              mode="aspectFill"
          ></image>
          <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">

</style>