<script setup lang="ts">
import { debounce } from 'throttle-debounce'
import {appCollectListPost, appCollectCollectPost} from "@/service";
import FoodBox from "@/pages/home/components/tabbar-home/components/food-box/index.vue";
import Collection from "@/components/collection/index.vue";
import {CollectionType} from "@/constant/enums";

const {t} = useI18n()
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
  index: {
    type: Number,
    default: 0,
  },
})

// (1, "菜谱")(2, "菜品")(3, "配菜")(4, "商家")
const typeList = [4,2,1]

watch(()=>props.currentIndex, (newVal, oldVal) => {
  console.log('currentIndex', newVal)
  console.log('props.index', props.index)
  if(newVal === props.index) {
    paging.value?.reload()
  }
})

const {paging, dataList, queryList, loading} = usePage<any>((pageNum: number, pageSize: number) =>
    appCollectListPost({
      params: {
        pageNum,
        pageSize,
      },
      body: {
        targetType: typeList[props.currentIndex]
      }
    }),
)


function navigateToRecipeDetail(id: string | number) {
  navigateTo(`/pages-user/pages/recipe/index?id=${id}`)
}

function navigateToDishes(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/store/dishes?id=' + item.id + '&storeId=' + item.merchantId,
  })
}

// 收藏菜谱
function handleSubmitCollectRecipe(item:any) {
  debouncedEmit(item.merchantRecipeVo?.isCollect, item.merchantRecipeVo?.id, CollectionType.RECIPE, ()=> {
    item.merchantRecipeVo.isCollect = !item.merchantRecipeVo?.isCollect
  })
}

// 收藏菜品
function handleDishCollectionClick(item: any) {
  debouncedEmit(item.isCollect, item.id, CollectionType.DISH, ()=> {
    item.isCollect = !item.isCollect
  })
}
// 防抖处理函数
const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: CollectionType, callback: ()=> void) => {
  // 收藏接口
  appCollectCollectPost({
    body: {
      targetId: id,
      targetType: type
    }
  }).then(res=> {
    callback()
  })
}, {
  atBegin: true, // 立即触发
})

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

function reload() {
  paging.value?.reload()
}

function refresh() {
  paging.value?.refresh()
}

defineExpose({
  reload,
  refresh,
})
</script>

<template>
  <view class="h-full">
    <z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">
      <view class="p-30rpx">
        <template v-if="currentIndex == 0">
          <!--商家-->
          <view v-for="item in dataList" :key="item.id">
            <food-box :item="item.merchantVo" />
          </view>
        </template>
        <template v-if="currentIndex == 1">
          <!--菜品-->
          <view class="grid grid-cols-2 gap-30rpx">
            <template v-for="item in dataList">
              <view @click="navigateToDishes(item.merchantDishVo)" class="w-100% mb-10rpx rounded-16rpx">
                <view class="relative h-248rpx rounded-24rpx mb-28rpx">
                  <view @click.stop="handleDishCollectionClick(item.merchantDishVo)" class="w-68rpx h-68rpx absolute z-2 top-0 right-0">
                    <image
                        v-if="!item.merchantDishVo.isCollect"
                        src="@img-store/1334.png"
                        mode="aspectFill"
                        class="w-full h-full"
                    />
                    <image
                        v-else
                        src="@img-store/1337.png"
                        mode="aspectFill"
                        class="w-full h-full"
                    />
                  </view>
                  <image
                      :src="item.merchantDishVo?.dishImage?.split(',')[0]"
                      mode="aspectFill"
                      class="w-full h-full rounded-24rpx"
                  />
                </view>
                <view class="line-clamp-1 text-30rpx lh-30rpx text-#333 font-500 mb-12rpx">
                  {{ item.merchantDishVo.dishName }}
                </view>
                <view class="flex-center-sb">
                  <text class="text-30rpx lh-30rpx text-#333 font-500">US${{ item.merchantDishVo.discountPrice }}</text>
                  <view
                    v-if="Number(item.merchantDishVo.memberPrice) > 0"
                    class="member-price-tag text-[#FBE3C3] text-18rpx center pl-6rpx"
                  >
                    {{ t('pages-store.store.members') }}: ${{ item.merchantDishVo.memberPrice }}
                  </view>
                </view>
                <view class="flex-center-sb mt-12rpx">
                  <view class="text-28rpx text-#999">
                    <view class="line-through">US${{ item.merchantDishVo.originalPrice }}</view>
                    <view>{{ t('pages-store.store.sales') }}:{{ item.merchantDishVo.salesCount }}</view>
                  </view>

                  <view class="center w-64rpx h-64rpx rounded-50% bg-white shadow-lg">
                    <image
                        src="@img/chef/1285.png"
                        class="w-30rpx h-30rpx shrink-0"
                    ></image>
                  </view>
                </view>
              </view>
            </template>
          </view>
        </template>
        <template v-if="currentIndex == 2">
          <view class="grid grid-cols-2 gap-30rpx">
            <view v-for="item in dataList">
              <view @click="navigateToRecipeDetail(item.id)" class="w-312rpx">
                <image
                    :src="item.merchantRecipeVo?.recipeImage?.split(',')[0]"
                    class="w-310rpx h-296rpx rounded-24rpx mb-26rpx"
                    mode="aspectFill"
                ></image>
                <view class="flex-center-sb">
                  <text class="text-30rpx lh-30rpx text-#333 line-clamp-1 tracking-[.04em] font-500"
                  >{{ item.merchantRecipeVo?.recipeName }}</text
                  >
                  <view class="w-40rpx h-40rpx ml-14rpx shrink-0">
                    <collection
                        :is-collected="item.merchantRecipeVo?.isCollect"
                        @collectionChange="handleSubmitCollectRecipe(item)"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </z-paging>
  </view>
</template>

<style scoped lang="scss">

</style>