<script setup lang="ts">
import {appMerchantRecommendListPost,getDishListByCategoryId} from "@/service";
import FoodBox from "@/pages/home/components/tabbar-home/components/food-box/index.vue";
import {useUserStore} from "@/store";

const userStore = useUserStore();

const props = defineProps<{
  id?: string
}>()

function getList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    getDishListByCategoryId({
      params: {
        pageNum,
        pageSize,
        recipeCategoryId:props.id
      },
      body: {
        lat: userStore.userLocation.latitude,
        lng: userStore.userLocation.longitude,
        selfPickup: null, // 是否自提
        discount: null, // 是否有折扣 1是 2 否
        scoreRange: null, // 评分范围 比如 3-4
        priceRange: null, // 价格范围 比如 10-30
        merchantCategoryIds: [],
        merchantLabelIds: props.id ? [props.id] : [],
        recipeCategoryId:props.id
      },
    }).then(res => {
      resolve(res.data)
    })
  })
}

const {paging, loading, firstLoaded, dataList, queryList} = usePage(getList)
</script>

<template>
  <z-paging
      ref="paging"
      v-model="dataList"
      @query="queryList"
      bg-color="#fff"
  >
    <template #top>
      <navbar />
    </template>

    <view class="p-32rpx">
      <template v-for="(item, index) in dataList" :key="index">
        <food-box :item="item" />
      </template>
    </view>
  </z-paging>
</template>

<style scoped lang="scss">

</style>