<script setup lang="ts">
import {getMarketingDishList} from "@/pages-store/service";
import {appMarketActivityListPost} from "@/service";
import {thumbnailImg} from "@/utils/utils";

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

function getList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    getMarketingDishList(props.id).then(res => {
      resolve(res)
    })
  })
}

const {paging, loading, firstLoaded, dataList, queryList} = usePage(getList)

onLoad(()=> {
  // appMarketActivityListPost({
  //   options: {
  //     pageNum: 1,
  //     pageSize: 10,
  //   },
  // }).then(res=> {
  //   console.log('', res)
  // })
})

function handleClickDish(item: any) {
  navigateTo(`/pages-store/pages/store/index?id=${item.merchantId}`)
}

function navigateTo(url: string) {
  uni.navigateTo({ url })
}
</script>

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

    <view class="grid grid-cols-2 gap-x-30rpx gap-y-46rpx px-32rpx">
      <template v-for="(item,index) in dataList">
        <view @click="handleClickDish(item)" class="w-330rpx overflow-hidden">
          <image
              :src="thumbnailImg(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>