<script setup lang="ts">
import { computed } from 'vue';
import type { Product } from '~/composables/useProductCenter';
import { sortTagsByGroup } from '~/composables/useProductCenter';

const props = defineProps<{ product: Product; showCountry?: boolean }>();
const visibleTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 3));
const price = computed(() => {
  const value = Number(props.product.price);
  return Number.isFinite(value) ? value.toFixed(2) : null;
});
</script>

<template>
  <a class="product-card" :href="`https://inkpod.vip/portal/detail/${product.id}`">
    <div class="product-media">
      <img v-if="product.image" :src="product.image" :alt="product.name" loading="lazy" />
      <i v-else class="fa-regular fa-image" aria-hidden="true"></i>
    </div>
    <div class="product-info">
      <h3 :title="product.name">{{ product.name }}</h3>
      <div class="chips">
        <span v-for="tag in visibleTags" :key="tag.id" class="chip" :style="{ color: tag.fontColor || tag.color || '#21834b', backgroundColor: `${tag.color || '#eaf8ef'}30` }">{{ tag.name }}</span>
        <span v-if="showCountry" class="chip country">{{ product.country.name }}</span>
      </div>
      <div class="price"><template v-if="price"><small>￥</small>{{ price }}<small>起</small></template><template v-else>暂无报价</template></div>
    </div>
  </a>
</template>

<style scoped>
.product-card { display: block; width: 100%; height: 382px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.product-media { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f2f2f2; color: #bbb; font-size: 32px; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 7px 12px 9px; }
.product-info h3 { margin: 0 0 5px; overflow: hidden; color: #000; font-size: 18px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; gap: 6px; height: 21px; margin-bottom: 5px; overflow: hidden; }
.chip { display: inline-flex; align-items: center; flex: 0 0 auto; height: 21px; padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.chip.country { color: #535353; background: #ececef; }
.price { margin-top: 5px; color: #000; font-size: 20px; font-weight: 700; line-height: 28px; }
.price small { font-size: 16px; font-weight: 500; }
@media (max-width: 760px) {
  .product-card { height: auto; min-height: 0; max-width: none; overflow: visible; }
  .product-info h3 { font-size: 15px; }
}
</style>
