<template>
  <view class="product-card" @click="goDetail">
    <image
      class="product-card__image"
      :src="product.bannerImages[0] || '/static/logo.png'"
      mode="aspectFill"
    />
    <view class="product-card__info">
      <text class="product-card__name">{{ product.name }}</text>
      <text class="product-card__style">款号：{{ product.styleNo }}</text>
      <view class="product-card__bottom">
        <text class="product-card__price">¥{{ product.basePrice }}</text>
        <text class="product-card__stock">库存 {{ product.stock }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { Product } from '../types'

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

function goDetail() {
  uni.navigateTo({ url: `/pages/product/detail?id=${props.product.id}` })
}
</script>

<style scoped>
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  width: 100%;
}
.product-card__image {
  width: 100%;
  height: 340rpx;
}
.product-card__info {
  padding: 16rpx;
}
.product-card__name {
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.product-card__style {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}
.product-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}
.product-card__price {
  font-size: 32rpx;
  color: #e4393c;
  font-weight: bold;
}
.product-card__stock {
  font-size: 22rpx;
  color: #999;
}
</style>
