<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { debounce } from 'throttle-debounce'
import { getFeaturedDishList } from '@/pages-store/service'
import { appCollectCollectPost } from '@/service'
import { CollectionType } from '@/constant/enums'
import { useConfigStore } from '@/store'
import { formatSalesCount } from '@/utils/utils'
import {
  getFeaturedDishImage,
  getFeaturedDishPromoLabel,
  isFeaturedDishSoldOut,
  parseFeaturedDishListRes,
} from '@/utils/featuredDish'
import type { FeaturedDishQueryBody, RouteQueryMap } from '../utils/featured-dish-query'

const props = defineProps<{
  buildQuery: (routeQuery?: RouteQueryMap) => FeaturedDishQueryBody
  routeQuery?: RouteQueryMap
  pageTitle?: string
}>()

const { t } = useI18n()
const configStore = useConfigStore()

const paging = ref<ZPagingInstance | null>(null)
const dataList = ref<Record<string, unknown>[]>([])

async function onQuery(pageNum: number, pageSize: number) {
  try {
    const filterBody = props.buildQuery(props.routeQuery)
    const res = await getFeaturedDishList({
      pageNum,
      pageSize,
      ...filterBody,
    })
    const { rows, total } = parseFeaturedDishListRes(res)
    await paging.value?.completeByTotal(rows, total)
  } catch {
    await paging.value?.complete(false)
  }
}

const featuredDishColumns = computed(() => {
  const list = dataList.value
  return [
    list.filter((_, i) => i % 2 === 0),
    list.filter((_, i) => i % 2 === 1),
  ]
})

function navigateToDishes(item: Record<string, unknown>) {
  uni.navigateTo({
    url: `/pages-store/pages/store/dishes?id=${item.id}&storeId=${item.merchantId}`,
  })
}

const collectDish = debounce(
  1300,
  (item: Record<string, unknown>) => {
    appCollectCollectPost({
      body: {
        targetId: String(item.id),
        targetType: CollectionType.DISH,
      },
    }).then(() => {
      item.isCollect = !item.isCollect
    })
  },
  { atBegin: true },
)

defineExpose({
  refresh: () => paging.value?.refresh(),
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    bg-color="#f2f2f2"
    :auto="true"
    @query="onQuery"
  >
    <template #top>
      <navbar :title="pageTitle || ''" />
    </template>

    <view class="featured-dishes-section px-24rpx pb-40rpx pt-16rpx">
      <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="String(item.id ?? item.merchantId) + '-' + String(item.dishName)"
            class="featured-dish-card w-full"
            @click="navigateToDishes(item)"
          >
            <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="getFeaturedDishImage(item)"
                mode="aspectFill"
                class="featured-dish-img"
              />
              <view
                v-if="isFeaturedDishSoldOut(item.stock)"
                class="featured-dish-sold-dim"
              />
              <image
                v-if="isFeaturedDishSoldOut(item.stock)"
                src="/static/app/images/SoldOut.png"
                mode="aspectFill"
                class="featured-dish-sold-overlay"
              />
              <view
                class="featured-dish-collect w-56rpx h-56rpx absolute z-4 top-12rpx right-12rpx center"
                @click.stop="collectDish(item)"
              >
                <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>
                </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 shrink-0">
                  <image src="/static/app/images/add_cart.png" class="featured-dish-add__icon" />
                </view>
              </view>
              <view
                v-if="getFeaturedDishPromoLabel(item)"
                class="featured-dish-promo mt-16rpx"
              >
                <text class="featured-dish-promo-text">{{ getFeaturedDishPromoLabel(item) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <template #bottom>
      <view class="h-24rpx"></view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </template>
  </z-paging>
</template>

<style scoped lang="scss">
.featured-dish-collect-icon {
  filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.18));
}

.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-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 {
  flex-shrink: 0;
}

.featured-dish-add__icon {
  width: 56rpx;
  height: 56rpx;
  display: block;
}

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