<script setup lang="ts">
import { thumbnailImg } from '@/utils/utils'

const props = defineProps<{
  list: any[]
}>()
const { t } = useI18n()

function handleClickFood(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/store/index?id=' + item.id,
  })
}

function getCardImages(item: any): string[] {
  const raw = item?.shopImages
  let urls: string[] = []
  if (raw && typeof raw === 'string') {
    urls = raw
      .split(',')
      .map((s: string) => s.trim())
      .filter(Boolean)
      .map((u: string) => thumbnailImg(u) || u)
  }
  if (urls.length === 0 && item?.logo) {
    const logo = thumbnailImg(item.logo) || item.logo
    urls = logo ? [logo] : []
  }
  return urls
}

function getTitleLines(item: any): { line1: string; line2: string } {
  const en = item?.merchantCategoryNamesEn?.[0]
  const zh = item?.merchantCategoryNamesZh?.[0]
  const name = String(item?.merchantName || '').trim()
  if (en && zh) return { line1: String(en), line2: String(zh) }
  if (en && !zh) return { line1: String(en), line2: name && name !== String(en) ? name : '' }
  if (zh && !en) return { line1: String(zh), line2: name && name !== String(zh) ? name : '' }
  const parts = name.split(/\n|\r|\|｜/).map((s) => s.trim()).filter(Boolean)
  if (parts.length >= 2) return { line1: parts[0], line2: parts[1] }
  return { line1: name, line2: '' }
}

function formatMerchantRating(item: any): string {
  const r = Number(item?.rating)
  if (Number.isFinite(r) && r > 0) return r.toFixed(1)
  return '5.0'
}

function subtitleLine(item: any): string {
  const comments = item?.commentCount ?? 0
  const dt = item?.deliveryTime
  if (dt === undefined || dt === null || dt === '') {
    return `(${comments})`
  }
  const n = Number(dt)
  if (Number.isFinite(n) && n > 0) {
    const unit = n === 1 ? t('common.day') : t('common.days')
    return `(${comments}) · ${n}${unit}`
  }
  return `(${comments}) · ${dt}`
}
</script>

<template>
  <scroll-view class="featured-scroll" scroll-x enable-flex :show-scrollbar="false">
    <view class="featured-track">
      <view class="featured-track__pad" />
      <view
        v-for="(item, index) in list"
        :key="item?.id ?? index"
        class="featured-card"
        :class="{ 'featured-card--first': index === 0 }"
        @click="handleClickFood(item)"
      >
        <!-- 左侧图：单图或与示例一致的双图上下分栏 -->
        <view class="featured-card__media">
          <template v-if="getCardImages(item).length >= 2">
            <image
              :src="getCardImages(item)[0]"
              class="featured-card__media-half featured-card__media-half--top"
              mode="scaleToFill"
            />
          </template>
          <image
            v-else-if="getCardImages(item).length >= 1"
            :src="getCardImages(item)[0]"
            class="featured-card__media-single"
            mode="scaleToFill"
          />
          <view v-else class="featured-card__media-single featured-card__media-placeholder" />
        </view>

        <view class="featured-card__body">
          <view class="featured-card__titles">
            <text v-if="getTitleLines(item).line1" class="featured-card__name featured-card__name--primary">{{
              getTitleLines(item).line1
            }}</text>
            <text v-if="getTitleLines(item).line2" class="featured-card__name featured-card__name--secondary">{{
              getTitleLines(item).line2
            }}</text>
          </view>

          <view
            v-if="+item.deliveryService === 1"
            class="featured-card__fee"
          >
            {{ t('pages-store.store.tips5') }} ${{ item.deliveryFee }}{{ t('pages-store.store.start') }}
          </view>

          <view class="featured-card__rating">
            <text class="featured-card__stars">★★★★★</text>
            <text class="featured-card__rate-num">{{ formatMerchantRating(item) }}</text>
          </view>

          <text class="featured-card__sub">{{ subtitleLine(item) }}</text>

          <view class="featured-card__arrow center">
            <view class="i-carbon:chevron-right text-32rpx text-white"></view>
          </view>
        </view>
      </view>
      <view class="featured-track__pad featured-track__pad--end" />
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.featured-scroll {
  width: 100%;
}

.featured-track {
  display: flex;
  align-items: stretch;
  padding-bottom: 4rpx;
}

.featured-track__pad {
  flex-shrink: 0;
  width: 6rpx;
}
.featured-track__pad--end {
  width: 24rpx;
}

.featured-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  width: 660rpx;
  height: 306rpx;
  min-height: 306rpx;
  margin-left: 16rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}
.featured-card--first {
  margin-left: 0;
}

.featured-card__media {
  width: 323rpx;
  flex-shrink: 0;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.featured-card__media-single {
  width: 100%;
  height: 100%;
  min-height: 256rpx;
  display: block;
}

.featured-card__media-half {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block;
}
.featured-card__media-half--top {
  border-bottom: 3rpx solid #fff;
}

.featured-card__body {
  flex: 1;
  min-width: 0;
  padding: 20rpx 20rpx 18rpx 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
}

.featured-card__titles {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.featured-card__name {
  display: block;
  width: 100%;
  font-size: 28rpx;
  line-height: 34rpx;
  font-weight: 600;
  color: #1a1a1a;
  white-space: normal;
  word-break: break-word;
}
.featured-card__name--secondary {
  font-weight: 500;
}

.featured-card__media-placeholder {
  min-height: 256rpx;
  background: #e8e8e8;
}

.featured-card__fee {
  margin-top: 10rpx;
  font-size: 24rpx;
  line-height: 30rpx;
  font-weight: 500;
  color: #d48806;
}

.featured-card__rating {
  margin-top: 14rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.featured-card__stars {
  font-size: 22rpx;
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: 2rpx;
}

.featured-card__rate-num {
  font-size: 26rpx;
  line-height: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
}

.featured-card__sub {
  margin-top: 8rpx;
  font-size: 22rpx;
  line-height: 28rpx;
  color: #999;
}

.featured-card__arrow {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #14181b;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
</style>
