<template>
  <div class="flex flex-row items-start gap-2.5 bg-white/80 rounded-[var(--radius-default)] border border-white/35 p-2.5 min-w-0 sm:gap-3 sm:p-3">
    <img
      :src="product.coverUrl"
      :alt="product.name"
      class="w-[92px] h-[92px] object-cover rounded-lg shrink-0 sm:w-[112px] sm:h-[112px]"
    />
    <div class="flex-1 flex flex-col gap-1 min-w-0 w-full">
      <h3 class="text-base leading-tight sm:text-[17px]">{{ product.name }}</h3>
      <p class="tag">库存：{{ stockLabel(product) }}</p>
      <p class="tag">浏览量：{{ product.viewCount || 0 }}</p>
      <p class="font-semibold text-accent2 leading-tight">
        <span v-if="isFree" class="text-[#3a9a68] font-black">免费</span>
        <span v-else-if="product.discountPrice > 0 && product.discountPrice < product.price">
          <span class="line-through text-muted mr-1.5 text-[15px]">¥ {{ product.price.toFixed(2) }}</span>
          ¥ {{ product.discountPrice.toFixed(2) }}
        </span>
        <span v-else>¥ {{ product.price.toFixed(2) }}</span>
      </p>
      <p class="markdown break-words overflow-x-auto max-w-full text-[13px] leading-snug [&_p]:my-0.5 [&_p:last-child]:mb-0" v-html="renderMarkdown(product.description)"></p>
    </div>
  </div>
</template>

<script setup>
import MarkdownIt from 'markdown-it'
import { computed } from 'vue'
import { stockLabel } from '../../shared/fulfillment'

const props = defineProps({
  product: { type: Object, required: true }
})

const md = new MarkdownIt()
const renderMarkdown = (content) => md.render(content || '')

function getPayPrice(p) {
  if (!p) return 0
  if (p.price === 0) return 0
  if (p.discountPrice > 0 && p.discountPrice < p.price) return p.discountPrice
  return p.price
}

const isFree = computed(() => getPayPrice(props.product) === 0)
</script>
