<script setup lang="ts">
/**
 * Clay 风格商品卡片
 *
 * - 圆角 22px，2px 暖色边框，底部投影
 * - hover 上浮 5px + 阴影加深
 * - 价格用珊瑚红色突出
 */
import { computed } from 'vue'
import type { ProductItem } from '@/types/product'

const props = defineProps<{
  product: ProductItem
}>()

const emit = defineEmits<{
  (e: 'add-to-cart', product: ProductItem): void
}>()

const priceLabel = computed(() => {
  const min = Number(props.product.minPrice)
  const max = Number(props.product.maxPrice)
  if (max <= 0 || min === max) return `¥${min.toFixed(2)}`
  return `¥${min.toFixed(2)} - ¥${max.toFixed(2)}`
})

const imageUrl = computed(() => {
  const img = props.product.mainImage
  if (!img) return ''
  if (img.startsWith('http')) return img
  return img
})
</script>

<template>
  <div class="product-card" @click="$router.push(`/product/${product.id}`)">
    <!-- 图片区 -->
    <div class="card-image">
      <el-image
        :src="imageUrl"
        fit="cover"
        class="product-img"
        lazy
      >
        <template #error>
          <div class="image-placeholder">
            <span>🍪</span>
          </div>
        </template>
      </el-image>

      <!-- 标签 -->
      <span v-if="product.isHot === 1" class="tag tag-hot">热门</span>
      <span v-if="product.isNew === 1" class="tag tag-new">新品</span>
    </div>

    <!-- 信息区 -->
    <div class="card-body">
      <h3 class="product-name">{{ product.name }}</h3>
      <p v-if="product.brand" class="product-brand">{{ product.brand }}</p>

      <div class="card-footer">
        <span class="product-price">{{ priceLabel }}</span>
        <span class="product-sales">已售 {{ product.sales }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.product-card {
  background: $bg-surface;
  border: 2px solid $color-border;
  border-radius: $radius-lg;
  box-shadow: $clay-shadow-sm;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: $clay-shadow-md;
  }
}

// 图片区
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: $bg-page;

  .product-img {
    width: 100%;
    height: 100%;
  }

  .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: $bg-page;
  }
}

// 标签
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: $radius-full;
  font-size: $font-size-xs;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;

  &.tag-hot {
    background: linear-gradient(135deg, $color-primary, $color-cta);
  }
  &.tag-new {
    background: $color-accent;
    left: auto;
    right: 10px;
  }
}

// 信息区
.card-body {
  padding: 14px 16px 18px;
}

.product-name {
  margin: 0 0 4px;
  font-size: $font-size-md;
  font-weight: 600;
  color: $color-text-primary;
  line-height: 1.4;

  // 单行截断
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-brand {
  margin: 0 0 10px;
  font-size: $font-size-xs;
  color: $color-text-placeholder;
}

.card-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.product-price {
  font-family: 'Fredoka', sans-serif;
  font-size: $font-size-lg;
  font-weight: 700;
  color: $color-primary;
  flex-shrink: 0;
}

.product-sales {
  font-size: $font-size-xs;
  color: $color-text-placeholder;
}
</style>
