<script setup lang="ts">
import usePage from "@/hooks/usePage";
import {appMerchantRecommendListPost} from "@/service";
import {useUserStore} from "@/store";
import FiltrateTool from "@/components/filtrate-tool/index.vue";
import PriceChoose from "@/components/filtrate-tool/components/price-choose.vue";
import Score from "@/components/filtrate-tool/components/score.vue";
import FoodBox from "@/pages/home/components/tabbar-home/components/food-box/index.vue";
const userStore = useUserStore();

const {t} = useI18n()

const props = defineProps({
  merchantCategoryIds: {
    type: [Number, String],
    default: null
  }
})

const {paging, dataList, queryList} = usePage(getList)
function getList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    appMerchantRecommendListPost({
      params: {
        pageNum: pageNum,
        pageSize: pageSize,
      },
      body: {
        lat: userStore.userLocation.latitude,
        lng: userStore.userLocation.longitude,
        selfPickup: selfPickup.value, // 是否自提
        discount: discount.value, // 是否有折扣 1是 2 否
        scoreRange: scoreRange.value || null, // 评分范围 比如 3-4
        priceRange: price.value || null, // 价格范围 比如 10-30
        merchantCategoryIds: props.merchantCategoryIds ? [props.merchantCategoryIds] : [], // 商家分类id集合(首页中间)
      }
    }).then(res => {
      console.log(res)
      resolve({rows: res.rows})
    })
  })
}

// 是否自提
const selfPickup = ref<number | null>(null)
function togglePickup(value: number) {
  selfPickup.value = value;
  paging.value.refresh()
}
// 是否有折扣
const discount = ref<number | null>(null)
function toggleDiscount(value: number) {
  discount.value = value;
  paging.value.refresh()
}

const scoreRef = ref<any>()
const scoreRange = ref<string | null>(null)
const priceChooseRef = ref<any>()
const price = ref<string | null>(null)
function toggleScore() {
  if (scoreRef.value) {
    scoreRef.value.onOpen();
  }
}
function togglePrice() {
  if (priceChooseRef.value) {
    priceChooseRef.value.onOpen();
  }
}

function applyScore(value: string) {
  scoreRange.value = value;
}
function applyPrice(value: string) {
  price.value = value;
}
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <view class="bg-white pb-24rpx">
        <navbar :title="t('pages.home.featured-on')"/>
        <!-- 筛选工具 -->
        <filtrate-tool class="mt-32rpx" @togglePickup="togglePickup" @toggleDiscount="toggleDiscount" @toggleScore="toggleScore" @togglePrice="togglePrice" />
      </view>
    </template>
    <view class="p-30rpx">
      <template v-for="(item, index) in dataList" :key="index">
        <food-box :item="item" />
      </template>
    </view>
  </z-paging>

  <score @applyScore="applyScore" ref="scoreRef" />
  <price-choose @applyPrice="applyPrice" ref="priceChooseRef" />
</template>

<style scoped lang="scss">

</style>