<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
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 HomeTopHeader from "@/pages/home/components/tabbar-home/components/home-top-header.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,
  appMerchantFeaturedListPost,
  appMerchantLabelListGet,
  appMerchantNearbyListPost, appMerchantRecommendListPost,
  appCollectCollectPost,
  appRecipeCategoryListGet
} from "@/service";
import usePage from "@/hooks/usePage";
import {getFeaturedDishList} from "@/pages-store/service";
import {
  buildQuickTopicUrl,
  isQuickTopicSlug,
} from '@/pages-store/pages/dishes/utils/quick-topic-route'
import { formatSalesCount } from "@/utils/utils";
const configStore = useConfigStore();
const userStore = useUserStore();
const props = defineProps<{
  scoreRange?: string;
  price?: Array<string> | string;
}>();
const emit = defineEmits(["toggleScore", "togglePrice", "toggleNotOpen"]);
const { t, locale } = useI18n();

/** 首页运营图：按语言切换（中文 / 英文） */
const HOME_PROMO_BANNERS = {
  memberUpgrade: {
    zh: 'https://www.howhowfresh.com/minio/ruoyi/2026/06/03/0b9a7f865aba442e84e51034a3ec900c.png',
    en: 'https://www.howhowfresh.com/minio/ruoyi/2026/06/03/c5b9df3a922d4d17ae1b6eb8c1d7524a.png',
  },
  deliveryTime: {
    zh: 'https://www.howhowfresh.com/minio/ruoyi/2026/06/03/c5673a8874594755bdde7ed7fcbd1982.jpg',
    en: 'https://www.howhowfresh.com/minio/ruoyi/2026/06/03/1da02f1e0af34cea91a4f643247176be.png',
  },
} as const

const isEnglishLocale = computed(() =>
  String(locale.value || uni.getLocale() || '').toLowerCase().startsWith('en'),
)

const memberUpgradeBannerSrc = computed(() =>
  isEnglishLocale.value
    ? HOME_PROMO_BANNERS.memberUpgrade.en
    : HOME_PROMO_BANNERS.memberUpgrade.zh,
)

const deliveryTimeBannerSrc = computed(() =>
  isEnglishLocale.value
    ? HOME_PROMO_BANNERS.deliveryTime.en
    : HOME_PROMO_BANNERS.deliveryTime.zh,
)

const loading = ref(false)

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

/** 底部营销条文案（接口若返回 marketingLabel / hotSaleTag 等则展示） */
function getDishPromoLabel(item: Record<string, unknown>): string {
  const raw = item.marketingLabel ?? item.hotSaleTag ?? item.rankTag ?? item.promotionLabel
  return typeof raw === 'string' && raw.trim() ? raw.trim() : ''
}


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

const swiperList = ref<any[]>([])

async function initData() {
  // 只在首次加载时显示骨架屏，避免切换时的白屏
  if(featuredList.value.length === 0) {
    loading.value = true
  }
  getAppMarketActivityList()
  getAppMerchantLabelList()
  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,
});

/** 首页轮播：POST /app/marketActivity/list */
function getAppMarketActivityList() {
  appMarketActivityListPost({})
    .then((res) => {
      const list = Array.isArray(res?.data) ? res.data : []
      swiperList.value = list
        .filter((item) => item?.activityImageUrl || item?.activityImage)
        .map((item) => ({
          ...item,
          activityImage: item.activityImageUrl || item.activityImage,
        }))
    })
    .catch(() => {
      swiperList.value = []
    })
}

// 滚动信息获取 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 currentCategory = ref('')

// 查询精选商家列表(首页)
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 | number) {
  const topic = String(id)
  if (!isQuickTopicSlug(topic)) {
    return
  }
  currentCategory.value = topic
  const titleKeys: Record<string, string> = {
    'member-zone': 'pages.home.quickTabs.memberZone',
    'live-seafood-air': 'pages.home.quickTabs.liveSeafoodAir',
    'must-eat-list': 'pages.home.quickTabs.mustEatList',
    'new-calendar': 'pages.home.quickTabs.newCalendar',
    'fresh-seafood-today': 'pages.home.quickTabs.freshSeafoodToday',
  }
  navigateTo(
    buildQuickTopicUrl(topic, {
      categoryName: t(titleKeys[topic]),
    }),
  )
}

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

// 精选菜品瀑布流：按序均分到两列（0,2,4… / 1,3,5…），分页追加后仍交错排列
const featuredDishColumns = computed(() => {
  const list = dataList.value
  return [
    list.filter((_, i) => i % 2 === 0),
    list.filter((_, i) => i % 2 === 1),
  ]
})

/** 顶栏购物车角标（多商家购物车汇总件数） */
const cartBadgeTotal = computed(() => {
  const list = userStore.userCartAllData
  if (!Array.isArray(list) || list.length === 0) return 0
  let n = 0
  for (const m of list) {
    n += (m as { merchantCartVoList?: unknown[] })?.merchantCartVoList?.length || 0
  }
  return n
})

function goCart() {
  navigateTo('/pages-user/pages/cart/index')
}

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

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

const walletUrl = "pages-user/pages/balance/index";

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="home-page-root"
    :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 />
          <home-top-header
            :app-name="Config.appName"
            :location-text="userStore.userLocation.location"
            :cart-badge-total="cartBadgeTotal"
            :is-login="userStore.isLogin"
            @click-location="navigateTo('/pages-user/pages/search-address/index')"
            @click-cart="goCart"
          />
        </template>
        <view
            class="animate-in fade-in animate-ease-out animate-duration-300"
            v-show="loading && featuredList.length === 0"
        >
          <home-skeleton />
        </view>
        <view class="px-24rpx pt-12rpx pb-8rpx">
          <search />
          <msg-box />
          <!-- 分类标签 -->
          <view class="mt-28rpx" v-if="appMerchantLabelList.length > 0">
            <class-bullet :categories="appMerchantLabelList" @itemClick="handleItemClick" />
          </view>
        </view>
        <!-- 轮播图：/app/marketActivity/list -->
        <swiper
            v-if="swiperList.length > 0"
            class="card-swiper"
            :circular="swiperList.length > 1"
            :autoplay="swiperList.length > 1"
        >
          <swiper-item
            v-for="(item, sIdx) in swiperList"
            :key="item.id ?? sIdx"
            @click="handleClickSwiper(item)"
          >
            <image
                :src="item.activityImage"
                class="swiper-item-content w-full h-100%"
                mode="scaleToFill"
            ></image>
          </swiper-item>
        </swiper>

        <!-- 快捷入口（固定五项，跳转精选菜品专题页） -->
        <tabs-type
          :current-id="currentCategory"
          class="mt-28rpx mb-24rpx home-tabs-quick"
          @change-type="tabsTypeChange"
        />

        
        <image
          :src="memberUpgradeBannerSrc"
          class="w-100% h-[340rpx]"
          mode="widthFix"
          @click="navigateTo('/pages-user/pages/member/index')"
        />
        <image
          :src="deliveryTimeBannerSrc"
          class="w-100% h-[200rpx] rounded-24rpx mt-4rpx"
          mode="widthFix"
        />

        <!-- 精选商家和附近商家 -->
        <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="featured-merchants-section mt-36rpx px-24rpx pt-8rpx pb-16rpx">
            <view class="mb-24rpx px-6rpx text-28rpx lh-36rpx text-#1a1a1a">
              {{ t('pages.home.featured-on') }}
            </view>
            <featured-on :list="featuredList" />
          </view>

          <!-- Nearby Merchants 附近商家 -->
          <view v-if="nearbyList.length > 0" class="nearby-merchants-block mt-36rpx px-24rpx pb-16rpx">
            <view class="mb-24rpx px-6rpx text-28rpx lh-36rpx text-#1a1a1a ">
              {{ t('pages.home.nearby-merchants') }}
            </view>
            <nearby-merchants :list="nearbyList" />
          </view>
        </view>

        <!-- List 精选菜品瀑布流（浅底 + 白卡片 + 阴影，结构对齐设计稿） -->
        <view class="featured-dishes-section mt-36rpx px-24rpx pb-40rpx">
          <view class="mb-24rpx px-6rpx text-28rpx lh-36rpx text-#1a1a1a "
          >{{ t('pages.home.featured-dishes') }}</view>
          <view class="waterfall-row flex gap-16rpx items-start">
            <view
              v-for="(col, colIndex) in featuredDishColumns"
              :key="colIndex"
              class="waterfall-col flex-1 min-w-0 flex flex-col gap-16rpx"
            >
              <view
                v-for="item in col"
                :key="item.id || String(item.merchantId) + '-' + item.dishName"
                @click="navigateToDishes(item)"
                class="featured-dish-card w-full"
              >
                <view class="featured-dish-image">
                  <view v-if="item.isNew == 1" class="dish-new-ribbon">
                    <text class="dish-new-ribbon__text">NEW</text>
                  </view>
                  <image
                      :src="item?.dishImage?.split(',')[0]"
                      mode="aspectFill"
                      class="featured-dish-img"
                  />
                  <view
                    v-if="isSoldOutStock(item?.stock)"
                    class="featured-dish-sold-dim"
                  />
                  <image
                    v-if="isSoldOutStock(item?.stock)"
                    src="/static/app/images/SoldOut.png"
                    mode="aspectFill"
                    class="featured-dish-sold-overlay"
                  />
                  <view
                    @click.stop="handleDishCollectionClick(item)"
                    class="featured-dish-collect w-56rpx h-56rpx absolute z-4 top-12rpx right-12rpx center"
                  >
                    <image
                        v-if="!item.isCollect"
                        src="@img-store/1334.png"
                        mode="aspectFill"
                        class="w-44rpx h-44rpx featured-dish-collect-icon"
                    />
                    <image
                        v-else
                        src="@img-store/1337.png"
                        mode="aspectFill"
                        class="w-44rpx h-44rpx featured-dish-collect-icon"
                    />
                  </view>
                </view>
                <view class="featured-dish-body">
                  <view class="featured-dish-meta flex items-start justify-between gap-12rpx mb-14rpx">
                    <view class="min-w-0 flex-1">
                      <text class="featured-dish-price">US${{item?.originalPrice }}</text>
                      <!-- <text
                        v-if="Number(item?.originalPrice) > Number(item?.discountPrice)"
                        class="featured-dish-original"
                      >US${{ item?.originalPrice }}</text> -->
                    </view>
                    <text class="featured-dish-sales shrink-0">{{ t('pages-store.store.sales') }}: {{ formatSalesCount(item?.salesCount) }}</text>
                  </view>
                  <view class="featured-dish-title line-clamp-2 mb-16rpx">
                    {{ item?.dishName }}
                  </view>
                  <view class="flex items-center justify-between gap-12rpx">
                    <view
                      v-if="Number(item?.memberPrice) > 0"
                      class="featured-dish-member shrink min-w-0"
                    >
                      <text class="featured-dish-member-inner">{{ t('pages-store.store.members') }}: US${{ item?.memberPrice }}</text>
                    </view>
                    <view v-else class="flex-1 min-w-0"></view>
                    <view class="featured-dish-add center shrink-0">
                      <image
                          src="@img/chef/1285.png"
                          class="w-28rpx h-28rpx"
                      />
                    </view>
                  </view>
                  <view
                    v-if="getDishPromoLabel(item as Record<string, unknown>)"
                    class="featured-dish-promo mt-16rpx"
                  >
                    <text class="featured-dish-promo-text">{{ getDishPromoLabel(item as Record<string, unknown>) }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <template #bottom>
          <view class="h-50px"></view>
          <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
        </template>
      </z-paging>
    <!-- 回到顶部（购物车已并入顶栏，不再使用底部浮条） -->
    <view v-if="showBackToTop" @click="scrollToTop" class="home-back-top fixed 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">
.home-page-root {
  background: #f2f2f2;
}

.home-delivery-row {
  padding-left: 2rpx;
}

.home-tabs-quick {
  padding-left: 8rpx;
  padding-right: 8rpx;
}

.nearby-merchants-block {
  background: #f2f2f2;
}

/* 为底栏 Tab 预留空间，避免被遮挡 */
.home-back-top {
  bottom: calc(100rpx + env(safe-area-inset-bottom, 0px));
}

.card-swiper {
  height: 420rpx;
}
.swiper-item-content {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}


/* 精选商家 / 精选菜品 区块（与页面背景统一） */
.featured-merchants-section,
.featured-dishes-section {
  background: #f2f2f2;
}

.featured-dish-collect-icon {
  filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.18));
}

/* 瀑布流商品图：固定 1:1 区域，便于「已售完」等角标统一 */
.featured-dish-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #f0f0f0;
  overflow: hidden;
}

.featured-dish-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.featured-dish-sold-dim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(201, 197, 197, 0.6);
  pointer-events: none;
}

.featured-dish-sold-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140rpx;
  height: 140rpx;
  z-index: 3;
  pointer-events: none;
}

.featured-dish-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.featured-dish-body {
  padding: 20rpx 20rpx 22rpx;
}

.featured-dish-price {
  color: #e02e24;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 1.2;
}

.featured-dish-original {
  margin-left: 10rpx;
  color: #b3b3b3;
  font-size: 22rpx;
  font-weight: 400;
  text-decoration: line-through;
  vertical-align: baseline;
}

.featured-dish-sales {
  color: #999;
  font-size: 24rpx;
  line-height: 1.35;
  max-width: 48%;
  text-align: right;
}

.featured-dish-title {
  color: #1a1a1a;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.45;
}

/* 会员价：暖色胶囊，替代长条形切图 */
.featured-dish-member {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 88rpx);
}

.featured-dish-member-inner {
  display: inline-block;
  padding: 6rpx 18rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, #fff5eb 0%, #ffe8d6 100%);
  color: #c45c1a;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-dish-add {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #14181b;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}

/* 可选营销条（淡红底 + 文案） */
.featured-dish-promo {
  padding: 12rpx 16rpx;
  border-radius: 12rpx;
  background: #fff0f0;
}

.featured-dish-promo-text {
  color: #e02e24;
  font-size: 22rpx;
  font-weight: 500;
  line-height: 1.4;
}

.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>
