<script setup lang="ts">
import { computed } from 'vue'
import Config from '@/config/index'
import { formatSalesCount } from '@/utils/utils'

const { t } = useI18n()

type DishItem = {
  id: number | string
  merchantId?: number | string
  dishName?: string
  dishImage?: string
  discountPrice?: number | string
  originalPrice?: number | string
  memberPrice?: number | string
  salesCount?: number | string
  [key: string]: unknown
}

const props = defineProps<{
  item: DishItem
}>()

function goDetail() {
  const { item } = props
  if (item.merchantId) {
    uni.navigateTo({
      url: `/pages-store/pages/store/dishes?id=${item.id}&storeId=${item.merchantId}`,
    })
  } else {
    uni.navigateTo({
      url: `/pages-store/pages/store/index?id=${item.id}`,
    })
  }
}

const cover = computed(() => {
  const raw = props.item?.dishImage
  if (typeof raw === 'string' && raw) return raw.split(',')[0]
  return ''
})
</script>

<template>
  <view class="search-dish-item" @click="goDetail">
    <view class="search-dish-item__img-wrap">
      <view v-if="item.isNew == 1" class="dish-new-ribbon">
        <text class="dish-new-ribbon__text">NEW</text>
      </view>
      <image :src="cover" mode="aspectFill" class="search-dish-item__img" />
    </view>
    <view class="search-dish-item__main">
      <text class="search-dish-item__title line-clamp-2">{{ item.dishName || '' }}</text>
      <view class="search-dish-item__price-row">
        <text class="search-dish-item__price-current">
          ${{ item.discountPrice ?? item.originalPrice }}
        </text>
        <text
          v-if="
            Number(item.originalPrice) > 0 &&
            Number(item.originalPrice) > Number(item.discountPrice ?? item.originalPrice)
          "
          class="search-dish-item__price-old"
        >${{ item.originalPrice }}</text>
      </view>
      <view
        v-if="Number(item.memberPrice) > 0"
        class="search-dish-item__member"
      >
        <text class="search-dish-item__member-diamond">◆</text>
        <text class="search-dish-item__member-text">
          {{ Config.appName }} {{ t('pages.search.member-price-line') }}: ${{ item.memberPrice }}
        </text>
      </view>
      <view class="search-dish-item__sales-wrap">
        <text class="search-dish-item__sales-tag">
          {{ t('pages.search.weekly-sales') }}：{{ formatSalesCount(item.salesCount) }}
        </text>
      </view>
    </view>
    <view class="search-dish-item__add center" @click.stop="goDetail">
      <image src="@img/chef/1285.png" class="search-dish-item__add-icon" mode="aspectFit" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-dish-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 28rpx 24rpx;
  background: #fff;
  border-bottom: 1rpx solid #ebebeb;
}

.search-dish-item__img {
  width: 200rpx;
  height: 200rpx;
  background: #f2f2f2;
  display: block;
}

.search-dish-item__main {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
  margin-right: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.search-dish-item__title {
  font-size: 28rpx;
  line-height: 40rpx;
  font-weight: 500;
  color: #1a1a1a;
}

.search-dish-item__price-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 12rpx;
}

.search-dish-item__price-current {
  font-size: 32rpx;
  line-height: 36rpx;
  font-weight: 700;
  color: #e02e24;
}

.search-dish-item__price-old {
  font-size: 24rpx;
  line-height: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.search-dish-item__member {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12rpx;
  padding: 6rpx 0;
  gap: 6rpx;
}

.search-dish-item__member-diamond {
  font-size: 20rpx;
  line-height: 1;
  color: #b8860b;
}

.search-dish-item__member-text {
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: 500;
  color: #8b6914;
}

.search-dish-item__sales-wrap {
  margin-top: auto;
  padding-top: 12rpx;
}

.search-dish-item__sales-tag {
  display: inline-block;
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  background: #f5f5f5;
  font-size: 22rpx;
  line-height: 28rpx;
  color: #888;
}

.search-dish-item__add {
  align-self: flex-end;
  width: 64rpx;
  height: 64rpx;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f2f2f2;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.search-dish-item__add-icon {
  width: 30rpx;
  height: 30rpx;
}

.search-dish-item__img-wrap {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  overflow: hidden;
  flex-shrink: 0;
}

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