<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">
          <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="thumbnailImg(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>