<script setup lang="ts">
import useEventEmit from "@/hooks/useEventEmit";
import {CollectionType, EventEnum} from "@/constant/enums";
import { useConfigStore, useUserStore } from "@/store";
import Config from '@/config/index'
import { debounce } from 'throttle-debounce'
import MsgBox from "@/pages/home/components/tabbar-home/components/msg-box.vue";
import Search from "@/pages/home/components/tabbar-home/components/search.vue";
import ClassBullet from "./components/class-bullet.vue";
import TabsType from "./components/tabs-type.vue";
import FeaturedOn from "./components/featured-on/index.vue";
import FiltrateTool from "@/components/filtrate-tool/index.vue";
import NearbyMerchants from "./components/nearby-merchants/index.vue";
import FoodBox from "./components/food-box/index.vue";
import HomeSkeleton from "./components/home-skeleton.vue";
import {
  appMarketActivityListPost,
  appMerchantCartListMerchantPost,
  appMerchantCategoryListGet,
  appMerchantFeaturedListPost,
  appMerchantLabelListGet,
  appMerchantNearbyListPost, appMerchantRecommendListPost,
  appCollectCollectPost,
  appRecipeCategoryListGet
} from "@/service";
import usePage from "@/hooks/usePage";
import {getFeaturedDishList} from "@/pages-store/service";
const configStore = useConfigStore();
const userStore = useUserStore();
const props = defineProps<{
  scoreRange?: string;
  price?: Array<string> | string;
}>();
const emit = defineEmits(["toggleScore", "togglePrice", "toggleNotOpen"]);
const { t } = useI18n();

const loading = ref(false)

function isSoldOutStock(stockLike: unknown) {
  const n = Number(stockLike)
  return !Number.isNaN(n) && n <= 0
}

function navigateTo(url: string) {
  if(userStore.checkLogin()) {
    uni.navigateTo({
      url,
    });
  }
}

const swiperList = ref([]);
const currentSwiper = ref(0);

async function initData() {
  // 只在首次加载时显示骨架屏，避免切换时的白屏
  if(featuredList.value.length === 0) {
    loading.value = true
  }
  appMarketActivityList()
  getAppMerchantLabelList()
  getAppMerchantCategoryList()
  getAppFeaturedList()
  getAppNearbyListPost()
  // 获取当前用户购物车信息
  userStore.getUserCartAllData()
}

// 筛选事件触发
function toggleScore() {
  emit("toggleScore");
}
function togglePrice() {
  emit("togglePrice");
}
function toggleNotOpen() {
  emit("toggleNotOpen");
}

async function getIndexList() {
  // 切换时立即刷新列表，无需等待nextTick
  if (paging.value) {
    paging.value.refresh()
  }
}

defineExpose({
  initData,
  init: getIndexList,
});

// 获取轮播图列表
function appMarketActivityList() {
  appMarketActivityListPost({}).then(res=> {
    console.log('互动列表', res)
    swiperList.value = res.data
  })
}

// 滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)
const appMerchantLabelList = ref<any>([])
function getAppMerchantLabelList() {
  appRecipeCategoryListGet({}).then(res => {
    console.log('滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)', res)
    appMerchantLabelList.value = res.data || []
  })
  // appMerchantLabelListGet({}).then(res => {
  //   console.log('滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)', res)
  //   appMerchantLabelList.value = res.data || []
  // })
}
// 查询所有商家分类数据
const appMerchantCategoryList = ref([])
const currentCategory = ref('')
function getAppMerchantCategoryList() {
  appMerchantCategoryListGet({}).then((res: any) => {
    console.log('查询所有商家分类数据', res)
    appMerchantCategoryList.value = res.data || []
  })
}

// 查询精选商家列表(首页)
const featuredList = ref([])
function getAppFeaturedList() {
  appMerchantFeaturedListPost({
    body: {
      lat: userStore.userLocation.latitude,
      lng: userStore.userLocation.longitude,
    }
  }).then(res=> {
    featuredList.value = res.data || []
  }).finally(()=> {
    loading.value = false
  })
}

// 查询附近商家列表(首页) /app/merchant/nearbyList
const nearbyList = ref([])
function getAppNearbyListPost() {
  appMerchantNearbyListPost({
    body: {
      lat: userStore.userLocation.latitude,
      lng: userStore.userLocation.longitude,
    }
  }).then(res=> {
    nearbyList.value = res.data || []
  })
}

// 是否自提
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 {paging, dataList, queryList} = usePage(getList)
function getList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    getFeaturedDishList({
      pageNum,
      pageSize,
    }).then(res => {
      console.log('查询精选菜品列表', res)
      resolve({rows: res.rows})
    })
  })
}

// 回到顶部
const showBackToTop = ref(false)
function scrollToTop() {
  if (paging.value) {
    paging.value.scrollToTop()
  }
}

// 监听页面滚动
function onPageScroll(e: any) {
  // 滚动距离大于60时显示，小于等于60时隐藏
  showBackToTop.value = e.detail.scrollTop > 120
}

// 点击头部分类
const merchantLabelId = ref('')
function handleItemClick(e) {
  console.log(e, '点击头部分类')
  merchantLabelId.value = e.id
  // paging.value.refresh()
}
function tabsTypeChange(id: string) {
  currentCategory.value = id
  navigateTo('/pages-store/pages/home-store/index?merchantCategoryIds=' + id)
  // console.log('分类切换', id)
  // paging.value.refresh()
}

// 是否展示精选商家和附近商家 true 显示 false隐藏
const isShowMerchant = computed(()=> {
  if(!selfPickup.value && !discount.value && !props.scoreRange && !props.price && !currentCategory.value) {
    return true // 没有筛选条件时显示
  } else {
    return true // 有筛选条件时隐藏
  }
})

// 手动触发下拉刷新了
function onRefresh() {
  console.log('手动触发下拉刷新了')
  merchantLabelId.value = ''
  currentCategory.value = ''
  paging.value.refresh()
}

function handleClickSwiper(item: any) {
  console.log(item, '点击轮播图')
  switch (Number(item.activityType)) {
    case 1: // 商家列表
      navigateTo('/pages-store/pages/list/index?id=')
      break
    case 2: // 活动菜品列表
      navigateTo('/pages-store/pages/dishes/index?id=' + item.id)
      break
    case 3: // 会员
      navigateTo('/pages-user/pages/member/index')
      break
  }
}

function navigateToDishes(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/store/dishes?id=' + item.id + '&storeId=' + item.merchantId,
  })
}
// 收藏菜品
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, // 立即触发
})
</script>

<template>
  <view
    class="bg-#fff"
    :style="[
      {
        height: configStore.windowHeight + 'px',
      },
    ]"
  >
      <z-paging @onRefresh="onRefresh" ref="paging" v-model="dataList" :auto="false" @query="queryList" @scroll="onPageScroll" :refresher-enabled="true" :auto-show-back-to-top="false">
        <template #top>
          <status-bar />
          <view class="flex items-center pt-18rpx px-30rpx pb-20rpx">
<!--            <text class="text-52rpx lh-52rpx text-#333 font-bold shrink-0">{{Config.appName}}</text>-->
            <image
                src="@img/logo.png"
                class="w-52rpx h-52rpx shrink-0"
            ></image>
            <view class="bg-#D8D8D8 w-1rpx h-40rpx mx-14rpx"></view>
            <view @click="navigateTo('/pages/address/index')" class="text-#00A76D text-28rpx lh-28rpx flex items-center">
              <text v-if="userStore.appointmentTimeShow">{{ t('pages.address.appTime') }}:{{ userStore.appointmentTimeShow }}</text>
              <text v-else>{{ t('pages.address.reservation') }}</text>
              <image
                  src="@img/chef/119.png"
                  class="w-24rpx h-24rpx ml-6rpx mt-4rpx shrink-0"
              ></image>
            </view>
          </view>
        </template>
        <view
            class="animate-in fade-in animate-ease-out animate-duration-300"
            v-show="loading && featuredList.length === 0"
        >
          <home-skeleton />
        </view>
        <view class="flex-center-sb px-30rpx pt-34rpx">
          <!--展示用户的定位城市，如果用户没有使用定位则展示选择的城市，用户选择城市后，需要更新定位城市-->
          <view @click="navigateTo('/pages-user/pages/search-address/index')" class="flex items-center text-30rpx text-#333 font-500">
            <text class="line-clamp-1">
              {{ userStore.userLocation.location || t('pages.home.default-location') }}
            </text>
            <image
                src="@img/chef/101.png"
                class="w-24rpx h-24rpx ml-10rpx mt-6rpx shrink-0"
            ></image>
          </view>
          <view class="shrink-0 ml-40rpx">
            <msg-box @toggleNotOpen="toggleNotOpen" />
          </view>
        </view>
        <view class="px-30rpx mt-32rpx pb-22rpx">
          <search />
          <!-- 分类滚动区域 -->
          <view class="mt-40rpx" v-if="appMerchantLabelList.length > 0">
            <class-bullet :categories="appMerchantLabelList" @itemClick="handleItemClick" />
          </view>
        </view>
        <swiper
            class="card-swiper"
            :circular="true"
            :autoplay="true"
            previous-margin="60rpx"
            next-margin="60rpx"
        >
          <template v-for="item in swiperList" :key="item.id">
            <swiper-item @click="handleClickSwiper(item)" class="">
              <image
                  :src="item.activityImage"
                  class="swiper-item-content w-full h-100% rounded-24rpx bg-common"
              ></image>
            </swiper-item>
          </template>
        </swiper>

        <!-- 分类滚动区域 -->
        <tabs-type @changeType="tabsTypeChange" v-if="appMerchantCategoryList.length > 0" :list="appMerchantCategoryList" :currentId="currentCategory" class="mt-22rpx" />

        <!-- 筛选工具 -->
<!--        <filtrate-tool class="mt-32rpx" @togglePickup="togglePickup" @toggleDiscount="toggleDiscount" @toggleScore="toggleScore" @togglePrice="togglePrice" />-->

        <view class="animate-in fade-in animate-ease-in animate-duration-300" v-if="isShowMerchant">
          <!-- Featured on ChefLink 精选商家 -->
          <view v-if="featuredList.length > 0" class="mt-56rpx">
            <view
                class="mb-30rpx pl-30rpx text-36rpx lh-36rpx text-#333 font-bold"
            >{{ t('pages.home.featured-on') }}</view>
            <featured-on :list="featuredList" />
          </view>

          <!-- Nearby Merchants 附近商家 -->
          <view v-if="nearbyList.length > 0" class="mt-56rpx">
            <view
                class="mb-32rpx pl-30rpx text-36rpx lh-36rpx text-#333 font-bold"
            >{{ t('pages.home.nearby-merchants') }}</view>
            <nearby-merchants :list="nearbyList" />
          </view>
        </view>

        <!-- List -->
        <view class="mt-56rpx px-30rpx">
          <view class="mb-32rpx text-36rpx lh-36rpx text-#333 font-bold"
          >{{ t('pages.home.featured-dishes') }}</view>
          <template v-for="(item, index) in dataList" :key="index">
            <view @click="navigateToDishes(item)" class="w-100% mb-30rpx">
              <view class="relative h-448rpx rounded-24rpx mb-28rpx">
                <view @click.stop="handleDishCollectionClick(item)" class="w-68rpx h-68rpx absolute z-2 top-0 right-0">
                  <image
                      v-if="!item.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>
                <view
                  v-if="isSoldOutStock(item?.stock)"
                  class="absolute z-2 left-20rpx top-20rpx px-16rpx h-52rpx rounded-26rpx bg-#14181B/70 center text-26rpx text-#fff font-500"
                >
                  已售完
                </view>
                <image
                    :src="item?.dishImage?.split(',')[0]"
                    mode="aspectFill"
                    class="w-full h-full rounded-24rpx bg-common"
                />
              </view>
              <view class="line-clamp-1 text-30rpx text-#333 font-500">
                {{ item?.dishName }}
              </view>
              <view class="flex-center-sb mt-12rpx">
                <text class="text-32rpx lh-30rpx text-#333 font-500">US${{ item?.discountPrice }}</text>
                <view
                  v-if="Number(item?.memberPrice) > 0"
                  class="member-price-tag text-[#FBE3C3] font-500 text-30rpx lh-30rpx center pl-6rpx break-all"
                >
                  <text>{{ t('pages-store.store.members') }}: </text>
                  ${{ item?.memberPrice }}
                </view>
              </view>
              <view class="flex-center-sb mt-12rpx">
                <view class="text-28rpx text-#999">
                  <view class="line-through">US${{ item?.originalPrice }}</view>
                  <view>{{ t('pages-store.store.sales') }}:{{ item?.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 #bottom>
          <view class="h-50px"></view>
          <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
        </template>
      </z-paging>
    <view v-if="userStore.isLogin && userStore.userCartAllData.length > 0" @click="navigateTo('/pages-user/pages/cart/index')" class="fixed bottom-138rpx left-50% translate-x--50% px-26rpx h-88rpx bg-#14181B rounded-44rpx center text-28rpx text-#fff font-500">
      <image src="@img/chef/125.png" class="w-28rpx h-28rpx shrink-0"></image>
      <view class="ml-10rpx whitespace-nowrap">{{ userStore.userCartAllData[0]?.merchantName }}</view>
      <view class="w-8rpx h-8rpx rounded-50% bg-white mx-8rpx"></view>
      <text>{{ userStore.userCartAllData[0]?.merchantCartVoList?.length || 0 }}</text>
    </view>
    
    <!-- 回到顶部按钮 -->
    <view v-if="showBackToTop" @click="scrollToTop" class="fixed bottom-148rpx left-30rpx w-88rpx h-88rpx bg-#14181B rounded-50% center shadow-lg">
      <image src="@img/chef/119.png" class="w-40rpx h-40rpx shrink-0 rotate-180"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
.card-swiper {
  height: 420rpx;
}
.swiper-item-content {
  width: 100%;
  height: 100%;
  transform: scale(0.95);
  border-radius: 20rpx;
  transition: transform 0.3s;
}
.swiper-item-active .swiper-item-content {
  transform: scale(1);
}
.member-price-tag {
  min-width: 220rpx;
  height: 42rpx;
  background-image: url("/static/images/chef/1282.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
