<template>
  <view class="shop-index-container">
    <mescroll-body @init="mescrollInit" :down="{ use: true, minAngle: angle }" @down="downCallback" @up="upCallback">
      <HyShopItem v-for="(item, index) in list" :key="index" :item="item" price />
    </mescroll-body>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow, onPageScroll } from '@dcloudio/uni-app'
import { getParkServiceEatList } from '@/api/home'
import { useListLoader } from '@/composables/useListLoader'

const angle = ref(45)
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop > 80) {
    angle.value = 90
  } else {
    angle.value = 45
  }
})

let canReset = false
onShow(() => {
  if (canReset) {
    handleSearch()
  }
  canReset = true
})

const list = computed(() => {
  return listData.value.map((item: any) => ({
    ...item,
    content: JSON.parse(item.content)
  }))
})

// 列表加载
const { listData, upCallback, downCallback, handleSearch, mescrollInit } = useListLoader({
  apiFn: getParkServiceEatList,
  initialParams: {
    parkId: uni.getStorageSync('parkId')
  }
})
</script>

<style lang="scss" scoepd>
.shop-index-container {
  box-sizing: border-box;
  padding: 32rpx 28rpx;
}
</style>
