<template>
  <view class="product-card" @tap="$emit('tap', product)">
    <view class="card-img">
      <text>{{ product.emoji }}</text>
      <text v-if="product.alc > 0" class="alc-tag">{{ product.alc }}%</text>
    </view>
    <view class="card-body">
      <text class="card-name">{{ product.name }}</text>
      <text class="card-en">{{ product.en }}</text>
      <text class="card-desc">{{ product.desc }}</text>
      <view class="card-add" @tap.stop="$emit('add', product)">+</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductCard',
  props: { product: { type: Object, required: true } },
  emits: ['tap', 'add']
}
</script>

<style scoped>
.product-card{width:calc(50% - 12rpx);background:var(--bg-card);border-radius:var(--radius);overflow:hidden;margin-bottom:20rpx;border:1px solid var(--border);position:relative;min-height:420rpx}
.card-img{width:100%;height:220rpx;display:flex;align-items:center;justify-content:center;font-size:88rpx;position:relative;background:rgba(245,166,35,.04)}
.alc-tag{position:absolute;top:16rpx;right:16rpx;background:rgba(0,0,0,.6);color:var(--gold-light);font-size:20rpx;padding:6rpx 16rpx;border-radius:20rpx;font-weight:700}
.card-body{padding:16rpx 20rpx 24rpx;position:relative}
.card-name{font-size:28rpx;font-weight:700;color:var(--text);display:block;margin-bottom:4rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-en{font-size:20rpx;color:var(--text-muted);display:block;margin-bottom:6rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-desc{font-size:22rpx;color:var(--text-dim);line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-add{position:absolute;bottom:16rpx;right:16rpx;width:56rpx;height:56rpx;border-radius:50%;background:var(--orange);color:#fff;font-size:32rpx;display:flex;align-items:center;justify-content:center;box-shadow:0 4rpx 20rpx rgba(255,107,53,.4)}
</style>
