<template>
  <view class="product-card" @click="emit('select', props.product)">
    <view class="product-card__img-wrap">
      <image
        class="product-card__img"
        :src="props.product.coverImageUrl"
        mode="aspectFill"
      />
      <text
        v-if="props.product.tagTexts?.length"
        class="product-card__img-tag"
        :class="tagClass"
      >
        {{ props.product.tagTexts[0] }}
      </text>
    </view>
    <view class="product-card__body">
      <view>
        <text class="product-card__name">{{ props.product.name }}</text>
        <text class="product-card__desc">{{ props.product.description }}</text>
        <view class="product-card__meta">
          <text class="product-card__sales">{{ props.product.salesText }}</text>
        </view>
      </view>
      <view class="product-card__bottom">
        <view class="product-card__price">
          <text class="product-card__price-unit">¥</text>
          <text class="product-card__price-value">{{ props.product.price }}</text>
          <text
            v-if="props.product.originalPriceText"
            class="product-card__price-origin"
          >
            ¥{{ props.product.originalPriceText }}
          </text>
        </view>
        <view
          class="product-card__btn"
          :class="{ 'product-card__btn--disabled': props.product.soldOut }"
          @click.stop="emit('action', props.product)"
        >
          <text>{{ props.product.hasOptions ? '选规格' : '加入购物车' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { MiniProductCard } from '@/shared'
import { useProductCard } from './useProductCard'

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

const emit = defineEmits<{
  select: [product: MiniProductCard]
  action: [product: MiniProductCard]
}>()

const { tagClass } = useProductCard(props)
</script>

<style lang="scss">
@use './styles.scss';
</style>
